Migrate dropdown_spec to Jest

Closes https://gitlab.com/gitlab-org/gitlab/issues/31628

spec/frontend/ide/components/file_templates/dropdown_spec.js

+import Vuex from 'vuex';
+import $ from 'jquery';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Dropdown from '~/ide/components/file_templates/dropdown.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IDE file templates dropdown component', () => {
+  let wrapper;
+  let element;
+  let fetchTemplateTypesMock;
+
+  const defaultProps = {
+    label: 'label',
+  };
+
+  const findItemButtons = () => wrapper.findAll('button');
+  const findSearch = () => wrapper.find('input[type="search"]');
+  const triggerDropdown = () => $(element).trigger('show.bs.dropdown');
+
+  const createComponent = ({ props, state } = {}) => {
+    fetchTemplateTypesMock = jest.fn();
+    const fakeStore = new Vuex.Store({
+      modules: {
+        fileTemplates: {
+          namespaced: true,
+          state: {
+            templates: [],
+            isLoading: false,
+            ...state,
+          },
+          actions: {
+            fetchTemplateTypes: fetchTemplateTypesMock,
+          },
+        },
+      },
+    });
+
+    wrapper = shallowMount(Dropdown, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      store: fakeStore,
+      localVue,
+      sync: false,
+    });
+
+    ({ element } = wrapper);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('calls clickItem on click', () => {
+    const itemData = { name: 'test.yml ' };
+    createComponent({ props: { data: [itemData] } });
+    const item = findItemButtons().at(0);
+    item.trigger('click');
+
+    expect(wrapper.emitted().click[0][0]).toBe(itemData);
+  });
+
+  it('renders dropdown title', () => {
+    const title = 'Test title';
+    createComponent({ props: { title } });
+
+    expect(wrapper.find('.dropdown-title').text()).toContain(title);
+  });
+
+  describe('in async mode', () => {
+    const defaultAsyncProps = { ...defaultProps, isAsyncData: true };
+
+    it('calls `fetchTemplateTypes` on dropdown event', () => {
+      createComponent({ props: defaultAsyncProps });
+
+      triggerDropdown();
+
+      expect(fetchTemplateTypesMock).toHaveBeenCalled();
+    });
+
+    it('does not call `fetchTemplateTypes` on dropdown event if destroyed', () => {
+      createComponent({ props: defaultAsyncProps });
+      wrapper.destroy();
+
+      triggerDropdown();
+
+      expect(fetchTemplateTypesMock).not.toHaveBeenCalled();
+    });
+
+    it('shows loader when isLoading is true', () => {
+      createComponent({ props: defaultAsyncProps, state: { isLoading: true } });
+
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+
+    it('renders templates', () => {
+      const templates = [{ name: 'file-1' }, { name: 'file-2' }];
+      createComponent({
+        props: { ...defaultAsyncProps, data: [{ name: 'should-never-appear ' }] },
+        state: {
+          templates,
+        },
+      });
+      const items = findItemButtons();
+
+      expect(items.wrappers.map(x => x.text())).toEqual(templates.map(x => x.name));
+    });
+
+    it('searches template data', () => {
+      const templates = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
+      const matches = ['match 1', 'match 2'];
+      createComponent({
+        props: { ...defaultAsyncProps, data: matches, searchable: true },
+        state: { templates },
+      });
+      findSearch().setValue('match');
+      return wrapper.vm.$nextTick().then(() => {
+        const items = findItemButtons();
+
+        expect(items.length).toBe(matches.length);
+        expect(items.wrappers.map(x => x.text())).toEqual(matches);
+      });
+    });
+
+    it('does not render input when `searchable` is true & `showLoading` is true', () => {
+      createComponent({
+        props: { ...defaultAsyncProps, searchable: true },
+        state: { isLoading: true },
+      });
+
+      expect(findSearch().exists()).toBe(false);
+    });
+  });
+
+  describe('in sync mode', () => {
+    it('renders props data', () => {
+      const data = [{ name: 'file-1' }, { name: 'file-2' }];
+      createComponent({
+        props: { data },
+        state: {
+          templates: [{ name: 'should-never-appear ' }],
+        },
+      });
+
+      const items = findItemButtons();
+
+      expect(items.length).toBe(data.length);
+      expect(items.wrappers.map(x => x.text())).toEqual(data.map(x => x.name));
+    });
+
+    it('renders input when `searchable` is true', () => {
+      createComponent({ props: { searchable: true } });
+
+      expect(findSearch().exists()).toBe(true);
+    });
+
+    it('searches data', () => {
+      const data = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
+      const matches = ['match 1', 'match 2'];
+      createComponent({ props: { searchable: true, data } });
+      findSearch().setValue('match');
+      return wrapper.vm.$nextTick().then(() => {
+        const items = findItemButtons();
+
+        expect(items.length).toBe(matches.length);
+        expect(items.wrappers.map(x => x.text())).toEqual(matches);
+      });
+    });
+  });
+});

spec/javascripts/ide/components/file_templates/dropdown_spec.js

-import $ from 'jquery';
-import Vue from 'vue';
-import { createStore } from '~/ide/stores';
-import Dropdown from '~/ide/components/file_templates/dropdown.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from '../../helpers';
-
-describe('IDE file templates dropdown component', () => {
-  let Component;
-  let vm;
-
-  beforeAll(() => {
-    Component = Vue.extend(Dropdown);
-  });
-
-  beforeEach(() => {
-    const store = createStore();
-
-    vm = createComponentWithStore(Component, store, {
-      label: 'Test',
-    }).$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-    resetStore(vm.$store);
-  });
-
-  describe('async', () => {
-    beforeEach(() => {
-      vm.isAsyncData = true;
-    });
-
-    it('calls async store method on Bootstrap dropdown event', () => {
-      spyOn(vm, 'fetchTemplateTypes').and.stub();
-
-      $(vm.$el).trigger('show.bs.dropdown');
-
-      expect(vm.fetchTemplateTypes).toHaveBeenCalled();
-    });
-
-    it('renders templates when async', done => {
-      vm.$store.state.fileTemplates.templates = [
-        {
-          name: 'test',
-        },
-      ];
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dropdown-content').textContent).toContain('test');
-
-        done();
-      });
-    });
-
-    it('renders loading icon when isLoading is true', done => {
-      vm.$store.state.fileTemplates.isLoading = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
-
-        done();
-      });
-    });
-
-    it('searches template data', () => {
-      vm.$store.state.fileTemplates.templates = [
-        {
-          name: 'test',
-        },
-      ];
-      vm.searchable = true;
-      vm.search = 'hello';
-
-      expect(vm.outputData).toEqual([]);
-    });
-
-    it('does not filter data is searchable is false', () => {
-      vm.$store.state.fileTemplates.templates = [
-        {
-          name: 'test',
-        },
-      ];
-      vm.search = 'hello';
-
-      expect(vm.outputData).toEqual([
-        {
-          name: 'test',
-        },
-      ]);
-    });
-
-    it('calls clickItem on click', done => {
-      spyOn(vm, 'clickItem').and.stub();
-
-      vm.$store.state.fileTemplates.templates = [
-        {
-          name: 'test',
-        },
-      ];
-
-      vm.$nextTick(() => {
-        vm.$el.querySelector('.dropdown-content button').click();
-
-        expect(vm.clickItem).toHaveBeenCalledWith({
-          name: 'test',
-        });
-
-        done();
-      });
-    });
-
-    it('renders input when searchable is true', done => {
-      vm.searchable = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dropdown-input')).not.toBe(null);
-
-        done();
-      });
-    });
-
-    it('does not render input when searchable is true & showLoading is true', done => {
-      vm.searchable = true;
-      vm.$store.state.fileTemplates.isLoading = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dropdown-input')).toBe(null);
-
-        done();
-      });
-    });
-  });
-
-  describe('sync', () => {
-    beforeEach(done => {
-      vm.data = [
-        {
-          name: 'test sync',
-        },
-      ];
-
-      vm.$nextTick(done);
-    });
-
-    it('renders props data', () => {
-      expect(vm.$el.querySelector('.dropdown-content').textContent).toContain('test sync');
-    });
-
-    it('renders input when searchable is true', done => {
-      vm.searchable = true;
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dropdown-input')).not.toBe(null);
-
-        done();
-      });
-    });
-
-    it('calls clickItem on click', done => {
-      spyOn(vm, 'clickItem').and.stub();
-
-      vm.$nextTick(() => {
-        vm.$el.querySelector('.dropdown-content button').click();
-
-        expect(vm.clickItem).toHaveBeenCalledWith({
-          name: 'test sync',
-        });
-
-        done();
-      });
-    });
-
-    it('searches template data', () => {
-      vm.searchable = true;
-      vm.search = 'hello';
-
-      expect(vm.outputData).toEqual([]);
-    });
-
-    it('does not filter data is searchable is false', () => {
-      vm.search = 'hello';
-
-      expect(vm.outputData).toEqual([
-        {
-          name: 'test sync',
-        },
-      ]);
-    });
-
-    it('renders dropdown title', done => {
-      vm.title = 'Test title';
-
-      vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('Test title');
-
-        done();
-      });
-    });
-  });
-});