1 files changed, 48 insertions, 8 deletions
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index 70017903079..bb8c5dedddd 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -39,6 +39,8 @@ describe('IssuableItem', () => {
   const originalUrl = gon.gitlab_url;
   let wrapper;
 
+  const findTimestampWrapper = () => wrapper.find('[data-testid="issuable-timestamp"]');
+
   beforeEach(() => {
     gon.gitlab_url = MOCK_GITLAB_URL;
   });
@@ -150,12 +152,37 @@ describe('IssuableItem', () => {
       });
     });
 
-    describe('updatedAt', () => {
-      it('returns string containing timeago string based on `issuable.updatedAt`', () => {
+    describe('timestamp', () => {
+      it('returns string containing date and time based on `issuable.updatedAt` when the issue is open', () => {
+        wrapper = createComponent();
+
+        expect(findTimestampWrapper().attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      });
+
+      it('returns string containing timeago string based on `issuable.closedAt` when the issue is closed', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().attributes('title')).toBe('Jun 18, 2020 11:30am UTC');
+      });
+    });
+
+    describe('formattedTimestamp', () => {
+      it('returns string containing timeago string based on `issuable.updatedAt` when the issue is open', () => {
         wrapper = createComponent();
 
-        expect(wrapper.vm.updatedAt).toContain('updated');
-        expect(wrapper.vm.updatedAt).toContain('ago');
+        expect(findTimestampWrapper().text()).toContain('updated');
+        expect(findTimestampWrapper().text()).toContain('ago');
+      });
+
+      it('returns string containing timeago string based on `issuable.closedAt` when the issue is closed', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        expect(findTimestampWrapper().text()).toContain('closed');
+        expect(findTimestampWrapper().text()).toContain('ago');
       });
     });
 
@@ -456,18 +483,31 @@ describe('IssuableItem', () => {
     it('renders issuable updatedAt info', () => {
       wrapper = createComponent();
 
-      const updatedAtEl = wrapper.find('[data-testid="issuable-updated-at"]');
+      const timestampEl = wrapper.find('[data-testid="issuable-timestamp"]');
 
-      expect(updatedAtEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
-      expect(updatedAtEl.text()).toBe(wrapper.vm.updatedAt);
+      expect(timestampEl.attributes('title')).toBe('Sep 10, 2020 11:41am UTC');
+      expect(timestampEl.text()).toBe(wrapper.vm.formattedTimestamp);
     });
 
     describe('when issuable is closed', () => {
       it('renders issuable card with a closed style', () => {
-        wrapper = createComponent({ issuable: { ...mockIssuable, closedAt: '2020-12-10' } });
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2020-12-10', state: 'closed' },
+        });
 
         expect(wrapper.classes()).toContain('closed');
       });
+
+      it('renders issuable closedAt info and does not render updatedAt info', () => {
+        wrapper = createComponent({
+          issuable: { ...mockIssuable, closedAt: '2022-06-18T11:30:00Z', state: 'closed' },
+        });
+
+        const timestampEl = wrapper.find('[data-testid="issuable-timestamp"]');
+
+        expect(timestampEl.attributes('title')).toBe('Jun 18, 2022 11:30am UTC');
+        expect(timestampEl.text()).toBe(wrapper.vm.formattedTimestamp);
+      });
     });
 
     describe('when issuable was created within the past 24 hours', () => {