summaryrefslogtreecommitdiff
path: root/spec/frontend/issues/create_merge_request_dropdown_spec.js
blob: c2cfb16fdf70a191ef79703aa4d2c6011fc1369c (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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import MockAdapter from 'axios-mock-adapter';
import { TEST_HOST } from 'helpers/test_constants';
import confidentialState from '~/confidential_merge_request/state';
import CreateMergeRequestDropdown from '~/issues/create_merge_request_dropdown';
import axios from '~/lib/utils/axios_utils';

describe('CreateMergeRequestDropdown', () => {
  let axiosMock;
  let dropdown;

  beforeEach(() => {
    axiosMock = new MockAdapter(axios);

    document.body.innerHTML = `
      <div id="dummy-wrapper-element">
        <div class="available"></div>
        <div class="unavailable">
          <div class="gl-spinner"></div>
          <div class="text"></div>
        </div>
        <div class="js-ref"></div>
        <div class="js-create-mr"></div>
        <div class="js-create-merge-request">
          <span class="js-spinner"></span>
        </div>
        <div class="js-create-target"></div>
        <div class="js-dropdown-toggle"></div>
      </div>
    `;

    const dummyElement = document.getElementById('dummy-wrapper-element');
    dropdown = new CreateMergeRequestDropdown(dummyElement);
    dropdown.refsPath = `${TEST_HOST}/dummy/refs?search=`;
  });

  afterEach(() => {
    axiosMock.restore();
  });

  describe('getRef', () => {
    it('escapes branch names correctly', (done) => {
      const endpoint = `${dropdown.refsPath}contains%23hash`;
      jest.spyOn(axios, 'get');
      axiosMock.onGet(endpoint).replyOnce({});

      dropdown
        .getRef('contains#hash')
        .then(() => {
          expect(axios.get).toHaveBeenCalledWith(
            endpoint,
            expect.objectContaining({ cancelToken: expect.anything() }),
          );
        })
        .then(done)
        .catch(done.fail);
    });
  });

  describe('updateCreatePaths', () => {
    it('escapes branch names correctly', () => {
      dropdown.createBranchPath = `${TEST_HOST}/branches?branch_name=some-branch&issue=42`;
      dropdown.createMrPath = `${TEST_HOST}/create_merge_request?merge_request%5Bsource_branch%5D=test&merge_request%5Btarget_branch%5D=master&merge_request%5Bissue_iid%5D=42`;

      dropdown.updateCreatePaths('branch', 'contains#hash');

      expect(dropdown.createBranchPath).toBe(
        `${TEST_HOST}/branches?branch_name=contains%23hash&issue=42`,
      );

      expect(dropdown.createMrPath).toBe(
        `${TEST_HOST}/create_merge_request?merge_request%5Bsource_branch%5D=contains%23hash&merge_request%5Btarget_branch%5D=master&merge_request%5Bissue_iid%5D=42`,
      );
    });
  });

  describe('enable', () => {
    beforeEach(() => {
      dropdown.createMergeRequestButton.classList.add('disabled');
    });

    afterEach(() => {
      confidentialState.selectedProject = {};
    });

    it('enables button when not confidential issue', () => {
      dropdown.enable();

      expect(dropdown.createMergeRequestButton.classList).not.toContain('disabled');
    });

    it('enables when can create confidential issue', () => {
      document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true');
      confidentialState.selectedProject = { name: 'test' };

      dropdown.enable();

      expect(dropdown.createMergeRequestButton.classList).not.toContain('disabled');
    });

    it('does not enable when can not create confidential issue', () => {
      document.querySelector('.js-create-mr').setAttribute('data-is-confidential', 'true');

      dropdown.enable();

      expect(dropdown.createMergeRequestButton.classList).toContain('disabled');
    });
  });

  describe('setLoading', () => {
    it.each`
      loading  | hasClass
      ${true}  | ${false}
      ${false} | ${true}
    `('it toggle loading spinner when loading is $loading', ({ loading, hasClass }) => {
      dropdown.setLoading(loading);

      expect(document.querySelector('.js-spinner').classList.contains('gl-display-none')).toEqual(
        hasClass,
      );
    });
  });
});