diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-09 12:11:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-09 12:11:03 +0300 |
commit | 3d233a67cf4ab39773e3ee10a09df9eb7c3b4167 (patch) | |
tree | 66a33a656fb9d69c5e11e56cc5c7d20f2f5d064d /spec/frontend/boards/components | |
parent | 130e0444c6e5498ea95d38dd96bf758a724e2345 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/boards/components')
3 files changed, 14 insertions, 337 deletions
diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js index 0abb00e0fa5..ec6f7e06e61 100644 --- a/spec/frontend/boards/components/board_list_header_spec.js +++ b/spec/frontend/boards/components/board_list_header_spec.js @@ -1,18 +1,22 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; import Vuex from 'vuex'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; -import { mockLabelList } from 'jest/boards/mock_data'; +import { boardListQueryResponse, mockLabelList } from 'jest/boards/mock_data'; import BoardListHeader from '~/boards/components/board_list_header.vue'; import { ListType } from '~/boards/constants'; +import listQuery from '~/boards/graphql/board_lists_deferred.query.graphql'; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(VueApollo); +Vue.use(Vuex); describe('Board List Header Component', () => { let wrapper; let store; + let fakeApollo; const updateListSpy = jest.fn(); const toggleListCollapsedSpy = jest.fn(); @@ -20,6 +24,7 @@ describe('Board List Header Component', () => { afterEach(() => { wrapper.destroy(); wrapper = null; + fakeApollo = null; localStorage.clear(); }); @@ -29,6 +34,7 @@ describe('Board List Header Component', () => { collapsed = false, withLocalStorage = true, currentUserId = 1, + listQueryHandler = jest.fn().mockResolvedValue(boardListQueryResponse()), } = {}) => { const boardId = '1'; @@ -56,10 +62,12 @@ describe('Board List Header Component', () => { getters: { isEpicBoard: () => false }, }); + fakeApollo = createMockApollo([[listQuery, listQueryHandler]]); + wrapper = extendedWrapper( shallowMount(BoardListHeader, { + apolloProvider: fakeApollo, store, - localVue, propsData: { disabled: false, list: listMock, diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js deleted file mode 100644 index fb9d823107e..00000000000 --- a/spec/frontend/boards/components/sidebar/board_sidebar_labels_select_spec.js +++ /dev/null @@ -1,168 +0,0 @@ -import { GlLabel } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import { TEST_HOST } from 'helpers/test_constants'; -import { - labels as TEST_LABELS, - mockIssue as TEST_ISSUE, - mockIssueFullPath as TEST_ISSUE_FULLPATH, -} from 'jest/boards/mock_data'; -import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue'; -import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue'; -import { createStore } from '~/boards/stores'; -import { getIdFromGraphQLId } from '~/graphql_shared/utils'; - -const TEST_LABELS_PAYLOAD = TEST_LABELS.map((label) => ({ ...label, set: true })); -const TEST_LABELS_TITLES = TEST_LABELS.map((label) => label.title); - -describe('~/boards/components/sidebar/board_sidebar_labels_select.vue', () => { - let wrapper; - let store; - - afterEach(() => { - wrapper.destroy(); - store = null; - wrapper = null; - }); - - const createWrapper = ({ labels = [], providedValues = {} } = {}) => { - store = createStore(); - store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, labels } }; - store.state.activeId = TEST_ISSUE.id; - - wrapper = shallowMount(BoardSidebarLabelsSelect, { - store, - provide: { - canUpdate: true, - labelsManagePath: TEST_HOST, - labelsFilterBasePath: TEST_HOST, - ...providedValues, - }, - stubs: { - BoardEditableItem, - LabelsSelect: true, - }, - }); - }; - - const findLabelsSelect = () => wrapper.find({ ref: 'labelsSelect' }); - const findLabelsTitles = () => - wrapper.findAll(GlLabel).wrappers.map((item) => item.props('title')); - const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]'); - - describe('when labelsFetchPath is provided', () => { - it('uses injected labels fetch path', () => { - createWrapper({ providedValues: { labelsFetchPath: 'foobar' } }); - - expect(findLabelsSelect().props('labelsFetchPath')).toEqual('foobar'); - }); - }); - - it('uses the default project label endpoint', () => { - createWrapper(); - - expect(findLabelsSelect().props('labelsFetchPath')).toEqual( - `/${TEST_ISSUE_FULLPATH}/-/labels?include_ancestor_groups=true`, - ); - }); - - it('renders "None" when no labels are selected', () => { - createWrapper(); - - expect(findCollapsed().text()).toBe('None'); - }); - - it('renders labels when set', () => { - createWrapper({ labels: TEST_LABELS }); - - expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES); - }); - - describe('when labels are submitted', () => { - beforeEach(async () => { - createWrapper(); - - jest.spyOn(wrapper.vm, 'setActiveBoardItemLabels').mockImplementation(() => TEST_LABELS); - findLabelsSelect().vm.$emit('updateSelectedLabels', TEST_LABELS_PAYLOAD); - store.state.boardItems[TEST_ISSUE.id].labels = TEST_LABELS; - await wrapper.vm.$nextTick(); - }); - - it('collapses sidebar and renders labels', () => { - expect(findCollapsed().isVisible()).toBe(true); - expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES); - }); - - it('commits change to the server', () => { - expect(wrapper.vm.setActiveBoardItemLabels).toHaveBeenCalledWith({ - addLabelIds: TEST_LABELS.map((label) => label.id), - projectPath: TEST_ISSUE_FULLPATH, - removeLabelIds: [], - iid: null, - }); - }); - }); - - describe('when labels are updated over existing labels', () => { - const testLabelsPayload = [ - { id: 5, set: true }, - { id: 6, set: false }, - { id: 7, set: true }, - ]; - const expectedLabels = [{ id: 5 }, { id: 7 }]; - - beforeEach(async () => { - createWrapper({ labels: TEST_LABELS }); - - jest.spyOn(wrapper.vm, 'setActiveBoardItemLabels').mockImplementation(() => expectedLabels); - findLabelsSelect().vm.$emit('updateSelectedLabels', testLabelsPayload); - await wrapper.vm.$nextTick(); - }); - - it('commits change to the server', () => { - expect(wrapper.vm.setActiveBoardItemLabels).toHaveBeenCalledWith({ - addLabelIds: [5, 7], - removeLabelIds: [6], - projectPath: TEST_ISSUE_FULLPATH, - iid: null, - }); - }); - }); - - describe('when removing individual labels', () => { - const testLabel = TEST_LABELS[0]; - - beforeEach(async () => { - createWrapper({ labels: [testLabel] }); - - jest.spyOn(wrapper.vm, 'setActiveBoardItemLabels').mockImplementation(() => {}); - }); - - it('commits change to the server', () => { - wrapper.find(GlLabel).vm.$emit('close', testLabel); - - expect(wrapper.vm.setActiveBoardItemLabels).toHaveBeenCalledWith({ - removeLabelIds: [getIdFromGraphQLId(testLabel.id)], - projectPath: TEST_ISSUE_FULLPATH, - }); - }); - }); - - describe('when the mutation fails', () => { - beforeEach(async () => { - createWrapper({ labels: TEST_LABELS }); - - jest.spyOn(wrapper.vm, 'setActiveBoardItemLabels').mockImplementation(() => { - throw new Error(['failed mutation']); - }); - jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {}); - findLabelsSelect().vm.$emit('updateSelectedLabels', [{ id: '?' }]); - await wrapper.vm.$nextTick(); - }); - - it('collapses sidebar and renders former issue weight', () => { - expect(findCollapsed().isVisible()).toBe(true); - expect(findLabelsTitles()).toEqual(TEST_LABELS_TITLES); - expect(wrapper.vm.setError).toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js deleted file mode 100644 index 6e1b528babc..00000000000 --- a/spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js +++ /dev/null @@ -1,163 +0,0 @@ -import { GlToggle, GlLoadingIcon } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; -import Vue from 'vue'; -import Vuex from 'vuex'; -import BoardSidebarSubscription from '~/boards/components/sidebar/board_sidebar_subscription.vue'; -import { createStore } from '~/boards/stores'; -import * as types from '~/boards/stores/mutation_types'; -import { mockActiveIssue } from '../../mock_data'; - -Vue.use(Vuex); - -describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () => { - let wrapper; - let store; - - const findNotificationHeader = () => wrapper.find("[data-testid='notification-header-text']"); - const findToggle = () => wrapper.findComponent(GlToggle); - const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); - - const createComponent = (activeBoardItem = { ...mockActiveIssue }) => { - store = createStore(); - store.state.boardItems = { [activeBoardItem.id]: activeBoardItem }; - store.state.activeId = activeBoardItem.id; - - wrapper = mount(BoardSidebarSubscription, { - store, - provide: { - emailsDisabled: false, - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - store = null; - jest.clearAllMocks(); - }); - - describe('Board sidebar subscription component template', () => { - it('displays "notifications" heading', () => { - createComponent(); - - expect(findNotificationHeader().text()).toBe('Notifications'); - }); - - it('renders toggle with label', () => { - createComponent(); - - expect(findToggle().props('label')).toBe(BoardSidebarSubscription.i18n.header.title); - }); - - it('renders toggle as "off" when currently not subscribed', () => { - createComponent(); - - expect(findToggle().exists()).toBe(true); - expect(findToggle().props('value')).toBe(false); - }); - - it('renders toggle as "on" when currently subscribed', () => { - createComponent({ - ...mockActiveIssue, - subscribed: true, - }); - - expect(findToggle().exists()).toBe(true); - expect(findToggle().props('value')).toBe(true); - }); - - describe('when notification emails have been disabled', () => { - beforeEach(() => { - createComponent({ - ...mockActiveIssue, - emailsDisabled: true, - }); - }); - - it('displays a message that notification have been disabled', () => { - expect(findNotificationHeader().text()).toBe( - 'Notifications have been disabled by the project or group owner', - ); - }); - - it('does not render the toggle button', () => { - expect(findToggle().exists()).toBe(false); - }); - }); - }); - - describe('Board sidebar subscription component `behavior`', () => { - const mockSetActiveIssueSubscribed = (subscribedState) => { - jest.spyOn(wrapper.vm, 'setActiveItemSubscribed').mockImplementation(async () => { - store.commit(types.UPDATE_BOARD_ITEM_BY_ID, { - itemId: mockActiveIssue.id, - prop: 'subscribed', - value: subscribedState, - }); - }); - }; - - it('subscribing to notification', async () => { - createComponent(); - mockSetActiveIssueSubscribed(true); - - expect(findGlLoadingIcon().exists()).toBe(false); - - findToggle().vm.$emit('change'); - - await wrapper.vm.$nextTick(); - - expect(findGlLoadingIcon().exists()).toBe(true); - expect(wrapper.vm.setActiveItemSubscribed).toHaveBeenCalledWith({ - subscribed: true, - projectPath: 'gitlab-org/test-subgroup/gitlab-test', - }); - - await wrapper.vm.$nextTick(); - - expect(findGlLoadingIcon().exists()).toBe(false); - expect(findToggle().props('value')).toBe(true); - }); - - it('unsubscribing from notification', async () => { - createComponent({ - ...mockActiveIssue, - subscribed: true, - }); - mockSetActiveIssueSubscribed(false); - - expect(findGlLoadingIcon().exists()).toBe(false); - - findToggle().vm.$emit('change'); - - await wrapper.vm.$nextTick(); - - expect(wrapper.vm.setActiveItemSubscribed).toHaveBeenCalledWith({ - subscribed: false, - projectPath: 'gitlab-org/test-subgroup/gitlab-test', - }); - expect(findGlLoadingIcon().exists()).toBe(true); - - await wrapper.vm.$nextTick(); - - expect(findGlLoadingIcon().exists()).toBe(false); - expect(findToggle().props('value')).toBe(false); - }); - - it('flashes an error message when setting the subscribed state fails', async () => { - createComponent(); - jest.spyOn(wrapper.vm, 'setActiveItemSubscribed').mockImplementation(async () => { - throw new Error(); - }); - jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {}); - - findToggle().vm.$emit('change'); - - await wrapper.vm.$nextTick(); - expect(wrapper.vm.setError).toHaveBeenCalled(); - expect(wrapper.vm.setError.mock.calls[0][0].message).toBe( - wrapper.vm.$options.i18n.updateSubscribedErrorMessage, - ); - }); - }); -}); |