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');
+  });
+});