1 files changed, 42 insertions, 38 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 176c10ea584..9fbd9b2c2a3 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,
@@ -31,7 +32,6 @@ describe('Design discussions component', () => {
 
   const mutationVariables = {
     mutation: createNoteMutation,
-    update: expect.anything(),
     variables: {
       input: {
         noteableId: 'noteable-id',
@@ -40,7 +40,7 @@ describe('Design discussions component', () => {
       },
     },
   };
-  const mutate = jest.fn(() => Promise.resolve());
+  const mutate = jest.fn().mockResolvedValue({ data: { createNote: { errors: [] } } });
   const $apollo = {
     mutate,
   };
@@ -49,7 +49,7 @@ describe('Design discussions component', () => {
     wrapper = mount(DesignDiscussion, {
       propsData: {
         resolvedDiscussionsExpanded: true,
-        discussion,
+        discussion: defaultMockDiscussion,
         noteableId: 'noteable-id',
         designId: 'design-id',
         discussionIndex: 1,
@@ -82,7 +82,7 @@ describe('Design discussions component', () => {
     beforeEach(() => {
       createComponent({
         discussion: {
-          ...discussion,
+          ...defaultMockDiscussion,
           resolvable: false,
         },
       });
@@ -93,7 +93,7 @@ describe('Design discussions component', () => {
     });
 
     it('does not render a checkbox in reply form', () => {
-      findReplyPlaceholder().vm.$emit('onMouseDown');
+      findReplyPlaceholder().vm.$emit('onClick');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findResolveCheckbox().exists()).toBe(false);
@@ -125,7 +125,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 +141,7 @@ describe('Design discussions component', () => {
     beforeEach(() => {
       createComponent({
         discussion: {
-          ...discussion,
+          ...defaultMockDiscussion,
           resolved: true,
           resolvedBy: notes[0].author,
           resolvedAt: '2020-05-08T07:10:45Z',
@@ -206,7 +206,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 +218,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);
@@ -226,34 +226,31 @@ describe('Design discussions component', () => {
     });
   });
 
-  it('calls mutation on submitting form and closes the form', () => {
+  it('calls mutation on submitting form and closes the form', async () => {
     createComponent(
-      { discussionWithOpenForm: discussion.id },
+      { discussionWithOpenForm: defaultMockDiscussion.id },
       { discussionComment: 'test', isFormRendered: true },
     );
 
-    findReplyForm().vm.$emit('submitForm');
+    findReplyForm().vm.$emit('submit-form');
     expect(mutate).toHaveBeenCalledWith(mutationVariables);
 
-    return mutate()
-      .then(() => {
-        return wrapper.vm.$nextTick();
-      })
-      .then(() => {
-        expect(findReplyForm().exists()).toBe(false);
-      });
+    await mutate();
+    await wrapper.vm.$nextTick();
+
+    expect(findReplyForm().exists()).toBe(false);
   });
 
   it('clears the discussion comment on closing comment form', () => {
     createComponent(
-      { discussionWithOpenForm: discussion.id },
+      { discussionWithOpenForm: defaultMockDiscussion.id },
       { discussionComment: 'test', isFormRendered: true },
     );
 
     return wrapper.vm
       .$nextTick()
       .then(() => {
-        findReplyForm().vm.$emit('cancelForm');
+        findReplyForm().vm.$emit('cancel-form');
 
         expect(wrapper.vm.discussionComment).toBe('');
         return wrapper.vm.$nextTick();
@@ -263,19 +260,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 +289,7 @@ describe('Design discussions component', () => {
     expect(mutate).toHaveBeenCalledWith({
       mutation: toggleResolveDiscussionMutation,
       variables: {
-        id: discussion.id,
+        id: defaultMockDiscussion.id,
         resolve: true,
       },
     });
@@ -296,7 +300,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 +310,7 @@ describe('Design discussions component', () => {
       expect(mutate).toHaveBeenCalledWith({
         mutation: toggleResolveDiscussionMutation,
         variables: {
-          id: discussion.id,
+          id: defaultMockDiscussion.id,
           resolve: true,
         },
       });
@@ -317,6 +321,6 @@ describe('Design discussions component', () => {
     createComponent();
     findReplyPlaceholder().vm.$emit('onClick');
 
-    expect(wrapper.emitted('openForm')).toBeTruthy();
+    expect(wrapper.emitted('open-form')).toBeTruthy();
   });
 });