1 files changed, 47 insertions, 5 deletions

diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js
index eea7f25dbc1..99980c98f8b 100644
--- a/spec/frontend/batch_comments/components/draft_note_spec.js
+++ b/spec/frontend/batch_comments/components/draft_note_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { getByRole } from '@testing-library/dom';
 import DraftNote from '~/batch_comments/components/draft_note.vue';
 import { createStore } from '~/batch_comments/stores';
 import NoteableNote from '~/notes/components/noteable_note.vue';
@@ -8,21 +9,34 @@ import { createDraft } from '../mock_data';
 const localVue = createLocalVue();
 
 describe('Batch comments draft note component', () => {
+  let store;
   let wrapper;
   let draft;
+  const LINE_RANGE = {};
+  const draftWithLineRange = {
+    position: {
+      line_range: LINE_RANGE,
+    },
+  };
 
-  beforeEach(() => {
-    const store = createStore();
-
-    draft = createDraft();
+  const getList = () => getByRole(wrapper.element, 'list');
 
+  const createComponent = (propsData = { draft }, features = {}) => {
     wrapper = shallowMount(localVue.extend(DraftNote), {
       store,
-      propsData: { draft },
+      propsData,
       localVue,
+      provide: {
+        glFeatures: { multilineComments: true, ...features },
+      },
     });
 
     jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation();
+  };
+
+  beforeEach(() => {
+    store = createStore();
+    draft = createDraft();
   });
 
   afterEach(() => {
@@ -30,6 +44,7 @@ describe('Batch comments draft note component', () => {
   });
 
   it('renders template', () => {
+    createComponent();
     expect(wrapper.find('.draft-pending-label').exists()).toBe(true);
 
     const note = wrapper.find(NoteableNote);
@@ -40,6 +55,7 @@ describe('Batch comments draft note component', () => {
 
   describe('add comment now', () => {
     it('dispatches publishSingleDraft when clicking', () => {
+      createComponent();
       const publishNowButton = wrapper.find({ ref: 'publishNowButton' });
       publishNowButton.vm.$emit('click');
 
@@ -50,6 +66,7 @@ describe('Batch comments draft note component', () => {
     });
 
     it('sets as loading when draft is publishing', done => {
+      createComponent();
       wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1);
 
       wrapper.vm.$nextTick(() => {
@@ -64,6 +81,7 @@ describe('Batch comments draft note component', () => {
 
   describe('update', () => {
     it('dispatches updateDraft', done => {
+      createComponent();
       const note = wrapper.find(NoteableNote);
 
       note.vm.$emit('handleEdit');
@@ -91,6 +109,7 @@ describe('Batch comments draft note component', () => {
 
   describe('deleteDraft', () => {
     it('dispatches deleteDraft', () => {
+      createComponent();
       jest.spyOn(window, 'confirm').mockImplementation(() => true);
 
       const note = wrapper.find(NoteableNote);
@@ -103,6 +122,7 @@ describe('Batch comments draft note component', () => {
 
   describe('quick actions', () => {
     it('renders referenced commands', done => {
+      createComponent();
       wrapper.setProps({
         draft: {
           ...draft,
@@ -122,4 +142,26 @@ describe('Batch comments draft note component', () => {
       });
     });
   });
+
+  describe('multiline comments', () => {
+    describe.each`
+      desc                          | props                 | features                        | event           | expectedCalls
+      ${'with `draft.position`'}    | ${draftWithLineRange} | ${{}}                           | ${'mouseenter'} | ${[['setSelectedCommentPositionHover', LINE_RANGE]]}
+      ${'with `draft.position`'}    | ${draftWithLineRange} | ${{}}                           | ${'mouseleave'} | ${[['setSelectedCommentPositionHover']]}
+      ${'with `draft.position`'}    | ${draftWithLineRange} | ${{ multilineComments: false }} | ${'mouseenter'} | ${[]}
+      ${'with `draft.position`'}    | ${draftWithLineRange} | ${{ multilineComments: false }} | ${'mouseleave'} | ${[]}
+      ${'without `draft.position`'} | ${{}}                 | ${{}}                           | ${'mouseenter'} | ${[]}
+      ${'without `draft.position`'} | ${{}}                 | ${{}}                           | ${'mouseleave'} | ${[]}
+    `('$desc and features $features', ({ props, event, features, expectedCalls }) => {
+      beforeEach(() => {
+        createComponent({ draft: { ...draft, ...props } }, features);
+        jest.spyOn(store, 'dispatch');
+      });
+
+      it(`calls store ${expectedCalls.length} times on ${event}`, () => {
+        getList().dispatchEvent(new MouseEvent(event, { bubbles: true }));
+        expect(store.dispatch.mock.calls).toEqual(expectedCalls);
+      });
+    });
+  });
 });