1 files changed, 95 insertions, 100 deletions

diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index 9cf7c5774bf..26a5bf34595 100644
--- a/spec/frontend/boards/components/boards_selector_spec.js
+++ b/spec/frontend/boards/components/boards_selector_spec.js
@@ -1,43 +1,40 @@
 import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
+import { BoardType } from '~/boards/constants';
 import groupBoardQuery from '~/boards/graphql/group_board.query.graphql';
 import projectBoardQuery from '~/boards/graphql/project_board.query.graphql';
+import groupBoardsQuery from '~/boards/graphql/group_boards.query.graphql';
+import projectBoardsQuery from '~/boards/graphql/project_boards.query.graphql';
+import groupRecentBoardsQuery from '~/boards/graphql/group_recent_boards.query.graphql';
+import projectRecentBoardsQuery from '~/boards/graphql/project_recent_boards.query.graphql';
 import defaultStore from '~/boards/stores';
-import axios from '~/lib/utils/axios_utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { mockGroupBoardResponse, mockProjectBoardResponse } from '../mock_data';
+import {
+  mockGroupBoardResponse,
+  mockProjectBoardResponse,
+  mockGroupAllBoardsResponse,
+  mockProjectAllBoardsResponse,
+  mockGroupRecentBoardsResponse,
+  mockProjectRecentBoardsResponse,
+  mockSmallProjectAllBoardsResponse,
+  mockEmptyProjectRecentBoardsResponse,
+  boards,
+  recentIssueBoards,
+} from '../mock_data';
 
 const throttleDuration = 1;
 
 Vue.use(VueApollo);
 
-function boardGenerator(n) {
-  return new Array(n).fill().map((board, index) => {
-    const id = `${index}`;
-    const name = `board${id}`;
-
-    return {
-      id,
-      name,
-    };
-  });
-}
-
 describe('BoardsSelector', () => {
   let wrapper;
-  let allBoardsResponse;
-  let recentBoardsResponse;
-  let mock;
   let fakeApollo;
   let store;
-  const boards = boardGenerator(20);
-  const recentBoards = boardGenerator(5);
 
   const createStore = ({ isGroupBoard = false, isProjectBoard = false } = {}) => {
     store = new Vuex.Store({
@@ -63,17 +60,43 @@ describe('BoardsSelector', () => {
   };
 
   const getDropdownItems = () => wrapper.findAll('.js-dropdown-item');
-  const getDropdownHeaders = () => wrapper.findAll(GlDropdownSectionHeader);
-  const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findDropdown = () => wrapper.find(GlDropdown);
+  const getDropdownHeaders = () => wrapper.findAllComponents(GlDropdownSectionHeader);
+  const getLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
 
   const projectBoardQueryHandlerSuccess = jest.fn().mockResolvedValue(mockProjectBoardResponse);
   const groupBoardQueryHandlerSuccess = jest.fn().mockResolvedValue(mockGroupBoardResponse);
 
-  const createComponent = () => {
+  const projectBoardsQueryHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(mockProjectAllBoardsResponse);
+  const groupBoardsQueryHandlerSuccess = jest.fn().mockResolvedValue(mockGroupAllBoardsResponse);
+
+  const projectRecentBoardsQueryHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(mockProjectRecentBoardsResponse);
+  const groupRecentBoardsQueryHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(mockGroupRecentBoardsResponse);
+
+  const smallBoardsQueryHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(mockSmallProjectAllBoardsResponse);
+  const emptyRecentBoardsQueryHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(mockEmptyProjectRecentBoardsResponse);
+
+  const createComponent = ({
+    projectBoardsQueryHandler = projectBoardsQueryHandlerSuccess,
+    projectRecentBoardsQueryHandler = projectRecentBoardsQueryHandlerSuccess,
+  } = {}) => {
     fakeApollo = createMockApollo([
       [projectBoardQuery, projectBoardQueryHandlerSuccess],
       [groupBoardQuery, groupBoardQueryHandlerSuccess],
+      [projectBoardsQuery, projectBoardsQueryHandler],
+      [groupBoardsQuery, groupBoardsQueryHandlerSuccess],
+      [projectRecentBoardsQuery, projectRecentBoardsQueryHandler],
+      [groupRecentBoardsQuery, groupRecentBoardsQueryHandlerSuccess],
     ]);
 
     wrapper = mount(BoardsSelector, {
@@ -91,67 +114,34 @@ describe('BoardsSelector', () => {
       attachTo: document.body,
       provide: {
         fullPath: '',
-        recentBoardsEndpoint: `${TEST_HOST}/recent`,
       },
     });
-
-    wrapper.vm.$apollo.addSmartQuery = jest.fn((_, options) => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        [options.loadingKey]: true,
-      });
-    });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
-    mock.restore();
+    fakeApollo = null;
   });
 
-  describe('fetching all boards', () => {
+  describe('template', () => {
     beforeEach(() => {
-      mock = new MockAdapter(axios);
-
-      allBoardsResponse = Promise.resolve({
-        data: {
-          group: {
-            boards: {
-              edges: boards.map((board) => ({ node: board })),
-            },
-          },
-        },
-      });
-      recentBoardsResponse = Promise.resolve({
-        data: recentBoards,
-      });
-
-      createStore();
+      createStore({ isProjectBoard: true });
       createComponent();
-
-      mock.onGet(`${TEST_HOST}/recent`).replyOnce(200, recentBoards);
     });
 
     describe('loading', () => {
-      beforeEach(async () => {
-        // Wait for current board to be loaded
-        await nextTick();
-
-        // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-        findDropdown().vm.$emit('show');
-      });
-
       // we are testing loading state, so don't resolve responses until after the tests
       afterEach(async () => {
-        await Promise.all([allBoardsResponse, recentBoardsResponse]);
         await nextTick();
       });
 
       it('shows loading spinner', () => {
+        // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
+        findDropdown().vm.$emit('show');
+
+        expect(getLoadingIcon().exists()).toBe(true);
         expect(getDropdownHeaders()).toHaveLength(0);
         expect(getDropdownItems()).toHaveLength(0);
-        expect(getLoadingIcon().exists()).toBe(true);
       });
     });
 
@@ -163,16 +153,13 @@ describe('BoardsSelector', () => {
         // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
         findDropdown().vm.$emit('show');
 
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        await wrapper.setData({
-          loadingBoards: false,
-          loadingRecentBoards: false,
-        });
-        await Promise.all([allBoardsResponse, recentBoardsResponse]);
         await nextTick();
       });
 
+      it('fetches all issue boards', () => {
+        expect(projectBoardsQueryHandlerSuccess).toHaveBeenCalled();
+      });
+
       it('hides loading spinner', async () => {
         await nextTick();
         expect(getLoadingIcon().exists()).toBe(false);
@@ -180,22 +167,17 @@ describe('BoardsSelector', () => {
 
       describe('filtering', () => {
         beforeEach(async () => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            boards,
-          });
-
           await nextTick();
         });
 
         it('shows all boards without filtering', () => {
-          expect(getDropdownItems()).toHaveLength(boards.length + recentBoards.length);
+          expect(getDropdownItems()).toHaveLength(boards.length + recentIssueBoards.length);
         });
 
         it('shows only matching boards when filtering', async () => {
           const filterTerm = 'board1';
-          const expectedCount = boards.filter((board) => board.name.includes(filterTerm)).length;
+          const expectedCount = boards.filter((board) => board.node.name.includes(filterTerm))
+            .length;
 
           fillSearchBox(filterTerm);
 
@@ -214,32 +196,21 @@ describe('BoardsSelector', () => {
 
       describe('recent boards section', () => {
         it('shows only when boards are greater than 10', async () => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            boards,
-          });
-
           await nextTick();
+          expect(projectRecentBoardsQueryHandlerSuccess).toHaveBeenCalled();
           expect(getDropdownHeaders()).toHaveLength(2);
         });
 
         it('does not show when boards are less than 10', async () => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            boards: boards.slice(0, 5),
-          });
+          createComponent({ projectBoardsQueryHandler: smallBoardsQueryHandlerSuccess });
 
           await nextTick();
           expect(getDropdownHeaders()).toHaveLength(0);
         });
 
-        it('does not show when recentBoards api returns empty array', async () => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            recentBoards: [],
+        it('does not show when recentIssueBoards api returns empty array', async () => {
+          createComponent({
+            projectRecentBoardsQueryHandler: emptyRecentBoardsQueryHandlerSuccess,
           });
 
           await nextTick();
@@ -256,15 +227,39 @@ describe('BoardsSelector', () => {
     });
   });
 
+  describe('fetching all boards', () => {
+    it.each`
+      boardType            | queryHandler                        | notCalledHandler
+      ${BoardType.group}   | ${groupBoardsQueryHandlerSuccess}   | ${projectBoardsQueryHandlerSuccess}
+      ${BoardType.project} | ${projectBoardsQueryHandlerSuccess} | ${groupBoardsQueryHandlerSuccess}
+    `('fetches $boardType boards', async ({ boardType, queryHandler, notCalledHandler }) => {
+      createStore({
+        isProjectBoard: boardType === BoardType.project,
+        isGroupBoard: boardType === BoardType.group,
+      });
+      createComponent();
+
+      await nextTick();
+
+      // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
+      findDropdown().vm.$emit('show');
+
+      await nextTick();
+
+      expect(queryHandler).toHaveBeenCalled();
+      expect(notCalledHandler).not.toHaveBeenCalled();
+    });
+  });
+
   describe('fetching current board', () => {
     it.each`
-      boardType    | queryHandler                       | notCalledHandler
-      ${'group'}   | ${groupBoardQueryHandlerSuccess}   | ${projectBoardQueryHandlerSuccess}
-      ${'project'} | ${projectBoardQueryHandlerSuccess} | ${groupBoardQueryHandlerSuccess}
+      boardType            | queryHandler                       | notCalledHandler
+      ${BoardType.group}   | ${groupBoardQueryHandlerSuccess}   | ${projectBoardQueryHandlerSuccess}
+      ${BoardType.project} | ${projectBoardQueryHandlerSuccess} | ${groupBoardQueryHandlerSuccess}
     `('fetches $boardType board', async ({ boardType, queryHandler, notCalledHandler }) => {
       createStore({
-        isProjectBoard: boardType === 'project',
-        isGroupBoard: boardType === 'group',
+        isProjectBoard: boardType === BoardType.project,
+        isGroupBoard: boardType === BoardType.group,
       });
       createComponent();