Commit 55831d20 authored by Coung Ngo's avatar Coung Ngo

Move boards tests to jest

Move some boards tests from karma to jest
parent c274e589
import Vue from 'vue'; import Vue from 'vue';
import AssigneesListItem from 'ee/boards/components/boards_list_selector/assignees_list_item.vue'; import AssigneesListItem from 'ee/boards/components/boards_list_selector/assignees_list_item.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockAssigneesList } from 'spec/boards/mock_data'; import { mockAssigneesList } from 'jest/boards/mock_data';
const createComponent = () => { const createComponent = () => {
const Component = Vue.extend(AssigneesListItem); const Component = Vue.extend(AssigneesListItem);
...@@ -35,7 +35,7 @@ describe('AssigneesListItem', () => { ...@@ -35,7 +35,7 @@ describe('AssigneesListItem', () => {
describe('methods', () => { describe('methods', () => {
describe('handleItemClick', () => { describe('handleItemClick', () => {
it('emits `onItemSelect` event on component and sends `assignee` as event param', () => { it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit');
const assignee = mockAssigneesList[0]; const assignee = mockAssigneesList[0];
vm.handleItemClick(); vm.handleItemClick();
......
import Vue from 'vue'; import Vue from 'vue';
import ListContainer from 'ee/boards/components/boards_list_selector/list_container.vue'; import ListContainer from 'ee/boards/components/boards_list_selector/list_container.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockAssigneesList } from 'spec/boards/mock_data'; import { mockAssigneesList } from 'jest/boards/mock_data';
const createComponent = () => { const createComponent = () => {
const Component = Vue.extend(ListContainer); const Component = Vue.extend(ListContainer);
...@@ -66,7 +66,7 @@ describe('ListContainer', () => { ...@@ -66,7 +66,7 @@ describe('ListContainer', () => {
describe('handleItemClick', () => { describe('handleItemClick', () => {
it('emits `onItemSelect` event on component and sends `assignee` as event param', () => { it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit');
const assignee = mockAssigneesList[0]; const assignee = mockAssigneesList[0];
vm.handleItemClick(assignee); vm.handleItemClick(assignee);
...@@ -81,14 +81,11 @@ describe('ListContainer', () => { ...@@ -81,14 +81,11 @@ describe('ListContainer', () => {
expect(vm.$el.classList.contains('dropdown-assignees-list')).toBe(true); expect(vm.$el.classList.contains('dropdown-assignees-list')).toBe(true);
}); });
it('renders loading animation when prop `loading` is true', done => { it('renders loading animation when prop `loading` is true', () => {
vm.loading = true; vm.loading = true;
Vue.nextTick() return Vue.nextTick().then(() => {
.then(() => {
expect(vm.$el.querySelector('.dropdown-loading')).not.toBeNull(); expect(vm.$el.querySelector('.dropdown-loading')).not.toBeNull();
}) });
.then(done)
.catch(done.fail);
}); });
it('renders dropdown body elements', () => { it('renders dropdown body elements', () => {
......
import Vue from 'vue'; import Vue from 'vue';
import ListContent from 'ee/boards/components/boards_list_selector/list_content.vue'; import ListContent from 'ee/boards/components/boards_list_selector/list_content.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { mockAssigneesList } from 'spec/boards/mock_data'; import { mockAssigneesList } from 'jest/boards/mock_data';
const createComponent = () => { const createComponent = () => {
const Component = Vue.extend(ListContent); const Component = Vue.extend(ListContent);
...@@ -28,7 +28,7 @@ describe('ListContent', () => { ...@@ -28,7 +28,7 @@ describe('ListContent', () => {
describe('methods', () => { describe('methods', () => {
describe('handleItemClick', () => { describe('handleItemClick', () => {
it('emits `onItemSelect` event on component and sends `assignee` as event param', () => { it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit');
const assignee = mockAssigneesList[0]; const assignee = mockAssigneesList[0];
vm.handleItemClick(assignee); vm.handleItemClick(assignee);
......
import Vue from 'vue'; import Vue from 'vue';
import ListFilter from 'ee/boards/components/boards_list_selector/list_filter.vue'; import ListFilter from 'ee/boards/components/boards_list_selector/list_filter.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
const createComponent = () => { const createComponent = () => {
const Component = Vue.extend(ListFilter); const Component = Vue.extend(ListFilter);
...@@ -23,7 +23,7 @@ describe('ListFilter', () => { ...@@ -23,7 +23,7 @@ describe('ListFilter', () => {
describe('methods', () => { describe('methods', () => {
describe('handleInputChange', () => { describe('handleInputChange', () => {
it('emits `onSearchInput` event on component and sends `query` as event param', () => { it('emits `onSearchInput` event on component and sends `query` as event param', () => {
spyOn(vm, '$emit'); jest.spyOn(vm, '$emit');
const query = 'foobar'; const query = 'foobar';
vm.query = query; vm.query = query;
...@@ -35,7 +35,7 @@ describe('ListFilter', () => { ...@@ -35,7 +35,7 @@ describe('ListFilter', () => {
describe('handleInputClear', () => { describe('handleInputClear', () => {
it('clears value of prop `query` and calls `handleInputChange` method on component', () => { it('clears value of prop `query` and calls `handleInputChange` method on component', () => {
spyOn(vm, 'handleInputChange'); jest.spyOn(vm, 'handleInputChange');
vm.query = 'foobar'; vm.query = 'foobar';
vm.handleInputClear(); vm.handleInputClear();
...@@ -51,24 +51,18 @@ describe('ListFilter', () => { ...@@ -51,24 +51,18 @@ describe('ListFilter', () => {
expect(vm.$el.classList.contains('dropdown-input')).toBe(true); expect(vm.$el.classList.contains('dropdown-input')).toBe(true);
}); });
it('renders class `has-value` on container element when prop `query` is not empty', done => { it('renders class `has-value` on container element when prop `query` is not empty', () => {
vm.query = 'foobar'; vm.query = 'foobar';
Vue.nextTick() return Vue.nextTick().then(() => {
.then(() => {
expect(vm.$el.classList.contains('has-value')).toBe(true); expect(vm.$el.classList.contains('has-value')).toBe(true);
}) });
.then(done)
.catch(done.fail);
}); });
it('removes class `has-value` from container element when prop `query` is empty', done => { it('removes class `has-value` from container element when prop `query` is empty', () => {
vm.query = ''; vm.query = '';
Vue.nextTick() return Vue.nextTick().then(() => {
.then(() => {
expect(vm.$el.classList.contains('has-value')).toBe(false); expect(vm.$el.classList.contains('has-value')).toBe(false);
}) });
.then(done)
.catch(done.fail);
}); });
it('renders search input element', () => { it('renders search input element', () => {
......
import Vue from 'vue'; import Vue from 'vue';
import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue'; import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
describe('IssueCardWeight component', () => { describe('IssueCardWeight component', () => {
let vm; let vm;
...@@ -19,7 +19,7 @@ describe('IssueCardWeight component', () => { ...@@ -19,7 +19,7 @@ describe('IssueCardWeight component', () => {
weight: 5, weight: 5,
}); });
expect(vm.$el.querySelector('.board-card-info-text')).toContainText('5'); expect(vm.$el.querySelector('.board-card-info-text').innerText).toContain('5');
}); });
it('renders a link when no tag is specified', () => { it('renders a link when no tag is specified', () => {
...@@ -53,7 +53,7 @@ describe('IssueCardWeight component', () => { ...@@ -53,7 +53,7 @@ describe('IssueCardWeight component', () => {
it('renders weight', () => { it('renders weight', () => {
expect(vm.$el.querySelector('.board-card-info-text')).toBeDefined(); expect(vm.$el.querySelector('.board-card-info-text')).toBeDefined();
expect(vm.$el.querySelector('.board-card-info-text')).toContainText(0); expect(vm.$el.querySelector('.board-card-info-text').innerText).toContain(0);
}); });
}); });
}); });
import { listObj } from 'spec/boards/mock_data'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { listObj } from 'jest/boards/mock_data';
import List from 'ee/boards/models/list'; import List from 'ee/boards/models/list';
import Issue from 'ee/boards/models/issue'; import Issue from 'ee/boards/models/issue';
import CeList from '~/boards/models/list'; import CeList from '~/boards/models/list';
...@@ -6,8 +8,14 @@ import CeList from '~/boards/models/list'; ...@@ -6,8 +8,14 @@ import CeList from '~/boards/models/list';
describe('List model', () => { describe('List model', () => {
let list; let list;
let issue; let issue;
let axiosMock;
beforeEach(() => { beforeEach(() => {
axiosMock = new MockAdapter(axios);
// We need to mock axios since `new List` below makes a network request
axiosMock.onGet().replyOnce(200);
list = new List(listObj); list = new List(listObj);
issue = new Issue({ issue = new Issue({
title: 'Testing', title: 'Testing',
...@@ -22,6 +30,7 @@ describe('List model', () => { ...@@ -22,6 +30,7 @@ describe('List model', () => {
afterEach(() => { afterEach(() => {
list = null; list = null;
issue = null; issue = null;
axiosMock.restore();
}); });
it('inits totalWeight', () => { it('inits totalWeight', () => {
...@@ -29,32 +38,26 @@ describe('List model', () => { ...@@ -29,32 +38,26 @@ describe('List model', () => {
}); });
describe('getIssues', () => { describe('getIssues', () => {
it('calls CE getIssues', done => { it('calls CE getIssues', () => {
const ceGetIssues = spyOn(CeList.prototype, 'getIssues').and.returnValue(Promise.resolve({})); const ceGetIssues = jest
.spyOn(CeList.prototype, 'getIssues')
.mockReturnValue(Promise.resolve({}));
list return list.getIssues().then(() => {
.getIssues()
.then(() => {
expect(ceGetIssues).toHaveBeenCalled(); expect(ceGetIssues).toHaveBeenCalled();
done(); });
})
.catch(done.fail);
}); });
it('sets total weight', done => { it('sets total weight', () => {
spyOn(CeList.prototype, 'getIssues').and.returnValue( jest.spyOn(CeList.prototype, 'getIssues').mockReturnValue(
Promise.resolve({ Promise.resolve({
total_weight: 11, total_weight: 11,
}), }),
); );
list return list.getIssues().then(() => {
.getIssues()
.then(() => {
expect(list.totalWeight).toBe(11); expect(list.totalWeight).toBe(11);
done(); });
})
.catch(done.fail);
}); });
}); });
...@@ -66,7 +69,7 @@ describe('List model', () => { ...@@ -66,7 +69,7 @@ describe('List model', () => {
}); });
it('calls CE addIssue with all args', () => { it('calls CE addIssue with all args', () => {
const ceAddIssue = spyOn(CeList.prototype, 'addIssue'); const ceAddIssue = jest.spyOn(CeList.prototype, 'addIssue');
list.addIssue(issue, list, 2); list.addIssue(issue, list, 2);
...@@ -86,7 +89,7 @@ describe('List model', () => { ...@@ -86,7 +89,7 @@ describe('List model', () => {
}); });
it('calls CE removeIssue', () => { it('calls CE removeIssue', () => {
const ceRemoveIssue = spyOn(CeList.prototype, 'removeIssue'); const ceRemoveIssue = jest.spyOn(CeList.prototype, 'removeIssue');
list.removeIssue(issue); list.removeIssue(issue);
......
import Vue from 'vue'; import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import IssueCardInnerScopedLabel from '~/boards/components/issue_card_inner_scoped_label.vue'; import IssueCardInnerScopedLabel from '~/boards/components/issue_card_inner_scoped_label.vue';
describe('IssueCardInnerScopedLabel Component', () => { describe('IssueCardInnerScopedLabel Component', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment