debian-mirror-gitlab/spec/javascripts/boards/board_card_spec.js

210 lines
5 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
/* global List */
/* global ListAssignee */
/* global ListLabel */
import Vue from 'vue';
2018-03-17 18:26:18 +05:30
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
import eventHub from '~/boards/eventhub';
2019-09-04 21:01:54 +05:30
import '~/boards/models/label';
import '~/boards/models/assignee';
2017-09-10 17:25:29 +05:30
import '~/boards/models/list';
2018-12-13 13:39:08 +05:30
import boardsStore from '~/boards/stores/boards_store';
2018-03-17 18:26:18 +05:30
import boardCard from '~/boards/components/board_card.vue';
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
describe('Board card', () => {
2017-08-17 22:00:37 +05:30
let vm;
2018-03-17 18:26:18 +05:30
let mock;
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
beforeEach(done => {
2018-03-17 18:26:18 +05:30
mock = new MockAdapter(axios);
mock.onAny().reply(boardsMockInterceptor);
2017-08-17 22:00:37 +05:30
2018-03-17 18:26:18 +05:30
gl.boardService = mockBoardService();
2018-12-13 13:39:08 +05:30
boardsStore.create();
boardsStore.detail.issue = {};
2017-08-17 22:00:37 +05:30
const BoardCardComp = Vue.extend(boardCard);
const list = new List(listObj);
const label1 = new ListLabel({
id: 3,
title: 'testing 123',
color: 'blue',
text_color: 'white',
description: 'test',
});
setTimeout(() => {
list.issues[0].labels.push(label1);
vm = new BoardCardComp({
propsData: {
list,
issue: list.issues[0],
issueLinkBase: '/',
disabled: false,
index: 0,
rootPath: '/',
},
}).$mount();
done();
}, 0);
});
afterEach(() => {
2018-03-17 18:26:18 +05:30
mock.restore();
2017-08-17 22:00:37 +05:30
});
it('returns false when detailIssue is empty', () => {
expect(vm.issueDetailVisible).toBe(false);
});
it('returns true when detailIssue is equal to card issue', () => {
2018-12-13 13:39:08 +05:30
boardsStore.detail.issue = vm.issue;
2017-08-17 22:00:37 +05:30
expect(vm.issueDetailVisible).toBe(true);
});
it('adds user-can-drag class if not disabled', () => {
expect(vm.$el.classList.contains('user-can-drag')).toBe(true);
});
2018-12-13 13:39:08 +05:30
it('does not add user-can-drag class disabled', done => {
2017-08-17 22:00:37 +05:30
vm.disabled = true;
setTimeout(() => {
expect(vm.$el.classList.contains('user-can-drag')).toBe(false);
done();
}, 0);
});
it('does not add disabled class', () => {
expect(vm.$el.classList.contains('is-disabled')).toBe(false);
});
2018-12-13 13:39:08 +05:30
it('adds disabled class is disabled is true', done => {
2017-08-17 22:00:37 +05:30
vm.disabled = true;
setTimeout(() => {
expect(vm.$el.classList.contains('is-disabled')).toBe(true);
done();
}, 0);
});
describe('mouse events', () => {
const triggerEvent = (eventName, el = vm.$el) => {
const event = document.createEvent('MouseEvents');
2018-12-13 13:39:08 +05:30
event.initMouseEvent(
eventName,
true,
true,
window,
1,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null,
);
2017-08-17 22:00:37 +05:30
el.dispatchEvent(event);
};
it('sets showDetail to true on mousedown', () => {
triggerEvent('mousedown');
expect(vm.showDetail).toBe(true);
});
it('sets showDetail to false on mousemove', () => {
triggerEvent('mousedown');
expect(vm.showDetail).toBe(true);
triggerEvent('mousemove');
expect(vm.showDetail).toBe(false);
});
it('does not set detail issue if showDetail is false', () => {
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.issue).toEqual({});
2017-08-17 22:00:37 +05:30
});
it('does not set detail issue if link is clicked', () => {
triggerEvent('mouseup', vm.$el.querySelector('a'));
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.issue).toEqual({});
2017-08-17 22:00:37 +05:30
});
it('does not set detail issue if button is clicked', () => {
triggerEvent('mouseup', vm.$el.querySelector('button'));
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.issue).toEqual({});
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
it('does not set detail issue if img is clicked', done => {
vm.issue.assignees = [
new ListAssignee({
id: 1,
name: 'testing 123',
username: 'test',
avatar: 'test_image',
}),
];
2017-08-17 22:00:37 +05:30
Vue.nextTick(() => {
triggerEvent('mouseup', vm.$el.querySelector('img'));
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.issue).toEqual({});
2017-08-17 22:00:37 +05:30
done();
});
});
it('does not set detail issue if showDetail is false after mouseup', () => {
triggerEvent('mouseup');
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.issue).toEqual({});
2017-08-17 22:00:37 +05:30
});
it('sets detail issue to card issue on mouse up', () => {
2018-03-17 18:26:18 +05:30
spyOn(eventHub, '$emit');
2017-08-17 22:00:37 +05:30
triggerEvent('mousedown');
triggerEvent('mouseup');
2018-03-17 18:26:18 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', vm.issue);
2018-12-13 13:39:08 +05:30
expect(boardsStore.detail.list).toEqual(vm.list);
2017-08-17 22:00:37 +05:30
});
2018-12-13 13:39:08 +05:30
it('adds active class if detail issue is set', done => {
2018-03-17 18:26:18 +05:30
vm.detailIssue.issue = vm.issue;
Vue.nextTick()
.then(() => {
expect(vm.$el.classList.contains('is-active')).toBe(true);
})
.then(done)
.catch(done.fail);
2017-08-17 22:00:37 +05:30
});
it('resets detail issue to empty if already set', () => {
2018-03-17 18:26:18 +05:30
spyOn(eventHub, '$emit');
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
boardsStore.detail.issue = vm.issue;
2017-08-17 22:00:37 +05:30
triggerEvent('mousedown');
triggerEvent('mouseup');
2018-03-17 18:26:18 +05:30
expect(eventHub.$emit).toHaveBeenCalledWith('clearDetailIssue');
2017-08-17 22:00:37 +05:30
});
});
});