diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 09:09:51 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-18 09:09:51 +0300 |
commit | ad3b511ba360c7fc09fe519396c6d15f09845d66 (patch) | |
tree | 349d48c43bd9c48fd1bc93028c21c0ac715e752d /spec/frontend | |
parent | f3f9b9fe66f234528706fbe0e70a0e529b5d8d08 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
4 files changed, 132 insertions, 3 deletions
diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js index 985902b4a3b..7be2d57220b 100644 --- a/spec/frontend/boards/board_card_inner_spec.js +++ b/spec/frontend/boards/board_card_inner_spec.js @@ -7,6 +7,7 @@ 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 BoardCardMoveToPosition from '~/boards/components/board_card_move_to_position.vue'; import { issuableTypes } from '~/boards/constants'; import eventHub from '~/boards/eventhub'; import defaultStore from '~/boards/stores'; @@ -47,6 +48,7 @@ describe('Board card component', () => { const findEpicCountablesTotalWeight = () => wrapper.findByTestId('epic-countables-total-weight'); const findEpicProgressTooltip = () => wrapper.findByTestId('epic-progress-tooltip-content'); const findHiddenIssueIcon = () => wrapper.findByTestId('hidden-icon'); + const findMoveToPositionComponent = () => wrapper.findComponent(BoardCardMoveToPosition); const performSearchMock = jest.fn(); @@ -75,10 +77,12 @@ describe('Board card component', () => { propsData: { list, item: issue, + index: 0, ...props, }, stubs: { GlLoadingIcon: true, + BoardCardMoveToPosition: true, }, directives: { GlTooltip: createMockDirective(), @@ -137,6 +141,10 @@ describe('Board card component', () => { expect(findHiddenIssueIcon().exists()).toBe(false); }); + it('renders the move to position icon', () => { + expect(findMoveToPositionComponent().exists()).toBe(true); + }); + it('renders issue ID with #', () => { expect(wrapper.find('.board-card-number').text()).toContain(`#${issue.iid}`); }); diff --git a/spec/frontend/boards/board_list_helper.js b/spec/frontend/boards/board_list_helper.js index 04192489817..65a41c49e7f 100644 --- a/spec/frontend/boards/board_list_helper.js +++ b/spec/frontend/boards/board_list_helper.js @@ -75,6 +75,7 @@ export default function createComponent({ id: 1, iid: 1, confidential: false, + referencePath: 'gitlab-org/test-subgroup/gitlab-test#1', labels: [], assignees: [], ...listIssueProps, diff --git a/spec/frontend/boards/components/board_card_move_to_position_spec.js b/spec/frontend/boards/components/board_card_move_to_position_spec.js new file mode 100644 index 00000000000..f6c66baa6aa --- /dev/null +++ b/spec/frontend/boards/components/board_card_move_to_position_spec.js @@ -0,0 +1,117 @@ +import Vue, { nextTick } from 'vue'; +import Vuex from 'vuex'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; + +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import BoardCardMoveToPosition from '~/boards/components/board_card_move_to_position.vue'; +import { createStore } from '~/boards/stores'; +import { mockList, mockIssue2 } from 'jest/boards/mock_data'; +import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; + +Vue.use(Vuex); + +const dropdownOptions = [ + BoardCardMoveToPosition.i18n.moveToStartText, + BoardCardMoveToPosition.i18n.moveToEndText, +]; + +describe('Board Card Move to position', () => { + let wrapper; + let trackingSpy; + let store; + let dispatch; + + store = new Vuex.Store(); + + const createComponent = (propsData) => { + wrapper = shallowMountExtended(BoardCardMoveToPosition, { + store, + propsData: { + item: mockIssue2, + list: mockList, + index: 0, + ...propsData, + }, + stubs: { + GlDropdown, + GlDropdownItem, + }, + }); + }; + + beforeEach(() => { + store = createStore(); + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + const findEllipsesButton = () => wrapper.findByTestId('move-card-dropdown'); + const findMoveToPositionDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownItems = () => findMoveToPositionDropdown().findAllComponents(GlDropdownItem); + const findDropdownItemAtIndex = (index) => findDropdownItems().at(index); + + describe('Dropdown', () => { + describe('Dropdown button', () => { + it('has an icon with vertical ellipsis', () => { + expect(findEllipsesButton().exists()).toBe(true); + expect(findMoveToPositionDropdown().props('icon')).toBe('ellipsis_v'); + }); + + it('is opened on the click of vertical ellipsis and has 2 dropdown items when number of list items < 10', () => { + findMoveToPositionDropdown().vm.$emit('click'); + + expect(findDropdownItems()).toHaveLength(dropdownOptions.length); + }); + }); + + describe('Dropdown options', () => { + beforeEach(() => { + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + dispatch = jest.spyOn(store, 'dispatch').mockImplementation(() => {}); + }); + + afterEach(() => { + unmockTracking(); + }); + + it.each` + dropdownIndex | dropdownLabel | startActionCalledTimes | trackLabel + ${0} | ${BoardCardMoveToPosition.i18n.moveToStartText} | ${0} | ${'move_to_start'} + ${1} | ${BoardCardMoveToPosition.i18n.moveToEndText} | ${1} | ${'move_to_end'} + `( + 'on click of dropdown index $dropdownIndex with label $dropdownLabel should call moveItem action with tracking label $trackLabel', + async ({ dropdownIndex, startActionCalledTimes, dropdownLabel, trackLabel }) => { + await findEllipsesButton().vm.$emit('click'); + + expect(findDropdownItemAtIndex(dropdownIndex).text()).toBe(dropdownLabel); + await findDropdownItemAtIndex(dropdownIndex).vm.$emit('click', { + stopPropagation: () => {}, + }); + + await nextTick(); + + expect(trackingSpy).toHaveBeenCalledWith('boards:list', 'click_toggle_button', { + category: 'boards:list', + label: trackLabel, + property: 'type_card', + }); + expect(dispatch).toHaveBeenCalledTimes(startActionCalledTimes); + if (startActionCalledTimes) { + expect(dispatch).toHaveBeenCalledWith('moveItem', { + fromListId: mockList.id, + itemId: mockIssue2.id, + itemIid: mockIssue2.iid, + itemPath: mockIssue2.referencePath, + moveBeforeId: undefined, + moveAfterId: undefined, + toListId: mockList.id, + }); + } + }, + ); + }); + }); +}); diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js index bb1e63a581e..2feaa5dff8c 100644 --- a/spec/frontend/boards/components/board_card_spec.js +++ b/spec/frontend/boards/components/board_card_spec.js @@ -1,5 +1,5 @@ import { GlLabel } from '@gitlab/ui'; -import { shallowMount, mount } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; @@ -45,7 +45,10 @@ describe('Board card', () => { item = mockIssue, } = {}) => { wrapper = mountFn(BoardCard, { - stubs, + stubs: { + ...stubs, + BoardCardInner, + }, store, propsData: { list: mockLabelList, @@ -86,7 +89,7 @@ describe('Board card', () => { describe('when GlLabel is clicked in BoardCardInner', () => { it('doesnt call toggleBoardItem', () => { createStore({ initialState: { isShowingLabels: true } }); - mountComponent({ mountFn: mount, stubs: {} }); + mountComponent(); wrapper.findComponent(GlLabel).trigger('mouseup'); |