summaryrefslogtreecommitdiff
path: root/spec/frontend/notes/components/multiline_comment_form_spec.js
blob: b6d603c6358ec4a5e8723530c6e13e2d61817067 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { GlFormSelect } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
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);
  });
});