61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
import { GlIcon, GlTooltip } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import { mockMilestone } from 'jest/boards/mock_data';
|
|
import IssueMilestone from '~/issuable/components/issue_milestone.vue';
|
|
|
|
describe('IssueMilestone component', () => {
|
|
let wrapper;
|
|
|
|
const findTooltip = () => wrapper.findComponent(GlTooltip);
|
|
|
|
const createComponent = (milestone = mockMilestone) =>
|
|
shallowMount(IssueMilestone, { propsData: { milestone } });
|
|
|
|
beforeEach(() => {
|
|
wrapper = createComponent();
|
|
});
|
|
|
|
it('renders milestone icon', () => {
|
|
expect(wrapper.findComponent(GlIcon).props('name')).toBe('clock');
|
|
});
|
|
|
|
it('renders milestone title', () => {
|
|
expect(wrapper.find('.milestone-title').text()).toBe(mockMilestone.title);
|
|
});
|
|
|
|
describe('tooltip', () => {
|
|
it('renders `Milestone`', () => {
|
|
expect(findTooltip().text()).toContain('Milestone');
|
|
});
|
|
|
|
it('renders milestone title', () => {
|
|
expect(findTooltip().text()).toContain(mockMilestone.title);
|
|
});
|
|
|
|
describe('humanized dates', () => {
|
|
it('renders `Expired` when there is a due date in the past', () => {
|
|
wrapper = createComponent({ ...mockMilestone, due_date: '2019-12-31', start_date: '' });
|
|
|
|
expect(findTooltip().text()).toContain('Expired 6 months ago(December 31, 2019)');
|
|
});
|
|
|
|
it('renders `remaining` when there is a due date in the future', () => {
|
|
wrapper = createComponent({ ...mockMilestone, due_date: '2020-12-31', start_date: '' });
|
|
|
|
expect(findTooltip().text()).toContain('5 months remaining(December 31, 2020)');
|
|
});
|
|
|
|
it('renders `Started` when there is a start date in the past', () => {
|
|
wrapper = createComponent({ ...mockMilestone, due_date: '', start_date: '2019-12-31' });
|
|
|
|
expect(findTooltip().text()).toContain('Started 6 months ago(December 31, 2019)');
|
|
});
|
|
|
|
it('renders `Starts` when there is a start date in the future', () => {
|
|
wrapper = createComponent({ ...mockMilestone, due_date: '', start_date: '2020-12-31' });
|
|
|
|
expect(findTooltip().text()).toContain('Starts in 5 months(December 31, 2020)');
|
|
});
|
|
});
|
|
});
|
|
});
|