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