1 files changed, 122 insertions, 0 deletions

diff --git a/spec/frontend/issues/create_merge_request_dropdown_spec.js b/spec/frontend/issues/create_merge_request_dropdown_spec.js
new file mode 100644
index 00000000000..fdc0bd7d72e
--- /dev/null
+++ b/spec/frontend/issues/create_merge_request_dropdown_spec.js
@@ -0,0 +1,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?branch_name=some-branch&ref=main`;
+
+      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?branch_name=contains%23hash&ref=main`,
+      );
+    });
+  });
+
+  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,
+      );
+    });
+  });
+});