Merge branch 'psi-boards-selector-jest' into 'master'

Move boards_selector_spec to jest

See merge request gitlab-org/gitlab!26322

spec/javascripts/boards/components/boards_selector_spec.js → spec/frontend/boards/components/boards_selector_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import { GlDropdown } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
 import boardsStore from '~/boards/stores/boards_store';
@@ -18,17 +19,23 @@ function boardGenerator(n) {
 }
 
 describe('BoardsSelector', () => {
-  let vm;
+  let wrapper;
   let allBoardsResponse;
   let recentBoardsResponse;
-  let fillSearchBox;
   const boards = boardGenerator(20);
   const recentBoards = boardGenerator(5);
 
-  beforeEach(done => {
-    setFixtures('<div class="js-boards-selector"></div>');
-    window.gl = window.gl || {};
+  const fillSearchBox = filterTerm => {
+    const searchBox = wrapper.find({ ref: 'searchBox' });
+    const searchBoxInput = searchBox.find('input');
+    searchBoxInput.setValue(filterTerm);
+    searchBoxInput.trigger('input');
+  };
 
+  const getDropdownItems = () => wrapper.findAll('.js-dropdown-item');
+  const getDropdownHeaders = () => wrapper.findAll('.dropdown-bold-header');
+
+  beforeEach(() => {
     boardsStore.setEndpoints({
       boardsEndpoint: '',
       recentBoardsEndpoint: '',
@@ -44,13 +51,12 @@ describe('BoardsSelector', () => {
       data: recentBoards,
     });
 
-    spyOn(boardsStore, 'allBoards').and.returnValue(allBoardsResponse);
-    spyOn(boardsStore, 'recentBoards').and.returnValue(recentBoardsResponse);
+    boardsStore.allBoards = jest.fn(() => allBoardsResponse);
+    boardsStore.recentBoards = jest.fn(() => recentBoardsResponse);
 
     const Component = Vue.extend(BoardsSelector);
-    vm = mountComponent(
-      Component,
-      {
+    wrapper = mount(Component, {
+      propsData: {
         throttleDuration,
         currentBoard: {
           id: 1,
@@ -71,133 +77,79 @@ describe('BoardsSelector', () => {
         scopedIssueBoardFeatureEnabled: true,
         weights: [],
       },
-      document.querySelector('.js-boards-selector'),
-    );
+      attachToDocument: true,
+    });
 
     // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-    vm.$children[0].$emit('show');
-
-    Promise.all([allBoardsResponse, recentBoardsResponse])
-      .then(() => vm.$nextTick())
-      .then(done)
-      .catch(done.fail);
-
-    fillSearchBox = filterTerm => {
-      const { searchBox } = vm.$refs;
-      const searchBoxInput = searchBox.$el.querySelector('input');
-      searchBoxInput.value = filterTerm;
-      searchBoxInput.dispatchEvent(new Event('input'));
-    };
+    wrapper.find(GlDropdown).vm.$emit('show');
+
+    return Promise.all([allBoardsResponse, recentBoardsResponse]).then(() => Vue.nextTick());
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('filtering', () => {
-    it('shows all boards without filtering', done => {
-      vm.$nextTick()
-        .then(() => {
-          const dropdownItem = vm.$el.querySelectorAll('.js-dropdown-item');
-
-          expect(dropdownItem.length).toBe(boards.length + recentBoards.length);
-        })
-        .then(done)
-        .catch(done.fail);
+    it('shows all boards without filtering', () => {
+      expect(getDropdownItems().length).toBe(boards.length + recentBoards.length);
     });
 
-    it('shows only matching boards when filtering', done => {
+    it('shows only matching boards when filtering', () => {
       const filterTerm = 'board1';
       const expectedCount = boards.filter(board => board.name.includes(filterTerm)).length;
 
       fillSearchBox(filterTerm);
 
-      vm.$nextTick()
-        .then(() => {
-          const dropdownItems = vm.$el.querySelectorAll('.js-dropdown-item');
-
-          expect(dropdownItems.length).toBe(expectedCount);
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(getDropdownItems().length).toBe(expectedCount);
+      });
     });
 
-    it('shows message if there are no matching boards', done => {
+    it('shows message if there are no matching boards', () => {
       fillSearchBox('does not exist');
 
-      vm.$nextTick()
-        .then(() => {
-          const dropdownItems = vm.$el.querySelectorAll('.js-dropdown-item');
-
-          expect(dropdownItems.length).toBe(0);
-          expect(vm.$el).toContainText('No matching boards found');
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(getDropdownItems().length).toBe(0);
+        expect(wrapper.text().includes('No matching boards found')).toBe(true);
+      });
     });
   });
 
   describe('recent boards section', () => {
-    it('shows only when boards are greater than 10', done => {
-      vm.$nextTick()
-        .then(() => {
-          const headerEls = vm.$el.querySelectorAll('.dropdown-bold-header');
-
-          const expectedCount = 2; // Recent + All
+    it('shows only when boards are greater than 10', () => {
+      const expectedCount = 2; // Recent + All
 
-          expect(expectedCount).toBe(headerEls.length);
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(getDropdownHeaders().length).toBe(expectedCount);
     });
 
-    it('does not show when boards are less than 10', done => {
-      spyOn(vm, 'initScrollFade');
-      spyOn(vm, 'setScrollFade');
-
-      vm.$nextTick()
-        .then(() => {
-          vm.boards = vm.boards.slice(0, 5);
-        })
-        .then(vm.$nextTick)
-        .then(() => {
-          const headerEls = vm.$el.querySelectorAll('.dropdown-bold-header');
-          const expectedCount = 0;
-
-          expect(expectedCount).toBe(headerEls.length);
-        })
-        .then(done)
-        .catch(done.fail);
+    it('does not show when boards are less than 10', () => {
+      wrapper.setData({
+        boards: boards.slice(0, 5),
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(getDropdownHeaders().length).toBe(0);
+      });
     });
 
-    it('does not show when recentBoards api returns empty array', done => {
-      vm.$nextTick()
-        .then(() => {
-          vm.recentBoards = [];
-        })
-        .then(vm.$nextTick)
-        .then(() => {
-          const headerEls = vm.$el.querySelectorAll('.dropdown-bold-header');
-          const expectedCount = 0;
-
-          expect(expectedCount).toBe(headerEls.length);
-        })
-        .then(done)
-        .catch(done.fail);
+    it('does not show when recentBoards api returns empty array', () => {
+      wrapper.setData({
+        recentBoards: [],
+      });
+
+      return Vue.nextTick().then(() => {
+        expect(getDropdownHeaders().length).toBe(0);
+      });
     });
 
-    it('does not show when search is active', done => {
+    it('does not show when search is active', () => {
       fillSearchBox('Random string');
 
-      vm.$nextTick()
-        .then(() => {
-          const headerEls = vm.$el.querySelectorAll('.dropdown-bold-header');
-          const expectedCount = 0;
-
-          expect(expectedCount).toBe(headerEls.length);
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(getDropdownHeaders().length).toBe(0);
+      });
     });
   });
 });