Commit d63f3ea7 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'refactor/56367-extract-resolve-with-issue-button-component' into 'master'

Extract ResolveWithIssueButton from NoteableDiscussion component

Closes #56367

See merge request gitlab-org/gitlab-ce!25093
parents 15528c75 a26cd123
<script>
import Icon from '~/vue_shared/components/icon.vue';
import { GlTooltipDirective, GlButton } from '@gitlab/ui';
export default {
name: 'ResolveWithIssueButton',
components: {
Icon,
GlButton,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
url: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="btn-group" role="group">
<gl-button
v-gl-tooltip
:href="url"
:title="s__('MergeRequests|Resolve this discussion in a new issue')"
class="new-issue-for-discussion discussion-create-issue-btn"
>
<icon name="issue-new" />
</gl-button>
</div>
</template>
......@@ -25,6 +25,7 @@ import noteable from '../mixins/noteable';
import resolvable from '../mixins/resolvable';
import discussionNavigation from '../mixins/discussion_navigation';
import ReplyPlaceholder from './discussion_reply_placeholder.vue';
import ResolveWithIssueButton from './discussion_resolve_with_issue_button.vue';
import jumpToNextDiscussionButton from './discussion_jump_to_next_button.vue';
import eventHub from '../event_hub';
......@@ -44,6 +45,7 @@ export default {
ReplyPlaceholder,
placeholderNote,
placeholderSystemNote,
ResolveWithIssueButton,
systemNote,
TimelineEntryItem,
},
......@@ -234,6 +236,9 @@ export default {
url: this.discussion.discussion_path,
};
},
resolveWithIssuePath() {
return !this.discussionResolved && this.discussion.resolve_with_issue_path;
},
},
watch: {
isReplying() {
......@@ -487,16 +492,10 @@ Please check your network connection and try again.`;
class="btn-group discussion-actions ml-sm-2"
role="group"
>
<div v-if="!discussionResolved" class="btn-group" role="group">
<a
v-gl-tooltip
:href="discussion.resolve_with_issue_path"
:title="s__('MergeRequests|Resolve this discussion in a new issue')"
class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
>
<icon name="issue-new" />
</a>
</div>
<resolve-with-issue-button
v-if="resolveWithIssuePath"
:url="resolveWithIssuePath"
/>
<jump-to-next-discussion-button
v-if="shouldShowJumpToNextDiscussion"
@onClick="jumpToNextDiscussion"
......
---
title: Extracted ResolveWithIssueButton to its own component
merge_request: 25093
author: Martin Hobert
type: other
import { GlButton } from '@gitlab/ui';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { TEST_HOST } from 'spec/test_constants';
const localVue = createLocalVue();
describe('ResolveWithIssueButton', () => {
let wrapper;
const url = `${TEST_HOST}/hello-world/`;
beforeEach(() => {
wrapper = shallowMount(ResolveWithIssueButton, {
localVue,
sync: false,
propsData: {
url,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('it should have a link with the provided link property as href', () => {
const button = wrapper.find(GlButton);
expect(button.attributes().href).toBe(url);
});
});
......@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import '~/behaviors/markdown/render_gfm';
import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
import mockDiffFile from '../../diffs/mock_data/diff_file';
......@@ -238,4 +239,42 @@ describe('noteable_discussion component', () => {
});
});
});
describe('for resolved discussion', () => {
beforeEach(() => {
const discussion = getJSONFixture(discussionWithTwoUnresolvedNotes)[0];
wrapper.setProps({ discussion });
});
it('does not display a button to resolve with issue', () => {
const button = wrapper.find(ResolveWithIssueButton);
expect(button.exists()).toBe(false);
});
});
describe('for unresolved discussion', () => {
beforeEach(done => {
const discussion = {
...getJSONFixture(discussionWithTwoUnresolvedNotes)[0],
expanded: true,
};
discussion.notes = discussion.notes.map(note => ({
...note,
resolved: false,
}));
wrapper.setProps({ discussion });
wrapper.vm
.$nextTick()
.then(done)
.catch(done.fail);
});
it('displays a button to resolve with issue', () => {
const button = wrapper.find(ResolveWithIssueButton);
expect(button.exists()).toBe(true);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment