diff options
Diffstat (limited to 'spec/frontend/boards/components/boards_selector_spec.js')
| -rw-r--r-- | spec/frontend/boards/components/boards_selector_spec.js | 251 |
1 files changed, 151 insertions, 100 deletions
diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js index bf317b51e83..c841c17a029 100644 --- a/spec/frontend/boards/components/boards_selector_spec.js +++ b/spec/frontend/boards/components/boards_selector_spec.js @@ -1,13 +1,22 @@ import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; -import { nextTick } from 'vue'; +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 groupBoardQuery from '~/boards/graphql/group_board.query.graphql'; +import projectBoardQuery from '~/boards/graphql/project_board.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'; const throttleDuration = 1; +Vue.use(VueApollo); + function boardGenerator(n) { return new Array(n).fill().map((board, index) => { const id = `${index}`; @@ -25,9 +34,27 @@ describe('BoardsSelector', () => { 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({ + ...defaultStore, + actions: { + setError: jest.fn(), + }, + getters: { + isGroupBoard: () => isGroupBoard, + isProjectBoard: () => isProjectBoard, + }, + state: { + boardType: isGroupBoard ? 'group' : 'project', + }, + }); + }; + const fillSearchBox = (filterTerm) => { const searchBox = wrapper.find({ ref: 'searchBox' }); const searchBoxInput = searchBox.find('input'); @@ -40,52 +67,27 @@ describe('BoardsSelector', () => { const getLoadingIcon = () => wrapper.find(GlLoadingIcon); const findDropdown = () => wrapper.find(GlDropdown); - beforeEach(() => { - mock = new MockAdapter(axios); - const $apollo = { - queries: { - boards: { - loading: false, - }, - }, - }; + const projectBoardQueryHandlerSuccess = jest.fn().mockResolvedValue(mockProjectBoardResponse); + const groupBoardQueryHandlerSuccess = jest.fn().mockResolvedValue(mockGroupBoardResponse); - allBoardsResponse = Promise.resolve({ - data: { - group: { - boards: { - edges: boards.map((board) => ({ node: board })), - }, - }, - }, - }); - recentBoardsResponse = Promise.resolve({ - data: recentBoards, - }); + const createComponent = () => { + fakeApollo = createMockApollo([ + [projectBoardQuery, projectBoardQueryHandlerSuccess], + [groupBoardQuery, groupBoardQueryHandlerSuccess], + ]); wrapper = mount(BoardsSelector, { + store, + apolloProvider: fakeApollo, propsData: { throttleDuration, - currentBoard: { - id: 1, - name: 'Development', - milestone_id: null, - weight: null, - assignee_id: null, - labels: [], - }, boardBaseUrl: `${TEST_HOST}/board/base/url`, hasMissingBoards: false, canAdminBoard: true, multipleIssueBoardsAvailable: true, - labelsPath: `${TEST_HOST}/labels/path`, - labelsWebUrl: `${TEST_HOST}/labels`, - projectId: 42, - groupId: 19, scopedIssueBoardFeatureEnabled: true, weights: [], }, - mocks: { $apollo }, attachTo: document.body, provide: { fullPath: '', @@ -98,12 +100,7 @@ describe('BoardsSelector', () => { [options.loadingKey]: true, }); }); - - mock.onGet(`${TEST_HOST}/recent`).replyOnce(200, recentBoards); - - // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time - findDropdown().vm.$emit('show'); - }); + }; afterEach(() => { wrapper.destroy(); @@ -111,104 +108,158 @@ describe('BoardsSelector', () => { mock.restore(); }); - describe('loading', () => { - // we are testing loading state, so don't resolve responses until after the tests - afterEach(() => { - return Promise.all([allBoardsResponse, recentBoardsResponse]).then(() => nextTick()); - }); + describe('fetching all boards', () => { + beforeEach(() => { + mock = new MockAdapter(axios); - it('shows loading spinner', () => { - expect(getDropdownHeaders()).toHaveLength(0); - expect(getDropdownItems()).toHaveLength(0); - expect(getLoadingIcon().exists()).toBe(true); + allBoardsResponse = Promise.resolve({ + data: { + group: { + boards: { + edges: boards.map((board) => ({ node: board })), + }, + }, + }, + }); + recentBoardsResponse = Promise.resolve({ + data: recentBoards, + }); + + createStore(); + createComponent(); + + mock.onGet(`${TEST_HOST}/recent`).replyOnce(200, recentBoards); }); - }); - describe('loaded', () => { - beforeEach(async () => { - await wrapper.setData({ - loadingBoards: false, + 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(); }); - return Promise.all([allBoardsResponse, recentBoardsResponse]).then(() => nextTick()); - }); - it('hides loading spinner', async () => { - await wrapper.vm.$nextTick(); - expect(getLoadingIcon().exists()).toBe(false); + it('shows loading spinner', () => { + expect(getDropdownHeaders()).toHaveLength(0); + expect(getDropdownItems()).toHaveLength(0); + expect(getLoadingIcon().exists()).toBe(true); + }); }); - describe('filtering', () => { - beforeEach(() => { - wrapper.setData({ - boards, - }); + describe('loaded', () => { + 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'); - return nextTick(); + await wrapper.setData({ + loadingBoards: false, + loadingRecentBoards: false, + }); + await Promise.all([allBoardsResponse, recentBoardsResponse]); + await nextTick(); }); - it('shows all boards without filtering', () => { - expect(getDropdownItems()).toHaveLength(boards.length + recentBoards.length); + it('hides loading spinner', async () => { + await nextTick(); + expect(getLoadingIcon().exists()).toBe(false); }); - it('shows only matching boards when filtering', () => { - const filterTerm = 'board1'; - const expectedCount = boards.filter((board) => board.name.includes(filterTerm)).length; + describe('filtering', () => { + beforeEach(async () => { + wrapper.setData({ + boards, + }); + + await nextTick(); + }); - fillSearchBox(filterTerm); + it('shows all boards without filtering', () => { + expect(getDropdownItems()).toHaveLength(boards.length + recentBoards.length); + }); - return nextTick().then(() => { + it('shows only matching boards when filtering', async () => { + const filterTerm = 'board1'; + const expectedCount = boards.filter((board) => board.name.includes(filterTerm)).length; + + fillSearchBox(filterTerm); + + await nextTick(); expect(getDropdownItems()).toHaveLength(expectedCount); }); - }); - it('shows message if there are no matching boards', () => { - fillSearchBox('does not exist'); + it('shows message if there are no matching boards', async () => { + fillSearchBox('does not exist'); - return nextTick().then(() => { + await nextTick(); expect(getDropdownItems()).toHaveLength(0); expect(wrapper.text().includes('No matching boards found')).toBe(true); }); }); - }); - describe('recent boards section', () => { - it('shows only when boards are greater than 10', () => { - wrapper.setData({ - boards, - }); + describe('recent boards section', () => { + it('shows only when boards are greater than 10', async () => { + wrapper.setData({ + boards, + }); - return nextTick().then(() => { + await nextTick(); expect(getDropdownHeaders()).toHaveLength(2); }); - }); - it('does not show when boards are less than 10', () => { - wrapper.setData({ - boards: boards.slice(0, 5), - }); + it('does not show when boards are less than 10', async () => { + wrapper.setData({ + boards: boards.slice(0, 5), + }); - return nextTick().then(() => { + await nextTick(); expect(getDropdownHeaders()).toHaveLength(0); }); - }); - it('does not show when recentBoards api returns empty array', () => { - wrapper.setData({ - recentBoards: [], - }); + it('does not show when recentBoards api returns empty array', async () => { + wrapper.setData({ + recentBoards: [], + }); - return nextTick().then(() => { + await nextTick(); expect(getDropdownHeaders()).toHaveLength(0); }); - }); - it('does not show when search is active', () => { - fillSearchBox('Random string'); + it('does not show when search is active', async () => { + fillSearchBox('Random string'); - return nextTick().then(() => { + await nextTick(); expect(getDropdownHeaders()).toHaveLength(0); }); }); }); }); + + describe('fetching current board', () => { + it.each` + boardType | queryHandler | notCalledHandler + ${'group'} | ${groupBoardQueryHandlerSuccess} | ${projectBoardQueryHandlerSuccess} + ${'project'} | ${projectBoardQueryHandlerSuccess} | ${groupBoardQueryHandlerSuccess} + `('fetches $boardType board', async ({ boardType, queryHandler, notCalledHandler }) => { + createStore({ + isProjectBoard: boardType === 'project', + isGroupBoard: boardType === 'group', + }); + createComponent(); + + await nextTick(); + + expect(queryHandler).toHaveBeenCalled(); + expect(notCalledHandler).not.toHaveBeenCalled(); + }); + }); }); |