1 files changed, 89 insertions, 0 deletions
diff --git a/spec/frontend/notes/components/multiline_comment_form_spec.js b/spec/frontend/notes/components/multiline_comment_form_spec.js
new file mode 100644
index 00000000000..081fd6e10ef
--- /dev/null
+++ b/spec/frontend/notes/components/multiline_comment_form_spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
+import { GlFormSelect } from '@gitlab/ui';
+import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
+import notesModule from '~/notes/stores/modules';
+
+describe('MultilineCommentForm', () => {
+  Vue.use(Vuex);
+  const setSelectedCommentPosition = jest.fn();
+  const testLine = {
+    line_code: 'test',
+    type: 'test',
+    old_line: 'test',
+    new_line: 'test',
+  };
+
+  const createWrapper = (props = {}, state) => {
+    setSelectedCommentPosition.mockReset();
+
+    const store = new Vuex.Store({
+      modules: { notes: notesModule() },
+      actions: { setSelectedCommentPosition },
+    });
+    if (state) store.replaceState({ ...store.state, ...state });
+
+    const propsData = {
+      line: { ...testLine },
+      commentLineOptions: [{ text: '1' }],
+      ...props,
+    };
+    return mount(MultilineCommentForm, { propsData, store });
+  };
+
+  describe('created', () => {
+    it('sets commentLineStart to line', () => {
+      const line = { ...testLine };
+      const wrapper = createWrapper({ line });
+
+      expect(wrapper.vm.commentLineStart).toEqual(line);
+      expect(setSelectedCommentPosition).toHaveBeenCalled();
+    });
+
+    it('sets commentLineStart to lineRange', () => {
+      const lineRange = {
+        start: { ...testLine },
+      };
+      const wrapper = createWrapper({ lineRange });
+
+      expect(wrapper.vm.commentLineStart).toEqual(lineRange.start);
+      expect(setSelectedCommentPosition).toHaveBeenCalled();
+    });
+
+    it('sets commentLineStart to selectedCommentPosition', () => {
+      const notes = {
+        selectedCommentPosition: {
+          start: { ...testLine },
+        },
+      };
+      const wrapper = createWrapper({}, { notes });
+
+      expect(wrapper.vm.commentLineStart).toEqual(wrapper.vm.selectedCommentPosition.start);
+      expect(setSelectedCommentPosition).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('destroyed', () => {
+    it('calls setSelectedCommentPosition', () => {
+      const wrapper = createWrapper();
+      wrapper.destroy();
+
+      // Once during created, once during destroyed
+      expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('handles changing the start line', () => {
+    const line = { ...testLine };
+    const wrapper = createWrapper({ line });
+    const glSelect = wrapper.findComponent(GlFormSelect);
+
+    glSelect.vm.$emit('change', { ...testLine });
+
+    expect(wrapper.vm.commentLineStart).toEqual(line);
+    expect(wrapper.emitted('input')).toBeTruthy();
+    // Once during created, once during updateCommentLineStart
+    expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2);
+  });
+});