diff options
Diffstat (limited to 'spec/frontend/boards')
| -rw-r--r-- | spec/frontend/boards/board_card_inner_spec.js | 88 | ||||
| -rw-r--r-- | spec/frontend/boards/components/board_list_header_spec.js | 4 | ||||
| -rw-r--r-- | spec/frontend/boards/mock_data.js | 5 | ||||
| -rw-r--r-- | spec/frontend/boards/project_select_spec.js | 21 | ||||
| -rw-r--r-- | spec/frontend/boards/stores/getters_spec.js | 29 |
5 files changed, 125 insertions, 22 deletions
diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js index 677978d31ca..c6de3ee69f3 100644 --- a/spec/frontend/boards/board_card_inner_spec.js +++ b/spec/frontend/boards/board_card_inner_spec.js @@ -2,12 +2,15 @@ import { GlLabel, GlLoadingIcon, GlTooltip } from '@gitlab/ui'; import { range } from 'lodash'; import Vuex from 'vuex'; import { nextTick } from 'vue'; +import setWindowLocation from 'helpers/set_window_location_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue'; import BoardCardInner from '~/boards/components/board_card_inner.vue'; import { issuableTypes } from '~/boards/constants'; +import eventHub from '~/boards/eventhub'; import defaultStore from '~/boards/stores'; +import { updateHistory } from '~/lib/utils/url_utility'; import { mockLabelList, mockIssue, mockIssueFullPath } from './mock_data'; jest.mock('~/lib/utils/url_utility'); @@ -34,7 +37,7 @@ describe('Board card component', () => { let list; let store; - const findBoardBlockedIcon = () => wrapper.find(BoardBlockedIcon); + const findBoardBlockedIcon = () => wrapper.findComponent(BoardBlockedIcon); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findEpicCountablesTotalTooltip = () => wrapper.findComponent(GlTooltip); const findEpicCountables = () => wrapper.findByTestId('epic-countables'); @@ -45,9 +48,14 @@ describe('Board card component', () => { const findEpicProgressTooltip = () => wrapper.findByTestId('epic-progress-tooltip-content'); const findHiddenIssueIcon = () => wrapper.findByTestId('hidden-icon'); + const performSearchMock = jest.fn(); + const createStore = ({ isEpicBoard = false, isProjectBoard = false } = {}) => { store = new Vuex.Store({ ...defaultStore, + actions: { + performSearch: performSearchMock, + }, state: { ...defaultStore.state, issuableType: issuableTypes.issue, @@ -70,7 +78,6 @@ describe('Board card component', () => { ...props, }, stubs: { - GlLabel: true, GlLoadingIcon: true, }, directives: { @@ -179,7 +186,7 @@ describe('Board card component', () => { describe('confidential issue', () => { beforeEach(() => { - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), confidential: true, @@ -194,7 +201,7 @@ describe('Board card component', () => { describe('hidden issue', () => { beforeEach(() => { - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), hidden: true, @@ -219,7 +226,7 @@ describe('Board card component', () => { describe('with assignee', () => { describe('with avatar', () => { beforeEach(() => { - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), assignees: [user], @@ -272,7 +279,7 @@ describe('Board card component', () => { beforeEach(() => { global.gon.default_avatar_url = 'default_avatar'; - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), assignees: [ @@ -301,7 +308,7 @@ describe('Board card component', () => { describe('multiple assignees', () => { beforeEach(() => { - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), assignees: [ @@ -342,7 +349,7 @@ describe('Board card component', () => { avatarUrl: 'test_image', }); - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), assignees, @@ -368,7 +375,7 @@ describe('Board card component', () => { avatarUrl: 'test_image', })), ]; - wrapper.setProps({ + createWrapper({ item: { ...wrapper.props('item'), assignees, @@ -384,31 +391,74 @@ describe('Board card component', () => { describe('labels', () => { beforeEach(() => { - wrapper.setProps({ item: { ...issue, labels: [list.label, label1] } }); + createWrapper({ item: { ...issue, labels: [list.label, label1] } }); }); it('does not render list label but renders all other labels', () => { - expect(wrapper.findAll(GlLabel).length).toBe(1); - const label = wrapper.find(GlLabel); + expect(wrapper.findAllComponents(GlLabel).length).toBe(1); + const label = wrapper.findComponent(GlLabel); expect(label.props('title')).toEqual(label1.title); expect(label.props('description')).toEqual(label1.description); expect(label.props('backgroundColor')).toEqual(label1.color); }); it('does not render label if label does not have an ID', async () => { - wrapper.setProps({ item: { ...issue, labels: [label1, { title: 'closed' }] } }); + createWrapper({ item: { ...issue, labels: [label1, { title: 'closed' }] } }); await nextTick(); - expect(wrapper.findAll(GlLabel).length).toBe(1); + expect(wrapper.findAllComponents(GlLabel).length).toBe(1); expect(wrapper.text()).not.toContain('closed'); }); + }); - describe('when label params arent set', () => { - it('passes the right target to GlLabel', () => { - expect(wrapper.findAll(GlLabel).at(0).props('target')).toEqual( - '?label_name[]=testing%20123', - ); + describe('filterByLabel method', () => { + beforeEach(() => { + createWrapper({ + item: { + ...issue, + labels: [label1], + }, + updateFilters: true, + }); + }); + + describe('when selected label is not in the filter', () => { + beforeEach(() => { + setWindowLocation('?'); + wrapper.findComponent(GlLabel).vm.$emit('click', label1); + }); + + it('calls updateHistory', () => { + expect(updateHistory).toHaveBeenCalledTimes(1); + }); + + it('dispatches performSearch vuex action', () => { + expect(performSearchMock).toHaveBeenCalledTimes(1); + }); + + it('emits updateTokens event', () => { + expect(eventHub.$emit).toHaveBeenCalledTimes(1); + expect(eventHub.$emit).toHaveBeenCalledWith('updateTokens'); + }); + }); + + describe('when selected label is already in the filter', () => { + beforeEach(() => { + setWindowLocation('?label_name[]=testing%20123'); + wrapper.findComponent(GlLabel).vm.$emit('click', label1); + }); + + it('does not call updateHistory', () => { + expect(updateHistory).not.toHaveBeenCalled(); + }); + + it('does not dispatch performSearch vuex action', () => { + expect(performSearchMock).not.toHaveBeenCalled(); + }); + + it('does not emit updateTokens event', () => { + expect(eventHub.$emit).not.toHaveBeenCalled(); }); }); }); diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js index 14870ec76a2..2f9677680eb 100644 --- a/spec/frontend/boards/components/board_list_header_spec.js +++ b/spec/frontend/boards/components/board_list_header_spec.js @@ -132,7 +132,7 @@ describe('Board List Header Component', () => { const icon = findCaret(); - expect(icon.props('icon')).toBe('chevron-right'); + expect(icon.props('icon')).toBe('chevron-down'); }); it('should display expand icon when column is collapsed', async () => { @@ -140,7 +140,7 @@ describe('Board List Header Component', () => { const icon = findCaret(); - expect(icon.props('icon')).toBe('chevron-down'); + expect(icon.props('icon')).toBe('chevron-right'); }); it('should dispatch toggleListCollapse when clicking the collapse icon', async () => { diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js index ec9342cffc2..26ad9790840 100644 --- a/spec/frontend/boards/mock_data.js +++ b/spec/frontend/boards/mock_data.js @@ -17,6 +17,10 @@ export const mockBoard = { id: 'gid://gitlab/Iteration/124', title: 'Iteration 9', }, + iterationCadence: { + id: 'gid://gitlab/Iteration::Cadence/134', + title: 'Cadence 3', + }, assignee: { id: 'gid://gitlab/User/1', username: 'admin', @@ -32,6 +36,7 @@ export const mockBoardConfig = { milestoneTitle: '14.9', iterationId: 'gid://gitlab/Iteration/124', iterationTitle: 'Iteration 9', + iterationCadenceId: 'gid://gitlab/Iteration::Cadence/134', assigneeId: 'gid://gitlab/User/1', assigneeUsername: 'admin', labels: [{ id: 'gid://gitlab/Label/32', title: 'Deliverable' }], diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js index 05dc7d28eaa..bd79060c54f 100644 --- a/spec/frontend/boards/project_select_spec.js +++ b/spec/frontend/boards/project_select_spec.js @@ -1,7 +1,14 @@ -import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui'; +import { + GlDropdown, + GlDropdownItem, + GlSearchBoxByType, + GlLoadingIcon, + GlFormInput, +} from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; +import waitForPromises from 'helpers/wait_for_promises'; import ProjectSelect from '~/boards/components/project_select.vue'; import defaultState from '~/boards/stores/state'; @@ -61,6 +68,7 @@ describe('ProjectSelect component', () => { provide: { groupId: 1, }, + attachTo: document.body, }); }; @@ -120,6 +128,17 @@ describe('ProjectSelect component', () => { it('does not render empty search result message', () => { expect(findEmptySearchMessage().exists()).toBe(false); }); + + it('focuses on the search input', async () => { + const dropdownToggle = findGlDropdown().find('.dropdown-toggle'); + + await dropdownToggle.trigger('click'); + await waitForPromises(); + await nextTick(); + + const searchInput = findGlDropdown().findComponent(GlFormInput).element; + expect(document.activeElement).toEqual(searchInput); + }); }); describe('when no projects are being returned', () => { diff --git a/spec/frontend/boards/stores/getters_spec.js b/spec/frontend/boards/stores/getters_spec.js index b30968c45d7..304f2aad98e 100644 --- a/spec/frontend/boards/stores/getters_spec.js +++ b/spec/frontend/boards/stores/getters_spec.js @@ -215,4 +215,33 @@ describe('Boards - Getters', () => { expect(getters.isEpicBoard()).toBe(false); }); }); + + describe('hasScope', () => { + const boardConfig = { + labels: [], + assigneeId: null, + iterationCadenceId: null, + iterationId: null, + milestoneId: null, + weight: null, + }; + + it('returns false when boardConfig is empty', () => { + const state = { boardConfig }; + + expect(getters.hasScope(state)).toBe(false); + }); + + it('returns true when boardScope has a label', () => { + const state = { boardConfig: { ...boardConfig, labels: ['foo'] } }; + + expect(getters.hasScope(state)).toBe(true); + }); + + it('returns true when boardConfig has a value other than null', () => { + const state = { boardConfig: { ...boardConfig, assigneeId: 3 } }; + + expect(getters.hasScope(state)).toBe(true); + }); + }); }); |