2 files changed, 101 insertions, 16 deletions

diff --git a/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js
new file mode 100644
index 00000000000..c89bb874a7f
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/list_page/cleanup_status_spec.js
@@ -0,0 +1,87 @@
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import CleanupStatus from '~/registry/explorer/components/list_page/cleanup_status.vue';
+import {
+  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+  CLEANUP_STATUS_SCHEDULED,
+  CLEANUP_STATUS_ONGOING,
+  CLEANUP_STATUS_UNFINISHED,
+  UNFINISHED_STATUS,
+  UNSCHEDULED_STATUS,
+  SCHEDULED_STATUS,
+  ONGOING_STATUS,
+} from '~/registry/explorer/constants';
+
+describe('cleanup_status', () => {
+  let wrapper;
+
+  const findMainIcon = () => wrapper.findByTestId('main-icon');
+  const findExtraInfoIcon = () => wrapper.findByTestId('extra-info');
+
+  const mountComponent = (propsData = { status: SCHEDULED_STATUS }) => {
+    wrapper = shallowMountExtended(CleanupStatus, {
+      propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    status                | visible  | text
+    ${UNFINISHED_STATUS}  | ${true}  | ${CLEANUP_STATUS_UNFINISHED}
+    ${SCHEDULED_STATUS}   | ${true}  | ${CLEANUP_STATUS_SCHEDULED}
+    ${ONGOING_STATUS}     | ${true}  | ${CLEANUP_STATUS_ONGOING}
+    ${UNSCHEDULED_STATUS} | ${false} | ${''}
+  `(
+    'when the status is $status is $visible that the component is mounted and has the correct text',
+    ({ status, visible, text }) => {
+      mountComponent({ status });
+
+      expect(findMainIcon().exists()).toBe(visible);
+      expect(wrapper.text()).toBe(text);
+    },
+  );
+
+  describe('main icon', () => {
+    it('exists', () => {
+      mountComponent();
+
+      expect(findMainIcon().exists()).toBe(true);
+    });
+
+    it(`has the orange class when the status is ${UNFINISHED_STATUS}`, () => {
+      mountComponent({ status: UNFINISHED_STATUS });
+
+      expect(findMainIcon().classes('gl-text-orange-500')).toBe(true);
+    });
+  });
+
+  describe('extra info icon', () => {
+    it.each`
+      status               | visible
+      ${UNFINISHED_STATUS} | ${true}
+      ${SCHEDULED_STATUS}  | ${false}
+      ${ONGOING_STATUS}    | ${false}
+    `(
+      'when the status is $status is $visible that the extra icon is visible',
+      ({ status, visible }) => {
+        mountComponent({ status });
+
+        expect(findExtraInfoIcon().exists()).toBe(visible);
+      },
+    );
+
+    it(`has a tooltip`, () => {
+      mountComponent({ status: UNFINISHED_STATUS });
+
+      const tooltip = getBinding(findExtraInfoIcon().element, 'gl-tooltip');
+
+      expect(tooltip.value.title).toBe(ASYNC_DELETE_IMAGE_ERROR_MESSAGE);
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
index 323d7b177e7..db0f869ab52 100644
--- a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
@@ -3,15 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import DeleteButton from '~/registry/explorer/components/delete_button.vue';
+import CleanupStatus from '~/registry/explorer/components/list_page/cleanup_status.vue';
 import Component from '~/registry/explorer/components/list_page/image_list_row.vue';
 import {
   ROW_SCHEDULED_FOR_DELETION,
   LIST_DELETE_BUTTON_DISABLED,
   REMOVE_REPOSITORY_LABEL,
-  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
-  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
   IMAGE_DELETE_SCHEDULED_STATUS,
-  IMAGE_FAILED_DELETED_STATUS,
+  SCHEDULED_STATUS,
   ROOT_IMAGE_TEXT,
 } from '~/registry/explorer/constants';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -27,7 +26,7 @@ describe('Image List Row', () => {
   const findTagsCount = () => wrapper.find('[data-testid="tags-count"]');
   const findDeleteBtn = () => wrapper.findComponent(DeleteButton);
   const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
-  const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
+  const findCleanupStatus = () => wrapper.findComponent(CleanupStatus);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findListItemComponent = () => wrapper.findComponent(ListItem);
 
@@ -106,23 +105,22 @@ describe('Image List Row', () => {
       expect(button.props('title')).toBe(item.location);
     });
 
-    describe('warning icon', () => {
+    describe('cleanup status component', () => {
       it.each`
-        status                         | expirationPolicyStartedAt | shown    | title
-        ${IMAGE_FAILED_DELETED_STATUS} | ${true}                   | ${true}  | ${ASYNC_DELETE_IMAGE_ERROR_MESSAGE}
-        ${''}                          | ${true}                   | ${true}  | ${CLEANUP_TIMED_OUT_ERROR_MESSAGE}
-        ${''}                          | ${false}                  | ${false} | ${''}
+        expirationPolicyCleanupStatus | shown
+        ${null}                       | ${false}
+        ${SCHEDULED_STATUS}           | ${true}
       `(
-        'when status is $status and expirationPolicyStartedAt is $expirationPolicyStartedAt',
-        ({ expirationPolicyStartedAt, status, shown, title }) => {
-          mountComponent({ item: { ...item, status, expirationPolicyStartedAt } });
+        'when expirationPolicyCleanupStatus is $expirationPolicyCleanupStatus it is $shown that the component exists',
+        ({ expirationPolicyCleanupStatus, shown }) => {
+          mountComponent({ item: { ...item, expirationPolicyCleanupStatus } });
 
-          const icon = findWarningIcon();
-          expect(icon.exists()).toBe(shown);
+          expect(findCleanupStatus().exists()).toBe(shown);
 
           if (shown) {
-            const tooltip = getBinding(icon.element, 'gl-tooltip');
-            expect(tooltip.value.title).toBe(title);
+            expect(findCleanupStatus().props()).toMatchObject({
+              status: expirationPolicyCleanupStatus,
+            });
           }
         },
       );