Commit 396dbbd4 authored by Martin Hobert's avatar Martin Hobert

refactor(issue): Refactored issue tests from Karma to Jest

re #58827

Added changelog

Added sync false, and removed unneeded destroyers
parent 66ff5f3d
...@@ -17,15 +17,13 @@ export default { ...@@ -17,15 +17,13 @@ export default {
required: true, required: true,
}, },
}, },
data() {
return {
milestoneDue: this.milestone.due_date ? parsePikadayDate(this.milestone.due_date) : null,
milestoneStart: this.milestone.start_date
? parsePikadayDate(this.milestone.start_date)
: null,
};
},
computed: { computed: {
milestoneDue() {
return this.milestone.due_date ? parsePikadayDate(this.milestone.due_date) : null;
},
milestoneStart() {
return this.milestone.start_date ? parsePikadayDate(this.milestone.start_date) : null;
},
isMilestoneStarted() { isMilestoneStarted() {
if (!this.milestoneStart) { if (!this.milestoneStart) {
return false; return false;
......
<script> <script>
import '~/commons/bootstrap';
import { GlTooltipDirective } from '@gitlab/ui'; import { GlTooltipDirective } from '@gitlab/ui';
import { sprintf } from '~/locale'; import { sprintf } from '~/locale';
import IssueMilestone from '../../components/issue/issue_milestone.vue'; import IssueMilestone from '../../components/issue/issue_milestone.vue';
......
---
title: 'refactor(issue): Refactored issue tests from Karma to Jest'
merge_request: 27673
author: Martin Hobert
type: other
...@@ -2,8 +2,8 @@ import Vue from 'vue'; ...@@ -2,8 +2,8 @@ import Vue from 'vue';
import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.vue'; import IssueAssignees from '~/vue_shared/components/issue/issue_assignees.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 '../../../../javascripts/boards/mock_data';
const createComponent = (assignees = mockAssigneesList, cssClass = '') => { const createComponent = (assignees = mockAssigneesList, cssClass = '') => {
const Component = Vue.extend(IssueAssignees); const Component = Vue.extend(IssueAssignees);
......
import Vue from 'vue'; import Vue from 'vue';
import { mount } from '@vue/test-utils';
import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue'; import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockMilestone } from '../../../../javascripts/boards/mock_data';
import { mockMilestone } from 'spec/boards/mock_data';
const createComponent = (milestone = mockMilestone) => { const createComponent = (milestone = mockMilestone) => {
const Component = Vue.extend(IssueMilestone); const Component = Vue.extend(IssueMilestone);
return mountComponent(Component, { return mount(Component, {
milestone, propsData: {
milestone,
},
sync: false,
}); });
}; };
describe('IssueMilestoneComponent', () => { describe('IssueMilestoneComponent', () => {
let wrapper;
let vm; let vm;
beforeEach(() => { beforeEach(done => {
vm = createComponent(); wrapper = createComponent();
({ vm } = wrapper);
Vue.nextTick(done);
}); });
afterEach(() => { afterEach(() => {
vm.$destroy(); wrapper.destroy();
}); });
describe('computed', () => { describe('computed', () => {
describe('isMilestoneStarted', () => { describe('isMilestoneStarted', () => {
it('should return `false` when milestoneStart prop is not defined', done => { it('should return `false` when milestoneStart prop is not defined', () => {
const vmStartUndefined = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: '', start_date: '',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmStartUndefined.isMilestoneStarted).toBe(false);
})
.then(done)
.catch(done.fail);
vmStartUndefined.$destroy(); expect(wrapper.vm.isMilestoneStarted).toBe(false);
}); });
it('should return `true` when milestone start date is past current date', done => { it('should return `true` when milestone start date is past current date', () => {
const vmStarted = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: '1990-07-22', start_date: '1990-07-22',
}), }),
); });
Vue.nextTick() expect(wrapper.vm.isMilestoneStarted).toBe(true);
.then(() => {
expect(vmStarted.isMilestoneStarted).toBe(true);
})
.then(done)
.catch(done.fail);
vmStarted.$destroy();
}); });
}); });
describe('isMilestonePastDue', () => { describe('isMilestonePastDue', () => {
it('should return `false` when milestoneDue prop is not defined', done => { it('should return `false` when milestoneDue prop is not defined', () => {
const vmDueUndefined = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmDueUndefined.isMilestonePastDue).toBe(false);
})
.then(done)
.catch(done.fail);
vmDueUndefined.$destroy(); expect(wrapper.vm.isMilestonePastDue).toBe(false);
}); });
it('should return `true` when milestone due is past current date', done => { it('should return `true` when milestone due is past current date', () => {
const vmPastDue = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
due_date: '1990-07-22', due_date: '1990-07-22',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmPastDue.isMilestonePastDue).toBe(true);
})
.then(done)
.catch(done.fail);
vmPastDue.$destroy(); expect(wrapper.vm.isMilestonePastDue).toBe(true);
}); });
}); });
...@@ -102,112 +82,70 @@ describe('IssueMilestoneComponent', () => { ...@@ -102,112 +82,70 @@ describe('IssueMilestoneComponent', () => {
expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)'); expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
}); });
it('returns string containing absolute milestone start date when due date is not present', done => { it('returns string containing absolute milestone start date when due date is not present', () => {
const vmDueUndefined = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick() expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
.then(() => {
expect(vmDueUndefined.milestoneDatesAbsolute).toBe('(January 1, 2018)');
})
.then(done)
.catch(done.fail);
vmDueUndefined.$destroy();
}); });
it('returns empty string when both milestone start and due dates are not present', done => { it('returns empty string when both milestone start and due dates are not present', () => {
const vmDatesUndefined = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: '', start_date: '',
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmDatesUndefined.milestoneDatesAbsolute).toBe('');
})
.then(done)
.catch(done.fail);
vmDatesUndefined.$destroy(); expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
}); });
}); });
describe('milestoneDatesHuman', () => { describe('milestoneDatesHuman', () => {
it('returns string containing milestone due date when date is yet to be due', done => { it('returns string containing milestone due date when date is yet to be due', () => {
const vmFuture = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
due_date: `${new Date().getFullYear() + 10}-01-01`, due_date: `${new Date().getFullYear() + 10}-01-01`,
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmFuture.milestoneDatesHuman).toContain('years remaining');
})
.then(done)
.catch(done.fail);
vmFuture.$destroy(); expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
}); });
it('returns string containing milestone start date when date has already started and due date is not present', done => { it('returns string containing milestone start date when date has already started and due date is not present', () => {
const vmStarted = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: '1990-07-22', start_date: '1990-07-22',
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick() expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
.then(() => {
expect(vmStarted.milestoneDatesHuman).toContain('Started');
})
.then(done)
.catch(done.fail);
vmStarted.$destroy();
}); });
it('returns string containing milestone start date when date is yet to start and due date is not present', done => { it('returns string containing milestone start date when date is yet to start and due date is not present', () => {
const vmStarts = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: `${new Date().getFullYear() + 10}-01-01`, start_date: `${new Date().getFullYear() + 10}-01-01`,
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmStarts.milestoneDatesHuman).toContain('Starts');
})
.then(done)
.catch(done.fail);
vmStarts.$destroy(); expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
}); });
it('returns empty string when milestone start and due dates are not present', done => { it('returns empty string when milestone start and due dates are not present', () => {
const vmDatesUndefined = createComponent( wrapper.setProps({
Object.assign({}, mockMilestone, { milestone: Object.assign({}, mockMilestone, {
start_date: '', start_date: '',
due_date: '', due_date: '',
}), }),
); });
Vue.nextTick()
.then(() => {
expect(vmDatesUndefined.milestoneDatesHuman).toBe('');
})
.then(done)
.catch(done.fail);
vmDatesUndefined.$destroy(); expect(wrapper.vm.milestoneDatesHuman).toBe('');
}); });
}); });
}); });
......
import Vue from 'vue'; import Vue from 'vue';
import issueWarning from '~/vue_shared/components/issue/issue_warning.vue'; import issueWarning from '~/vue_shared/components/issue/issue_warning.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
const IssueWarning = Vue.extend(issueWarning); const IssueWarning = Vue.extend(issueWarning);
...@@ -19,7 +19,9 @@ describe('Issue Warning Component', () => { ...@@ -19,7 +19,9 @@ describe('Issue Warning Component', () => {
isLocked: true, isLocked: true,
}); });
expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/lock$/); expect(
vm.$el.querySelector('.icon use').getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
).toMatch(/lock$/);
expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual( expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual(
'This issue is locked. Only project members can comment.', 'This issue is locked. Only project members can comment.',
); );
...@@ -32,7 +34,9 @@ describe('Issue Warning Component', () => { ...@@ -32,7 +34,9 @@ describe('Issue Warning Component', () => {
isConfidential: true, isConfidential: true,
}); });
expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/eye-slash$/); expect(
vm.$el.querySelector('.icon use').getAttributeNS('http://www.w3.org/1999/xlink', 'href'),
).toMatch(/eye-slash$/);
expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual( expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual(
'This is a confidential issue. Your comment will not be visible to the public.', 'This is a confidential issue. Your comment will not be visible to the public.',
); );
......
import Vue from 'vue'; import Vue from 'vue';
import { formatDate } from '~/lib/utils/datetime_utility';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue'; import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
import { defaultMilestone, defaultAssignees } from './related_issuable_mock_data'; import {
defaultAssignees,
defaultMilestone,
} from '../../../../javascripts/vue_shared/components/issue/related_issuable_mock_data';
describe('RelatedIssuableItem', () => { describe('RelatedIssuableItem', () => {
let wrapper; let wrapper;
...@@ -85,11 +89,11 @@ describe('RelatedIssuableItem', () => { ...@@ -85,11 +89,11 @@ describe('RelatedIssuableItem', () => {
it('renders state title', () => { it('renders state title', () => {
const stateTitle = tokenState.attributes('data-original-title'); const stateTitle = tokenState.attributes('data-original-title');
const formatedCreateDate = formatDate(props.createdAt);
expect(stateTitle).toContain('<span class="bold">Opened</span>'); expect(stateTitle).toContain('<span class="bold">Opened</span>');
expect(stateTitle).toContain(
'<span class="text-tertiary">Dec 1, 2018 12:00am GMT+0000</span>', expect(stateTitle).toContain(`<span class="text-tertiary">${formatedCreateDate}</span>`);
);
}); });
it('renders aria label', () => { it('renders aria label', () => {
......
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