2021-02-14 18:09:20 +00:00
|
|
|
import { GlIcon } from '@gitlab/ui';
|
2019-11-22 09:06:20 +00:00
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2021-02-14 18:09:20 +00:00
|
|
|
import Vue from 'vue';
|
2019-04-25 14:33:40 +00:00
|
|
|
|
2021-02-01 15:08:56 +00:00
|
|
|
import { mockMilestone } from 'jest/boards/mock_data';
|
2019-04-25 14:33:40 +00:00
|
|
|
import IssueMilestone from '~/vue_shared/components/issue/issue_milestone.vue';
|
|
|
|
|
|
|
|
const createComponent = (milestone = mockMilestone) => {
|
|
|
|
const Component = Vue.extend(IssueMilestone);
|
|
|
|
|
2019-11-22 09:06:20 +00:00
|
|
|
return shallowMount(Component, {
|
2019-04-25 14:33:40 +00:00
|
|
|
propsData: {
|
|
|
|
milestone,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('IssueMilestoneComponent', () => {
|
|
|
|
let wrapper;
|
|
|
|
let vm;
|
|
|
|
|
2020-12-23 21:10:24 +00:00
|
|
|
beforeEach((done) => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper = createComponent();
|
|
|
|
|
|
|
|
({ vm } = wrapper);
|
|
|
|
|
|
|
|
Vue.nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('computed', () => {
|
|
|
|
describe('isMilestoneStarted', () => {
|
2020-12-16 12:09:53 +00:00
|
|
|
it('should return `false` when milestoneStart prop is not defined', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, start_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.isMilestoneStarted).toBe(false);
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('should return `true` when milestone start date is past current date', async () => {
|
|
|
|
await wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, start_date: '1990-07-22' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.isMilestoneStarted).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('isMilestonePastDue', () => {
|
2020-12-16 12:09:53 +00:00
|
|
|
it('should return `false` when milestoneDue prop is not defined', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, due_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.isMilestonePastDue).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should return `true` when milestone due is past current date', () => {
|
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, due_date: '1990-07-22' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
expect(wrapper.vm.isMilestonePastDue).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('milestoneDatesAbsolute', () => {
|
|
|
|
it('returns string containing absolute milestone due date', () => {
|
|
|
|
expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns string containing absolute milestone start date when due date is not present', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, due_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns empty string when both milestone start and due dates are not present', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, start_date: '', due_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('milestoneDatesHuman', () => {
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns string containing milestone due date when date is yet to be due', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns string containing milestone start date when date has already started and due date is not present', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns string containing milestone start date when date is yet to start and due date is not present', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: {
|
|
|
|
...mockMilestone,
|
2019-04-25 14:33:40 +00:00
|
|
|
start_date: `${new Date().getFullYear() + 10}-01-01`,
|
|
|
|
due_date: '',
|
2020-05-07 21:09:26 +00:00
|
|
|
},
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
|
|
|
|
});
|
|
|
|
|
2020-12-16 12:09:53 +00:00
|
|
|
it('returns empty string when milestone start and due dates are not present', async () => {
|
2019-04-25 14:33:40 +00:00
|
|
|
wrapper.setProps({
|
2020-05-07 21:09:26 +00:00
|
|
|
milestone: { ...mockMilestone, start_date: '', due_date: '' },
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
2020-12-16 12:09:53 +00:00
|
|
|
await wrapper.vm.$nextTick();
|
2019-04-25 14:33:40 +00:00
|
|
|
|
|
|
|
expect(wrapper.vm.milestoneDatesHuman).toBe('');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('template', () => {
|
|
|
|
it('renders component root element with class `issue-milestone-details`', () => {
|
|
|
|
expect(vm.$el.classList.contains('issue-milestone-details')).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders milestone icon', () => {
|
2020-08-24 15:10:11 +00:00
|
|
|
expect(wrapper.find(GlIcon).props('name')).toBe('clock');
|
2019-04-25 14:33:40 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders milestone title', () => {
|
|
|
|
expect(vm.$el.querySelector('.milestone-title').innerText.trim()).toBe(mockMilestone.title);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders milestone tooltip', () => {
|
|
|
|
expect(vm.$el.querySelector('.js-item-milestone').innerText.trim()).toContain(
|
|
|
|
mockMilestone.title,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|