1 files changed, 131 insertions, 0 deletions

diff --git a/spec/frontend/issues/list/components/new_issue_dropdown_spec.js b/spec/frontend/issues/list/components/new_issue_dropdown_spec.js
new file mode 100644
index 00000000000..0c52e66ff14
--- /dev/null
+++ b/spec/frontend/issues/list/components/new_issue_dropdown_spec.js
@@ -0,0 +1,131 @@
+import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import NewIssueDropdown from '~/issues/list/components/new_issue_dropdown.vue';
+import searchProjectsQuery from '~/issues/list/queries/search_projects.query.graphql';
+import { DASH_SCOPE, joinPaths } from '~/lib/utils/url_utility';
+import {
+  emptySearchProjectsQueryResponse,
+  project1,
+  project3,
+  searchProjectsQueryResponse,
+} from '../mock_data';
+
+describe('NewIssueDropdown component', () => {
+  let wrapper;
+
+  const localVue = createLocalVue();
+  localVue.use(VueApollo);
+
+  const mountComponent = ({
+    search = '',
+    queryResponse = searchProjectsQueryResponse,
+    mountFn = shallowMount,
+  } = {}) => {
+    const requestHandlers = [[searchProjectsQuery, jest.fn().mockResolvedValue(queryResponse)]];
+    const apolloProvider = createMockApollo(requestHandlers);
+
+    return mountFn(NewIssueDropdown, {
+      localVue,
+      apolloProvider,
+      provide: {
+        fullPath: 'mushroom-kingdom',
+      },
+      data() {
+        return { search };
+      },
+    });
+  };
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findInput = () => wrapper.findComponent(GlSearchBoxByType);
+  const showDropdown = async () => {
+    findDropdown().vm.$emit('shown');
+    await wrapper.vm.$apollo.queries.projects.refetch();
+    jest.runOnlyPendingTimers();
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a split dropdown', () => {
+    wrapper = mountComponent();
+
+    expect(findDropdown().props('split')).toBe(true);
+  });
+
+  it('renders a label for the dropdown toggle button', () => {
+    wrapper = mountComponent();
+
+    expect(findDropdown().attributes('toggle-text')).toBe(NewIssueDropdown.i18n.toggleButtonLabel);
+  });
+
+  it('focuses on input when dropdown is shown', async () => {
+    wrapper = mountComponent({ mountFn: mount });
+
+    const inputSpy = jest.spyOn(findInput().vm, 'focusInput');
+
+    await showDropdown();
+
+    expect(inputSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders projects with issues enabled', async () => {
+    wrapper = mountComponent({ mountFn: mount });
+
+    await showDropdown();
+
+    const listItems = wrapper.findAll('li');
+
+    expect(listItems.at(0).text()).toBe(project1.nameWithNamespace);
+    expect(listItems.at(1).text()).toBe(project3.nameWithNamespace);
+  });
+
+  it('renders `No matches found` when there are no matches', async () => {
+    wrapper = mountComponent({
+      search: 'no matches',
+      queryResponse: emptySearchProjectsQueryResponse,
+      mountFn: mount,
+    });
+
+    await showDropdown();
+
+    expect(wrapper.find('li').text()).toBe(NewIssueDropdown.i18n.noMatchesFound);
+  });
+
+  describe('when no project is selected', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('dropdown button is not a link', () => {
+      expect(findDropdown().attributes('split-href')).toBeUndefined();
+    });
+
+    it('displays default text on the dropdown button', () => {
+      expect(findDropdown().props('text')).toBe(NewIssueDropdown.i18n.defaultDropdownText);
+    });
+  });
+
+  describe('when a project is selected', () => {
+    beforeEach(async () => {
+      wrapper = mountComponent({ mountFn: mount });
+
+      await showDropdown();
+
+      wrapper.findComponent(GlDropdownItem).vm.$emit('click', project1);
+    });
+
+    it('dropdown button is a link', () => {
+      const href = joinPaths(project1.webUrl, DASH_SCOPE, 'issues/new');
+
+      expect(findDropdown().attributes('split-href')).toBe(href);
+    });
+
+    it('displays project name on the dropdown button', () => {
+      expect(findDropdown().props('text')).toBe(`New issue in ${project1.name}`);
+    });
+  });
+});