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

275 lines
7.7 KiB
JavaScript
Raw Normal View History

2019-12-26 22:10:19 +05:30
/* global List */
2020-04-22 19:07:51 +05:30
/* global ListIssue */
2019-12-26 22:10:19 +05:30
2017-08-17 22:00:37 +05:30
import Vue from 'vue';
2020-04-22 19:07:51 +05:30
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
2017-08-17 22:00:37 +05:30
import eventHub from '~/boards/eventhub';
2019-12-26 22:10:19 +05:30
import waitForPromises from '../helpers/wait_for_promises';
2020-04-22 19:07:51 +05:30
import BoardList from '~/boards/components/board_list.vue';
import '~/boards/models/issue';
2019-12-26 22:10:19 +05:30
import '~/boards/models/list';
2020-04-22 19:07:51 +05:30
import { listObj, boardsMockInterceptor } from './mock_data';
import store from '~/boards/stores';
import boardsStore from '~/boards/stores/boards_store';
const createComponent = ({ done, listIssueProps = {}, componentProps = {}, listProps = {} }) => {
const el = document.createElement('div');
document.body.appendChild(el);
const mock = new MockAdapter(axios);
mock.onAny().reply(boardsMockInterceptor);
boardsStore.create();
const BoardListComp = Vue.extend(BoardList);
const list = new List({ ...listObj, ...listProps });
const issue = new ListIssue({
title: 'Testing',
id: 1,
iid: 1,
confidential: false,
labels: [],
assignees: [],
...listIssueProps,
});
if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesSize')) {
list.issuesSize = 1;
}
list.issues.push(issue);
const component = new BoardListComp({
el,
store,
propsData: {
disabled: false,
list,
issues: list.issues,
loading: false,
issueLinkBase: '/issues',
rootPath: '/',
...componentProps,
},
}).$mount();
Vue.nextTick(() => {
done();
});
return { component, mock };
};
2017-08-17 22:00:37 +05:30
describe('Board list component', () => {
2018-03-17 18:26:18 +05:30
let mock;
2017-08-17 22:00:37 +05:30
let component;
2019-12-26 22:10:19 +05:30
let getIssues;
function generateIssues(compWrapper) {
for (let i = 1; i < 20; i += 1) {
const issue = Object.assign({}, compWrapper.list.issues[0]);
issue.id += i;
compWrapper.list.issues.push(issue);
}
}
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
describe('When Expanded', () => {
beforeEach(done => {
2020-04-22 19:07:51 +05:30
getIssues = jest.spyOn(List.prototype, 'getIssues').mockReturnValue(new Promise(() => {}));
2019-12-26 22:10:19 +05:30
({ mock, component } = createComponent({ done }));
});
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
afterEach(() => {
mock.restore();
component.$destroy();
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('loads first page of issues', () => {
return waitForPromises().then(() => {
expect(getIssues).toHaveBeenCalled();
});
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', () => {
expect(component.$el.classList.contains('board-list-component')).toBe(true);
});
2020-04-22 19:07:51 +05:30
it('renders loading icon', () => {
2019-12-26 22:10:19 +05:30
component.loading = true;
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-loading')).not.toBeNull();
});
2017-08-17 22:00:37 +05:30
});
2019-12-26 22:10:19 +05:30
it('renders issues', () => {
expect(component.$el.querySelectorAll('.board-card').length).toBe(1);
});
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
it('sets data attribute with issue id', () => {
expect(component.$el.querySelector('.board-card').getAttribute('data-issue-id')).toBe('1');
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('shows new issue form', () => {
2019-12-26 22:10:19 +05:30
component.toggleForm();
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
});
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('shows new issue form after eventhub event', () => {
2019-12-26 22:10:19 +05:30
eventHub.$emit(`hide-issue-form-${component.list.id}`);
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
});
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', () => {
2019-12-26 22:10:19 +05:30
component.list.type = 'closed';
component.toggleForm();
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-new-issue-form')).toBeNull();
});
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('shows count list item', () => {
2019-12-26 22:10:19 +05:30
component.showCount = true;
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-count')).not.toBeNull();
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
'Showing all issues',
);
});
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('sets data attribute with invalid id', () => {
2019-12-26 22:10:19 +05:30
component.showCount = true;
2018-03-17 18:26:18 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-count').getAttribute('data-issue-id')).toBe(
'-1',
);
});
2018-03-17 18:26:18 +05:30
});
2020-04-22 19:07:51 +05:30
it('shows how many more issues to load', () => {
2019-12-26 22:10:19 +05:30
component.showCount = true;
component.list.issuesSize = 20;
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
'Showing 1 of 20 issues',
);
});
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('loads more issues after scrolling', () => {
jest.spyOn(component.list, 'nextPage').mockImplementation(() => {});
2019-12-26 22:10:19 +05:30
generateIssues(component);
2020-04-22 19:07:51 +05:30
component.$refs.list.dispatchEvent(new Event('scroll'));
2019-12-26 22:10:19 +05:30
2020-04-22 19:07:51 +05:30
return waitForPromises().then(() => {
expect(component.list.nextPage).toHaveBeenCalled();
2019-12-26 22:10:19 +05:30
});
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('does not load issues if already loading', () => {
component.list.nextPage = jest
.spyOn(component.list, 'nextPage')
.mockReturnValue(new Promise(() => {}));
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
component.onScroll();
component.onScroll();
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
return waitForPromises().then(() => {
expect(component.list.nextPage).toHaveBeenCalledTimes(1);
});
2017-08-17 22:00:37 +05:30
});
2020-04-22 19:07:51 +05:30
it('shows loading more spinner', () => {
2019-12-26 22:10:19 +05:30
component.showCount = true;
component.list.loadingMore = true;
2018-11-20 20:47:30 +05:30
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2019-12-26 22:10:19 +05:30
expect(component.$el.querySelector('.board-list-count .gl-spinner')).not.toBeNull();
});
});
2018-11-20 20:47:30 +05:30
});
2019-12-26 22:10:19 +05:30
describe('When Collapsed', () => {
beforeEach(done => {
2020-04-22 19:07:51 +05:30
getIssues = jest.spyOn(List.prototype, 'getIssues').mockReturnValue(new Promise(() => {}));
2019-12-26 22:10:19 +05:30
({ mock, component } = createComponent({
done,
listProps: { type: 'closed', collapsed: true, issuesSize: 50 },
}));
generateIssues(component);
2020-04-22 19:07:51 +05:30
component.scrollHeight = jest.spyOn(component, 'scrollHeight').mockReturnValue(0);
2019-12-26 22:10:19 +05:30
});
2017-08-17 22:00:37 +05:30
2019-12-26 22:10:19 +05:30
afterEach(() => {
mock.restore();
component.$destroy();
});
2017-08-17 22:00:37 +05:30
2020-04-22 19:07:51 +05:30
it('does not load all issues', () => {
return waitForPromises().then(() => {
// Initial getIssues from list constructor
expect(getIssues).toHaveBeenCalledTimes(1);
});
2017-08-17 22:00:37 +05:30
});
});
2020-01-01 13:55:28 +05:30
describe('max issue count warning', () => {
beforeEach(done => {
({ mock, component } = createComponent({
done,
listProps: { type: 'closed', collapsed: true, issuesSize: 50 },
}));
});
afterEach(() => {
mock.restore();
component.$destroy();
});
describe('when issue count exceeds max issue count', () => {
2020-04-22 19:07:51 +05:30
it('sets background to bg-danger-100', () => {
2020-01-01 13:55:28 +05:30
component.list.issuesSize = 4;
component.list.maxIssueCount = 3;
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2020-01-01 13:55:28 +05:30
expect(component.$el.querySelector('.bg-danger-100')).not.toBeNull();
});
});
});
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', () => {
2020-01-01 13:55:28 +05:30
component.list.issuesSize = 2;
component.list.maxIssueCount = 3;
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2020-01-01 13:55:28 +05:30
expect(component.$el.querySelector('.bg-danger-100')).toBeNull();
});
});
});
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', () => {
2020-01-01 13:55:28 +05:30
component.list.maxIssueCount = 0;
2020-04-22 19:07:51 +05:30
return Vue.nextTick().then(() => {
2020-01-01 13:55:28 +05:30
expect(component.$el.querySelector('.bg-danger-100')).toBeNull();
});
});
});
});
2017-08-17 22:00:37 +05:30
});