1 files changed, 48 insertions, 18 deletions

diff --git a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
index b7cbd875497..be3236d1f9c 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
@@ -3,6 +3,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import Component from '~/packages_and_registries/dependency_proxy/components/manifest_row.vue';
+import { MANIFEST_PENDING_DESTRUCTION_STATUS } from '~/packages_and_registries/dependency_proxy/constants';
 import { proxyManifests } from 'jest/packages_and_registries/dependency_proxy/mock_data';
 
 describe('Manifest Row', () => {
@@ -26,34 +27,63 @@ describe('Manifest Row', () => {
   const findListItem = () => wrapper.findComponent(ListItem);
   const findCachedMessages = () => wrapper.findByTestId('cached-message');
   const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip);
-
-  beforeEach(() => {
-    createComponent();
-  });
+  const findStatus = () => wrapper.findByTestId('status');
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('has a list item', () => {
-    expect(findListItem().exists()).toBe(true);
-  });
+  describe('With a manifest on the DEFAULT status', () => {
+    beforeEach(() => {
+      createComponent();
+    });
 
-  it('displays the name', () => {
-    expect(wrapper.text()).toContain('alpine');
-  });
+    it('has a list item', () => {
+      expect(findListItem().exists()).toBe(true);
+    });
 
-  it('displays the version', () => {
-    expect(wrapper.text()).toContain('latest');
-  });
+    it('displays the name', () => {
+      expect(wrapper.text()).toContain('alpine');
+    });
 
-  it('displays the cached time', () => {
-    expect(findCachedMessages().text()).toContain('Cached');
+    it('displays the version', () => {
+      expect(wrapper.text()).toContain('latest');
+    });
+
+    it('displays the cached time', () => {
+      expect(findCachedMessages().text()).toContain('Cached');
+    });
+
+    it('has a time ago tooltip component', () => {
+      expect(findTimeAgoTooltip().props()).toMatchObject({
+        time: defaultProps.manifest.createdAt,
+      });
+    });
+
+    it('does not have a status element displayed', () => {
+      expect(findStatus().exists()).toBe(false);
+    });
   });
 
-  it('has a time ago tooltip component', () => {
-    expect(findTimeAgoTooltip().props()).toMatchObject({
-      time: defaultProps.manifest.createdAt,
+  describe('With a manifest on the PENDING_DESTRUCTION_STATUS', () => {
+    const pendingDestructionManifest = {
+      manifest: {
+        ...defaultProps.manifest,
+        status: MANIFEST_PENDING_DESTRUCTION_STATUS,
+      },
+    };
+
+    beforeEach(() => {
+      createComponent(pendingDestructionManifest);
+    });
+
+    it('has a list item', () => {
+      expect(findListItem().exists()).toBe(true);
+    });
+
+    it('has a status element displayed', () => {
+      expect(findStatus().exists()).toBe(true);
+      expect(findStatus().text()).toBe('Scheduled for deletion');
     });
   });
 });