2017-02-23 10:27:01 -05:00
|
|
|
/* global List */
|
2017-05-04 15:35:02 -04:00
|
|
|
/* global ListAssignee */
|
2017-02-23 10:49:12 -05:00
|
|
|
/* global ListLabel */
|
|
|
|
/* global BoardService */
|
2017-02-23 10:27:01 -05:00
|
|
|
|
2017-03-17 13:21:25 -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';
|
2017-05-04 14:55:13 -04:00
|
|
|
import '~/boards/models/assignee';
|
2017-03-17 13:21:25 -04:00
|
|
|
|
2017-11-14 01:05:40 -05:00
|
|
|
import eventHub from '~/boards/eventhub';
|
2017-05-16 17:01:51 -04:00
|
|
|
import '~/boards/models/list';
|
|
|
|
import '~/boards/models/label';
|
|
|
|
import '~/boards/stores/boards_store';
|
2017-11-14 01:05:40 -05:00
|
|
|
import boardCard from '~/boards/components/board_card.vue';
|
2017-12-15 03:31:14 -05:00
|
|
|
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
|
2017-02-23 10:27:01 -05:00
|
|
|
|
2017-09-06 02:49:19 -04:00
|
|
|
describe('Board card', () => {
|
2017-02-23 10:27:01 -05:00
|
|
|
let vm;
|
2017-12-15 03:31:14 -05:00
|
|
|
let mock;
|
2017-02-23 10:27:01 -05:00
|
|
|
|
|
|
|
beforeEach((done) => {
|
2017-12-15 03:31:14 -05:00
|
|
|
mock = new MockAdapter(axios);
|
|
|
|
mock.onAny().reply(boardsMockInterceptor);
|
2017-02-23 10:27:01 -05:00
|
|
|
|
2017-09-06 02:49:19 -04:00
|
|
|
gl.boardService = mockBoardService();
|
2017-02-23 10:27:01 -05:00
|
|
|
gl.issueBoards.BoardsStore.create();
|
|
|
|
gl.issueBoards.BoardsStore.detail.issue = {};
|
|
|
|
|
|
|
|
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: '/',
|
|
|
|
},
|
2017-02-23 10:49:12 -05:00
|
|
|
}).$mount();
|
2017-02-23 10:27:01 -05:00
|
|
|
done();
|
|
|
|
}, 0);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
2017-12-15 03:31:14 -05:00
|
|
|
mock.reset();
|
2017-02-23 10:27:01 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
it('returns false when detailIssue is empty', () => {
|
|
|
|
expect(vm.issueDetailVisible).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns true when detailIssue is equal to card issue', () => {
|
|
|
|
gl.issueBoards.BoardsStore.detail.issue = vm.issue;
|
|
|
|
|
|
|
|
expect(vm.issueDetailVisible).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds user-can-drag class if not disabled', () => {
|
|
|
|
expect(vm.$el.classList.contains('user-can-drag')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not add user-can-drag class disabled', (done) => {
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds disabled class is disabled is true', (done) => {
|
|
|
|
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');
|
2017-02-23 10:49:12 -05:00
|
|
|
event.initMouseEvent(eventName, true, true, window, 1, 0, 0, 0, 0, false, false,
|
|
|
|
false, false, 0, null);
|
2017-02-23 10:27:01 -05:00
|
|
|
|
|
|
|
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', () => {
|
|
|
|
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not set detail issue if link is clicked', () => {
|
|
|
|
triggerEvent('mouseup', vm.$el.querySelector('a'));
|
|
|
|
|
|
|
|
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not set detail issue if button is clicked', () => {
|
|
|
|
triggerEvent('mouseup', vm.$el.querySelector('button'));
|
|
|
|
|
|
|
|
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
|
|
|
|
});
|
|
|
|
|
2017-03-27 14:07:44 -04:00
|
|
|
it('does not set detail issue if img is clicked', (done) => {
|
2017-05-04 15:35:02 -04:00
|
|
|
vm.issue.assignees = [new ListAssignee({
|
2017-03-27 14:07:44 -04:00
|
|
|
id: 1,
|
|
|
|
name: 'testing 123',
|
|
|
|
username: 'test',
|
|
|
|
avatar: 'test_image',
|
2017-05-04 15:35:02 -04:00
|
|
|
})];
|
2017-03-27 14:07:44 -04:00
|
|
|
|
|
|
|
Vue.nextTick(() => {
|
|
|
|
triggerEvent('mouseup', vm.$el.querySelector('img'));
|
|
|
|
|
|
|
|
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
|
|
|
|
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-02-23 10:49:12 -05:00
|
|
|
it('does not set detail issue if showDetail is false after mouseup', () => {
|
2017-02-23 10:27:01 -05:00
|
|
|
triggerEvent('mouseup');
|
|
|
|
|
|
|
|
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets detail issue to card issue on mouse up', () => {
|
2017-11-14 01:05:40 -05:00
|
|
|
spyOn(eventHub, '$emit');
|
|
|
|
|
2017-02-23 10:27:01 -05:00
|
|
|
triggerEvent('mousedown');
|
|
|
|
triggerEvent('mouseup');
|
|
|
|
|
2017-11-14 01:05:40 -05:00
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', vm.issue);
|
2017-02-23 10:27:01 -05:00
|
|
|
expect(gl.issueBoards.BoardsStore.detail.list).toEqual(vm.list);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds active class if detail issue is set', (done) => {
|
2017-11-14 01:05:40 -05:00
|
|
|
vm.detailIssue.issue = vm.issue;
|
|
|
|
|
|
|
|
Vue.nextTick()
|
|
|
|
.then(() => {
|
|
|
|
expect(vm.$el.classList.contains('is-active')).toBe(true);
|
|
|
|
})
|
|
|
|
.then(done)
|
|
|
|
.catch(done.fail);
|
2017-02-23 10:27:01 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
it('resets detail issue to empty if already set', () => {
|
2017-11-14 01:05:40 -05:00
|
|
|
spyOn(eventHub, '$emit');
|
2017-02-23 10:27:01 -05:00
|
|
|
|
2017-11-14 01:05:40 -05:00
|
|
|
gl.issueBoards.BoardsStore.detail.issue = vm.issue;
|
2017-02-23 10:27:01 -05:00
|
|
|
|
|
|
|
triggerEvent('mousedown');
|
|
|
|
triggerEvent('mouseup');
|
|
|
|
|
2017-11-14 01:05:40 -05:00
|
|
|
expect(eventHub.$emit).toHaveBeenCalledWith('clearDetailIssue');
|
2017-02-23 10:27:01 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|