diff options
Diffstat (limited to 'spec/frontend/design_management/components/design_notes/design_discussion_spec.js')
-rw-r--r-- | spec/frontend/design_management/components/design_notes/design_discussion_spec.js | 56 |
1 files changed, 32 insertions, 24 deletions
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js index d7f136ddbac..b04bfa65e37 100644 --- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js @@ -8,8 +8,9 @@ import createNoteMutation from '~/design_management/graphql/mutations/create_not import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; +import mockDiscussion from '../../mock_data/discussion'; -const discussion = { +const defaultMockDiscussion = { id: '0', resolved: false, resolvable: true, @@ -49,7 +50,7 @@ describe('Design discussions component', () => { wrapper = mount(DesignDiscussion, { propsData: { resolvedDiscussionsExpanded: true, - discussion, + discussion: defaultMockDiscussion, noteableId: 'noteable-id', designId: 'design-id', discussionIndex: 1, @@ -82,7 +83,7 @@ describe('Design discussions component', () => { beforeEach(() => { createComponent({ discussion: { - ...discussion, + ...defaultMockDiscussion, resolvable: false, }, }); @@ -125,7 +126,7 @@ describe('Design discussions component', () => { it('renders a checkbox with Resolve thread text in reply form', () => { findReplyPlaceholder().vm.$emit('onClick'); - wrapper.setProps({ discussionWithOpenForm: discussion.id }); + wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); return wrapper.vm.$nextTick().then(() => { expect(findResolveCheckbox().text()).toBe('Resolve thread'); @@ -141,7 +142,7 @@ describe('Design discussions component', () => { beforeEach(() => { createComponent({ discussion: { - ...discussion, + ...defaultMockDiscussion, resolved: true, resolvedBy: notes[0].author, resolvedAt: '2020-05-08T07:10:45Z', @@ -206,7 +207,7 @@ describe('Design discussions component', () => { it('renders a checkbox with Unresolve thread text in reply form', () => { findReplyPlaceholder().vm.$emit('onClick'); - wrapper.setProps({ discussionWithOpenForm: discussion.id }); + wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); return wrapper.vm.$nextTick().then(() => { expect(findResolveCheckbox().text()).toBe('Unresolve thread'); @@ -218,7 +219,7 @@ describe('Design discussions component', () => { it('hides reply placeholder and opens form on placeholder click', () => { createComponent(); findReplyPlaceholder().vm.$emit('onClick'); - wrapper.setProps({ discussionWithOpenForm: discussion.id }); + wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id }); return wrapper.vm.$nextTick().then(() => { expect(findReplyPlaceholder().exists()).toBe(false); @@ -228,7 +229,7 @@ describe('Design discussions component', () => { it('calls mutation on submitting form and closes the form', () => { createComponent( - { discussionWithOpenForm: discussion.id }, + { discussionWithOpenForm: defaultMockDiscussion.id }, { discussionComment: 'test', isFormRendered: true }, ); @@ -246,7 +247,7 @@ describe('Design discussions component', () => { it('clears the discussion comment on closing comment form', () => { createComponent( - { discussionWithOpenForm: discussion.id }, + { discussionWithOpenForm: defaultMockDiscussion.id }, { discussionComment: 'test', isFormRendered: true }, ); @@ -263,19 +264,26 @@ describe('Design discussions component', () => { }); }); - it('applies correct class to design notes when discussion is highlighted', () => { - createComponent( - {}, - { - activeDiscussion: { - id: notes[0].id, - source: 'pin', - }, - }, - ); + describe('when any note from a discussion is active', () => { + it.each([notes[0], notes[0].discussion.notes.nodes[1]])( + 'applies correct class to all notes in the active discussion', + note => { + createComponent( + { discussion: mockDiscussion }, + { + activeDiscussion: { + id: note.id, + source: 'pin', + }, + }, + ); - expect(wrapper.findAll(DesignNote).wrappers.every(note => note.classes('gl-bg-blue-50'))).toBe( - true, + expect( + wrapper + .findAll(DesignNote) + .wrappers.every(designNote => designNote.classes('gl-bg-blue-50')), + ).toBe(true); + }, ); }); @@ -285,7 +293,7 @@ describe('Design discussions component', () => { expect(mutate).toHaveBeenCalledWith({ mutation: toggleResolveDiscussionMutation, variables: { - id: discussion.id, + id: defaultMockDiscussion.id, resolve: true, }, }); @@ -296,7 +304,7 @@ describe('Design discussions component', () => { it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => { createComponent( - { discussionWithOpenForm: discussion.id }, + { discussionWithOpenForm: defaultMockDiscussion.id }, { discussionComment: 'test', isFormRendered: true }, ); findResolveButton().trigger('click'); @@ -306,7 +314,7 @@ describe('Design discussions component', () => { expect(mutate).toHaveBeenCalledWith({ mutation: toggleResolveDiscussionMutation, variables: { - id: discussion.id, + id: defaultMockDiscussion.id, resolve: true, }, }); |