diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 09:16:11 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-20 09:16:11 +0000 |
commit | edaa33dee2ff2f7ea3fac488d41558eb5f86d68c (patch) | |
tree | 11f143effbfeba52329fb7afbd05e6e2a3790241 /spec/frontend/issues/list/components/issue_card_time_info_spec.js | |
parent | d8a5691316400a0f7ec4f83832698f1988eb27c1 (diff) | |
download | gitlab-ce-edaa33dee2ff2f7ea3fac488d41558eb5f86d68c.tar.gz |
Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42
Diffstat (limited to 'spec/frontend/issues/list/components/issue_card_time_info_spec.js')
-rw-r--r-- | spec/frontend/issues/list/components/issue_card_time_info_spec.js | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/spec/frontend/issues/list/components/issue_card_time_info_spec.js b/spec/frontend/issues/list/components/issue_card_time_info_spec.js new file mode 100644 index 00000000000..e9c48b60da4 --- /dev/null +++ b/spec/frontend/issues/list/components/issue_card_time_info_spec.js @@ -0,0 +1,122 @@ +import { GlIcon, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { useFakeDate } from 'helpers/fake_date'; +import IssueCardTimeInfo from '~/issues/list/components/issue_card_time_info.vue'; + +describe('CE IssueCardTimeInfo component', () => { + useFakeDate(2020, 11, 11); + + let wrapper; + + const issue = { + milestone: { + dueDate: '2020-12-17', + startDate: '2020-12-10', + title: 'My milestone', + webPath: '/milestone/webPath', + }, + dueDate: '2020-12-12', + humanTimeEstimate: '1w', + }; + + const findMilestone = () => wrapper.find('[data-testid="issuable-milestone"]'); + const findMilestoneTitle = () => findMilestone().find(GlLink).attributes('title'); + const findDueDate = () => wrapper.find('[data-testid="issuable-due-date"]'); + + const mountComponent = ({ + closedAt = null, + dueDate = issue.dueDate, + milestoneDueDate = issue.milestone.dueDate, + milestoneStartDate = issue.milestone.startDate, + } = {}) => + shallowMount(IssueCardTimeInfo, { + propsData: { + issue: { + ...issue, + milestone: { + ...issue.milestone, + dueDate: milestoneDueDate, + startDate: milestoneStartDate, + }, + closedAt, + dueDate, + }, + }, + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('milestone', () => { + it('renders', () => { + wrapper = mountComponent(); + + const milestone = findMilestone(); + + expect(milestone.text()).toBe(issue.milestone.title); + expect(milestone.find(GlIcon).props('name')).toBe('clock'); + expect(milestone.find(GlLink).attributes('href')).toBe(issue.milestone.webPath); + }); + + describe.each` + time | text | milestoneDueDate | milestoneStartDate | expected + ${'due date is in past'} | ${'Past due'} | ${'2020-09-09'} | ${null} | ${'Sep 9, 2020 (Past due)'} + ${'due date is today'} | ${'Today'} | ${'2020-12-11'} | ${null} | ${'Dec 11, 2020 (Today)'} + ${'start date is in future'} | ${'Upcoming'} | ${'2021-03-01'} | ${'2021-02-01'} | ${'Mar 1, 2021 (Upcoming)'} + ${'due date is in future'} | ${'2 weeks remaining'} | ${'2020-12-25'} | ${null} | ${'Dec 25, 2020 (2 weeks remaining)'} + `('when $description', ({ text, milestoneDueDate, milestoneStartDate, expected }) => { + it(`renders with "${text}"`, () => { + wrapper = mountComponent({ milestoneDueDate, milestoneStartDate }); + + expect(findMilestoneTitle()).toBe(expected); + }); + }); + }); + + describe('due date', () => { + describe('when upcoming', () => { + it('renders', () => { + wrapper = mountComponent(); + + const dueDate = findDueDate(); + + expect(dueDate.text()).toBe('Dec 12, 2020'); + expect(dueDate.attributes('title')).toBe('Due date'); + expect(dueDate.find(GlIcon).props('name')).toBe('calendar'); + expect(dueDate.classes()).not.toContain('gl-text-red-500'); + }); + }); + + describe('when in the past', () => { + describe('when issue is open', () => { + it('renders in red', () => { + wrapper = mountComponent({ dueDate: new Date('2020-10-10') }); + + expect(findDueDate().classes()).toContain('gl-text-red-500'); + }); + }); + + describe('when issue is closed', () => { + it('does not render in red', () => { + wrapper = mountComponent({ + dueDate: new Date('2020-10-10'), + closedAt: '2020-09-05T13:06:25Z', + }); + + expect(findDueDate().classes()).not.toContain('gl-text-red-500'); + }); + }); + }); + }); + + it('renders time estimate', () => { + wrapper = mountComponent(); + + const timeEstimate = wrapper.find('[data-testid="time-estimate"]'); + + expect(timeEstimate.text()).toBe(issue.humanTimeEstimate); + expect(timeEstimate.attributes('title')).toBe('Estimate'); + expect(timeEstimate.find(GlIcon).props('name')).toBe('timer'); + }); +}); |