gitlab-org--gitlab-foss/spec/javascripts/boards/board_list_spec.js

204 lines
4.9 KiB
JavaScript
Raw Normal View History

2017-03-28 05:31:16 -04:00
/* global List */
/* global ListIssue */
2017-03-28 05:31:16 -04:00
import Vue from 'vue';
2017-12-15 03:31:14 -05:00
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
2018-05-31 08:10:41 -04:00
import Sortable from 'sortablejs';
import BoardList from '~/boards/components/board_list.vue';
2017-03-28 05:31:16 -04:00
import eventHub from '~/boards/eventhub';
import '~/boards/models/issue';
import '~/boards/models/list';
import boardsStore from '~/boards/stores/boards_store';
2017-12-15 03:31:14 -05:00
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
2017-03-28 05:31:16 -04:00
window.Sortable = Sortable;
describe('Board list component', () => {
2017-12-15 03:31:14 -05:00
let mock;
2017-03-28 05:31:16 -04:00
let component;
beforeEach(done => {
2017-03-28 05:31:16 -04:00
const el = document.createElement('div');
document.body.appendChild(el);
2017-12-15 03:31:14 -05:00
mock = new MockAdapter(axios);
mock.onAny().reply(boardsMockInterceptor);
2017-09-06 02:49:19 -04:00
gl.boardService = mockBoardService();
boardsStore.create();
2017-03-28 05:31:16 -04:00
const BoardListComp = Vue.extend(BoardList);
const list = new List(listObj);
const issue = new ListIssue({
title: 'Testing',
2017-09-06 02:49:19 -04:00
id: 1,
2017-03-28 05:31:16 -04:00
iid: 1,
confidential: false,
labels: [],
2017-05-04 15:35:02 -04:00
assignees: [],
2017-03-28 05:31:16 -04:00
});
list.issuesSize = 1;
list.issues.push(issue);
component = new BoardListComp({
el,
propsData: {
disabled: false,
list,
issues: list.issues,
loading: false,
issueLinkBase: '/issues',
rootPath: '/',
},
}).$mount();
Vue.nextTick(() => {
done();
});
});
afterEach(() => {
mock.restore();
2017-03-28 05:31:16 -04:00
});
it('renders component', () => {
expect(component.$el.classList.contains('board-list-component')).toBe(true);
2017-03-28 05:31:16 -04:00
});
it('renders loading icon', done => {
2017-03-28 05:31:16 -04:00
component.loading = true;
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-list-loading')).not.toBeNull();
2017-03-28 05:31:16 -04:00
done();
});
});
it('renders issues', () => {
expect(component.$el.querySelectorAll('.board-card').length).toBe(1);
2017-03-28 05:31:16 -04:00
});
it('sets data attribute with issue id', () => {
expect(component.$el.querySelector('.board-card').getAttribute('data-issue-id')).toBe('1');
2017-03-28 05:31:16 -04:00
});
it('shows new issue form', done => {
2017-03-28 05:31:16 -04:00
component.toggleForm();
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
2017-03-28 05:31:16 -04:00
expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
2017-03-28 05:31:16 -04:00
done();
});
});
it('shows new issue form after eventhub event', done => {
2017-03-28 05:31:16 -04:00
eventHub.$emit(`hide-issue-form-${component.list.id}`);
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-new-issue-form')).not.toBeNull();
2017-03-28 05:31:16 -04:00
expect(component.$el.querySelector('.is-smaller')).not.toBeNull();
2017-03-28 05:31:16 -04:00
done();
});
});
it('does not show new issue form for closed list', done => {
2017-03-28 05:31:16 -04:00
component.list.type = 'closed';
component.toggleForm();
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-new-issue-form')).toBeNull();
2017-03-28 05:31:16 -04:00
done();
});
});
it('shows count list item', done => {
2017-03-28 05:31:16 -04:00
component.showCount = true;
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-list-count')).not.toBeNull();
2017-03-28 05:31:16 -04:00
expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
'Showing all issues',
);
2017-03-28 05:31:16 -04:00
done();
});
});
it('sets data attribute with invalid id', done => {
component.showCount = true;
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-list-count').getAttribute('data-issue-id')).toBe(
'-1',
);
done();
});
});
it('shows how many more issues to load', done => {
2017-03-28 05:31:16 -04:00
component.showCount = true;
component.list.issuesSize = 20;
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-list-count').textContent.trim()).toBe(
'Showing 1 of 20 issues',
);
2017-03-28 05:31:16 -04:00
done();
});
});
it('loads more issues after scrolling', done => {
2017-03-28 05:31:16 -04:00
spyOn(component.list, 'nextPage');
component.$refs.list.style.height = '100px';
component.$refs.list.style.overflow = 'scroll';
2018-01-23 04:37:07 -05:00
for (let i = 1; i < 20; i += 1) {
const issue = Object.assign({}, component.list.issues[0]);
issue.id += i;
2017-03-28 05:31:16 -04:00
component.list.issues.push(issue);
}
Vue.nextTick(() => {
component.$refs.list.scrollTop = 20000;
setTimeout(() => {
expect(component.list.nextPage).toHaveBeenCalled();
done();
});
});
});
2018-08-16 11:27:56 -04:00
it('does not load issues if already loading', () => {
component.list.nextPage = spyOn(component.list, 'nextPage').and.returnValue(
new Promise(() => {}),
);
2018-08-16 11:27:56 -04:00
component.onScroll();
component.onScroll();
expect(component.list.nextPage).toHaveBeenCalledTimes(1);
});
it('shows loading more spinner', done => {
2017-03-28 05:31:16 -04:00
component.showCount = true;
component.list.loadingMore = true;
Vue.nextTick(() => {
expect(component.$el.querySelector('.board-list-count .fa-spinner')).not.toBeNull();
2017-03-28 05:31:16 -04:00
done();
});
});
});