debian-mirror-gitlab/spec/frontend/boards/board_list_spec.js

283 lines
7.7 KiB
JavaScript
Raw Normal View History

2021-04-17 20:07:23 +05:30
import { createLocalVue, shallowMount } from '@vue/test-utils';
2021-03-08 18:12:59 +05:30
import Vuex from 'vuex';
import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_frame';
import BoardCard from '~/boards/components/board_card.vue';
2021-03-11 19:13:27 +05:30
import BoardList from '~/boards/components/board_list.vue';
2021-04-17 20:07:23 +05:30
import BoardNewIssue from '~/boards/components/board_new_issue.vue';
2021-03-11 19:13:27 +05:30
import eventHub from '~/boards/eventhub';
2021-03-08 18:12:59 +05:30
import defaultState from '~/boards/stores/state';
2021-03-11 19:13:27 +05:30
import { mockList, mockIssuesByListId, issues, mockIssues } from './mock_data';
2021-03-08 18:12:59 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
const actions = {
2021-04-17 20:07:23 +05:30
fetchItemsForList: jest.fn(),
2021-03-08 18:12:59 +05:30
};
const createStore = (state = defaultState) => {
return new Vuex.Store({
state,
actions,
2021-04-17 20:07:23 +05:30
getters: {
isGroupBoard: () => false,
isProjectBoard: () => true,
isEpicBoard: () => false,
},
2021-03-08 18:12:59 +05:30
});
};
const createComponent = ({
listIssueProps = {},
componentProps = {},
listProps = {},
state = {},
} = {}) => {
const store = createStore({
2021-04-17 20:07:23 +05:30
boardItemsByListId: mockIssuesByListId,
boardItems: issues,
2021-03-08 18:12:59 +05:30
pageInfoByListId: {
'gid://gitlab/List/1': { hasNextPage: true },
'gid://gitlab/List/2': {},
},
listsFlags: {
'gid://gitlab/List/1': {},
'gid://gitlab/List/2': {},
},
2021-04-17 20:07:23 +05:30
selectedBoardItems: [],
2021-03-08 18:12:59 +05:30
...state,
});
const list = {
...mockList,
...listProps,
};
const issue = {
2020-04-22 19:07:51 +05:30
title: 'Testing',
id: 1,
iid: 1,
confidential: false,
labels: [],
assignees: [],
...listIssueProps,
2021-03-08 18:12:59 +05:30
};
if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesCount')) {
list.issuesCount = 1;
2020-04-22 19:07:51 +05:30
}
2021-04-17 20:07:23 +05:30
const component = shallowMount(BoardList, {
2021-03-08 18:12:59 +05:30
localVue,
2020-04-22 19:07:51 +05:30
propsData: {
disabled: false,
list,
2021-04-17 20:07:23 +05:30
boardItems: [issue],
2021-03-08 18:12:59 +05:30
canAdminList: true,
2020-04-22 19:07:51 +05:30
...componentProps,
},
2021-03-08 18:12:59 +05:30
store,
2020-11-24 15:15:51 +05:30
provide: {
groupId: null,
rootPath: '/',
2021-03-08 18:12:59 +05:30
weightFeatureAvailable: false,
boardWeight: null,
2020-11-24 15:15:51 +05:30
},
2021-04-17 20:07:23 +05:30
stubs: {
BoardCard,
BoardNewIssue,
},
2020-04-22 19:07:51 +05:30
});
2021-03-08 18:12:59 +05:30
return component;
2020-04-22 19:07:51 +05:30
};
2017-08-17 22:00:37 +05:30
describe('Board list component', () => {
2021-03-08 18:12:59 +05:30
let wrapper;
2021-04-17 20:07:23 +05:30
2021-03-08 18:12:59 +05:30
const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
2021-04-17 20:07:23 +05:30
const findIssueCountLoadingIcon = () => wrapper.find('[data-testid="count-loading-icon"]');
2021-03-08 18:12:59 +05:30
useFakeRequestAnimationFrame();
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
describe('When Expanded', () => {
beforeEach(() => {
wrapper = createComponent();
2019-12-26 22:10:19 +05:30
});
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
it('renders component', () => {
2021-03-08 18:12:59 +05:30
expect(wrapper.find('.board-list-component').exists()).toBe(true);
2019-12-26 22:10:19 +05:30
});
2020-04-22 19:07:51 +05:30
it('renders loading icon', () => {
2021-03-08 18:12:59 +05:30
wrapper = createComponent({
state: { listsFlags: { 'gid://gitlab/List/1': { isLoading: true } } },
2019-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
expect(findByTestId('board_list_loading').exists()).toBe(true);
2017-08-17 22:00:37 +05:30
});
2019-12-26 22:10:19 +05:30
it('renders issues', () => {
2021-03-08 18:12:59 +05:30
expect(wrapper.findAll(BoardCard).length).toBe(1);
2019-12-26 22:10:19 +05:30
});
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
it('sets data attribute with issue id', () => {
2021-04-17 20:07:23 +05:30
expect(wrapper.find('.board-card').attributes('data-item-id')).toBe('1');
2019-12-26 22:10:19 +05:30
});
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
it('shows new issue form', async () => {
wrapper.vm.toggleForm();
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-new-issue-form').exists()).toBe(true);
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
it('shows new issue form after eventhub event', async () => {
eventHub.$emit(`toggle-issue-form-${wrapper.vm.list.id}`);
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-new-issue-form').exists()).toBe(true);
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('does not show new issue form for closed list', () => {
2021-03-08 18:12:59 +05:30
wrapper.setProps({ list: { type: 'closed' } });
wrapper.vm.toggleForm();
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.find('.board-new-issue-form').exists()).toBe(false);
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
it('shows count list item', async () => {
wrapper.vm.showCount = true;
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-list-count').exists()).toBe(true);
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.find('.board-list-count').text()).toBe('Showing all issues');
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
it('sets data attribute with invalid id', async () => {
wrapper.vm.showCount = true;
2018-03-17 18:26:18 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-list-count').attributes('data-issue-id')).toBe('-1');
2018-03-17 18:26:18 +05:30
});
2021-03-08 18:12:59 +05:30
it('shows how many more issues to load', async () => {
wrapper.vm.showCount = true;
wrapper.setProps({ list: { issuesCount: 20 } });
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.board-list-count').text()).toBe('Showing 1 of 20 issues');
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
});
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
describe('load more issues', () => {
beforeEach(() => {
wrapper = createComponent({
listProps: { issuesCount: 25 },
2019-12-26 22:10:19 +05:30
});
});
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
it('loads more issues after scrolling', () => {
wrapper.vm.listRef.dispatchEvent(new Event('scroll'));
2017-08-17 22:00:37 +05:30
2021-04-17 20:07:23 +05:30
expect(actions.fetchItemsForList).toHaveBeenCalled();
2017-08-17 22:00:37 +05:30
});
2021-03-08 18:12:59 +05:30
it('does not load issues if already loading', () => {
wrapper = createComponent({
state: { listsFlags: { 'gid://gitlab/List/1': { isLoadingMore: true } } },
2019-12-26 22:10:19 +05:30
});
2021-03-08 18:12:59 +05:30
wrapper.vm.listRef.dispatchEvent(new Event('scroll'));
2018-11-20 20:47:30 +05:30
2021-04-17 20:07:23 +05:30
expect(actions.fetchItemsForList).not.toHaveBeenCalled();
2019-12-26 22:10:19 +05:30
});
2017-08-17 22:00:37 +05:30
2021-03-08 18:12:59 +05:30
it('shows loading more spinner', async () => {
wrapper = createComponent({
state: { listsFlags: { 'gid://gitlab/List/1': { isLoadingMore: true } } },
2020-04-22 19:07:51 +05:30
});
2021-03-08 18:12:59 +05:30
wrapper.vm.showCount = true;
await wrapper.vm.$nextTick();
2021-04-17 20:07:23 +05:30
expect(findIssueCountLoadingIcon().exists()).toBe(true);
2017-08-17 22:00:37 +05:30
});
});
2020-01-01 13:55:28 +05:30
describe('max issue count warning', () => {
2021-03-08 18:12:59 +05:30
beforeEach(() => {
wrapper = createComponent({
listProps: { issuesCount: 50 },
});
2020-01-01 13:55:28 +05:30
});
describe('when issue count exceeds max issue count', () => {
2021-03-08 18:12:59 +05:30
it('sets background to bg-danger-100', async () => {
wrapper.setProps({ list: { issuesCount: 4, maxIssueCount: 3 } });
2020-01-01 13:55:28 +05:30
2021-03-08 18:12:59 +05:30
await wrapper.vm.$nextTick();
expect(wrapper.find('.bg-danger-100').exists()).toBe(true);
2020-01-01 13:55:28 +05:30
});
});
describe('when list issue count does NOT exceed list max issue count', () => {
2020-04-22 19:07:51 +05:30
it('does not sets background to bg-danger-100', () => {
2021-03-08 18:12:59 +05:30
wrapper.setProps({ list: { issuesCount: 2, maxIssueCount: 3 } });
2020-01-01 13:55:28 +05:30
2021-03-08 18:12:59 +05:30
expect(wrapper.find('.bg-danger-100').exists()).toBe(false);
2020-01-01 13:55:28 +05:30
});
});
describe('when list max issue count is 0', () => {
2020-04-22 19:07:51 +05:30
it('does not sets background to bg-danger-100', () => {
2021-03-08 18:12:59 +05:30
wrapper.setProps({ list: { maxIssueCount: 0 } });
expect(wrapper.find('.bg-danger-100').exists()).toBe(false);
});
});
});
2020-01-01 13:55:28 +05:30
2021-03-08 18:12:59 +05:30
describe('drag & drop issue', () => {
beforeEach(() => {
wrapper = createComponent();
});
describe('handleDragOnStart', () => {
it('adds a class `is-dragging` to document body', () => {
expect(document.body.classList.contains('is-dragging')).toBe(false);
findByTestId('tree-root-wrapper').vm.$emit('start');
expect(document.body.classList.contains('is-dragging')).toBe(true);
});
});
describe('handleDragOnEnd', () => {
it('removes class `is-dragging` from document body', () => {
2021-04-17 20:07:23 +05:30
jest.spyOn(wrapper.vm, 'moveItem').mockImplementation(() => {});
2021-03-08 18:12:59 +05:30
document.body.classList.add('is-dragging');
findByTestId('tree-root-wrapper').vm.$emit('end', {
oldIndex: 1,
newIndex: 0,
item: {
dataset: {
2021-04-17 20:07:23 +05:30
itemId: mockIssues[0].id,
itemIid: mockIssues[0].iid,
itemPath: mockIssues[0].referencePath,
2021-03-08 18:12:59 +05:30
},
},
to: { children: [], dataset: { listId: 'gid://gitlab/List/1' } },
from: { dataset: { listId: 'gid://gitlab/List/2' } },
2020-01-01 13:55:28 +05:30
});
2021-03-08 18:12:59 +05:30
expect(document.body.classList.contains('is-dragging')).toBe(false);
2020-01-01 13:55:28 +05:30
});
});
});
2017-08-17 22:00:37 +05:30
});