debian-mirror-gitlab/spec/frontend/issuable/components/issue_milestone_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

161 lines
4.8 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlIcon } from '@gitlab/ui';
2020-01-01 13:55:28 +05:30
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import Vue, { nextTick } from 'vue';
2019-07-31 22:56:46 +05:30
2020-10-24 23:57:45 +05:30
import { mockMilestone } from 'jest/boards/mock_data';
2022-01-26 12:08:38 +05:30
import IssueMilestone from '~/issuable/components/issue_milestone.vue';
2019-07-31 22:56:46 +05:30
const createComponent = (milestone = mockMilestone) => {
const Component = Vue.extend(IssueMilestone);
2020-01-01 13:55:28 +05:30
return shallowMount(Component, {
2019-07-31 22:56:46 +05:30
propsData: {
milestone,
},
});
};
describe('IssueMilestoneComponent', () => {
let wrapper;
let vm;
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2019-07-31 22:56:46 +05:30
wrapper = createComponent();
({ vm } = wrapper);
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
});
afterEach(() => {
wrapper.destroy();
});
describe('computed', () => {
describe('isMilestoneStarted', () => {
2021-02-22 17:27:13 +05:30
it('should return `false` when milestoneStart prop is not defined', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, start_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.isMilestoneStarted).toBe(false);
});
2021-02-22 17:27:13 +05:30
it('should return `true` when milestone start date is past current date', async () => {
await wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, start_date: '1990-07-22' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.isMilestoneStarted).toBe(true);
});
});
describe('isMilestonePastDue', () => {
2021-02-22 17:27:13 +05:30
it('should return `false` when milestoneDue prop is not defined', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, due_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.isMilestonePastDue).toBe(false);
});
it('should return `true` when milestone due is past current date', () => {
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, due_date: '1990-07-22' },
2019-07-31 22:56:46 +05:30
});
expect(wrapper.vm.isMilestonePastDue).toBe(true);
});
});
describe('milestoneDatesAbsolute', () => {
it('returns string containing absolute milestone due date', () => {
expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
});
2021-02-22 17:27:13 +05:30
it('returns string containing absolute milestone start date when due date is not present', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, due_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
});
2021-02-22 17:27:13 +05:30
it('returns empty string when both milestone start and due dates are not present', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, start_date: '', due_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
});
});
describe('milestoneDatesHuman', () => {
2021-02-22 17:27:13 +05:30
it('returns string containing milestone due date when date is yet to be due', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
});
2021-02-22 17:27:13 +05:30
it('returns string containing milestone start date when date has already started and due date is not present', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
});
2021-02-22 17:27:13 +05:30
it('returns string containing milestone start date when date is yet to start and due date is not present', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: {
...mockMilestone,
2019-07-31 22:56:46 +05:30
start_date: `${new Date().getFullYear() + 10}-01-01`,
due_date: '',
2020-05-24 23:13:21 +05:30
},
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
});
2021-02-22 17:27:13 +05:30
it('returns empty string when milestone start and due dates are not present', async () => {
2019-07-31 22:56:46 +05:30
wrapper.setProps({
2020-05-24 23:13:21 +05:30
milestone: { ...mockMilestone, start_date: '', due_date: '' },
2019-07-31 22:56:46 +05:30
});
2022-04-04 11:22:00 +05:30
await nextTick();
2019-07-31 22:56:46 +05:30
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-11-24 15:15:51 +05:30
expect(wrapper.find(GlIcon).props('name')).toBe('clock');
2019-07-31 22:56:46 +05:30
});
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,
);
});
});
});