debian-mirror-gitlab/spec/frontend/boards/components/board_card_spec.js

184 lines
4.8 KiB
JavaScript
Raw Normal View History

2021-06-08 01:23:25 +05:30
import { GlLabel } from '@gitlab/ui';
2021-09-04 01:27:46 +05:30
import { shallowMount, mount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import Vue, { nextTick } from 'vue';
2021-04-17 20:07:23 +05:30
import Vuex from 'vuex';
2020-04-22 19:07:51 +05:30
2021-03-11 19:13:27 +05:30
import BoardCard from '~/boards/components/board_card.vue';
2021-04-17 20:07:23 +05:30
import BoardCardInner from '~/boards/components/board_card_inner.vue';
import { inactiveId } from '~/boards/constants';
import { mockLabelList, mockIssue } from '../mock_data';
2020-04-22 19:07:51 +05:30
2021-04-17 20:07:23 +05:30
describe('Board card', () => {
let wrapper;
let store;
let mockActions;
2021-09-04 01:27:46 +05:30
Vue.use(Vuex);
2021-04-17 20:07:23 +05:30
2021-06-08 01:23:25 +05:30
const createStore = ({ initialState = {} } = {}) => {
2021-04-17 20:07:23 +05:30
mockActions = {
toggleBoardItem: jest.fn(),
toggleBoardItemMultiSelection: jest.fn(),
2021-06-08 01:23:25 +05:30
performSearch: jest.fn(),
2021-04-17 20:07:23 +05:30
};
store = new Vuex.Store({
state: {
activeId: inactiveId,
selectedBoardItems: [],
...initialState,
},
actions: mockActions,
getters: {
isEpicBoard: () => false,
2021-10-27 15:23:28 +05:30
isProjectBoard: () => false,
2021-04-17 20:07:23 +05:30
},
});
};
2020-04-22 19:07:51 +05:30
// this particular mount component needs to be used after the root beforeEach because it depends on list being initialized
2021-06-08 01:23:25 +05:30
const mountComponent = ({
propsData = {},
provide = {},
mountFn = shallowMount,
stubs = { BoardCardInner },
2021-09-04 01:27:46 +05:30
item = mockIssue,
2021-06-08 01:23:25 +05:30
} = {}) => {
wrapper = mountFn(BoardCard, {
stubs,
2020-04-22 19:07:51 +05:30
store,
propsData: {
2021-04-17 20:07:23 +05:30
list: mockLabelList,
2021-09-04 01:27:46 +05:30
item,
2020-04-22 19:07:51 +05:30
disabled: false,
index: 0,
...propsData,
},
2020-11-24 15:15:51 +05:30
provide: {
groupId: null,
rootPath: '/',
2021-03-08 18:12:59 +05:30
scopedLabelsAvailable: false,
2021-04-17 20:07:23 +05:30
...provide,
2020-11-24 15:15:51 +05:30
},
2020-04-22 19:07:51 +05:30
});
};
2021-04-17 20:07:23 +05:30
const selectCard = async () => {
2021-12-11 22:18:48 +05:30
wrapper.trigger('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2020-04-22 19:07:51 +05:30
};
2021-04-17 20:07:23 +05:30
const multiSelectCard = async () => {
2021-12-11 22:18:48 +05:30
wrapper.trigger('click', { ctrlKey: true });
2022-04-04 11:22:00 +05:30
await nextTick();
2021-04-17 20:07:23 +05:30
};
2020-04-22 19:07:51 +05:30
2021-09-04 01:27:46 +05:30
beforeEach(() => {
window.gon = { features: {} };
});
2020-04-22 19:07:51 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
2021-04-17 20:07:23 +05:30
store = null;
2020-04-22 19:07:51 +05:30
});
2021-06-08 01:23:25 +05:30
describe('when GlLabel is clicked in BoardCardInner', () => {
it('doesnt call toggleBoardItem', () => {
createStore({ initialState: { isShowingLabels: true } });
mountComponent({ mountFn: mount, stubs: {} });
wrapper.find(GlLabel).trigger('mouseup');
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
expect(mockActions.toggleBoardItem).toHaveBeenCalledTimes(0);
2020-04-22 19:07:51 +05:30
});
2021-06-08 01:23:25 +05:30
});
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
it('should not highlight the card by default', async () => {
createStore();
mountComponent();
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
expect(wrapper.classes()).not.toContain('is-active');
expect(wrapper.classes()).not.toContain('multi-select');
});
it('should highlight the card with a correct style when selected', async () => {
createStore({
initialState: {
activeId: mockIssue.id,
},
2020-04-22 19:07:51 +05:30
});
2021-06-08 01:23:25 +05:30
mountComponent();
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
expect(wrapper.classes()).toContain('is-active');
expect(wrapper.classes()).not.toContain('multi-select');
});
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
it('should highlight the card with a correct style when multi-selected', async () => {
createStore({
initialState: {
activeId: inactiveId,
selectedBoardItems: [mockIssue],
},
2020-04-22 19:07:51 +05:30
});
2021-06-08 01:23:25 +05:30
mountComponent();
2020-11-24 15:15:51 +05:30
2021-06-08 01:23:25 +05:30
expect(wrapper.classes()).toContain('multi-select');
expect(wrapper.classes()).not.toContain('is-active');
});
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
describe('when mouseup event is called on the card', () => {
beforeEach(() => {
createStore();
mountComponent();
});
describe('when not using multi-select', () => {
it('should call vuex action "toggleBoardItem" with correct parameters', async () => {
await selectCard();
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
expect(mockActions.toggleBoardItem).toHaveBeenCalledTimes(1);
expect(mockActions.toggleBoardItem).toHaveBeenCalledWith(expect.any(Object), {
boardItem: mockIssue,
2021-04-17 20:07:23 +05:30
});
});
2021-06-08 01:23:25 +05:30
});
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
describe('when using multi-select', () => {
2021-09-04 01:27:46 +05:30
beforeEach(() => {
window.gon = { features: { boardMultiSelect: true } };
});
2021-06-08 01:23:25 +05:30
it('should call vuex action "multiSelectBoardItem" with correct parameters', async () => {
await multiSelectCard();
2020-04-22 19:07:51 +05:30
2021-06-08 01:23:25 +05:30
expect(mockActions.toggleBoardItemMultiSelection).toHaveBeenCalledTimes(1);
expect(mockActions.toggleBoardItemMultiSelection).toHaveBeenCalledWith(
expect.any(Object),
mockIssue,
);
2021-04-17 20:07:23 +05:30
});
2020-04-22 19:07:51 +05:30
});
});
2021-09-04 01:27:46 +05:30
describe('when card is loading', () => {
it('card is disabled and user cannot drag', () => {
createStore();
mountComponent({ item: { ...mockIssue, isLoading: true } });
expect(wrapper.classes()).toContain('is-disabled');
2022-03-02 08:16:31 +05:30
expect(wrapper.classes()).not.toContain('gl-cursor-grab');
2021-09-04 01:27:46 +05:30
});
});
describe('when card is not loading', () => {
it('user can drag', () => {
createStore();
mountComponent();
expect(wrapper.classes()).not.toContain('is-disabled');
2022-03-02 08:16:31 +05:30
expect(wrapper.classes()).toContain('gl-cursor-grab');
2021-09-04 01:27:46 +05:30
});
});
2020-04-22 19:07:51 +05:30
});