1 files changed, 23 insertions, 0 deletions
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 c5b4b3fa5d8..ce446e6d93e 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
@@ -9,6 +9,8 @@ import {
   ROW_SCHEDULED_FOR_DELETION,
   LIST_DELETE_BUTTON_DISABLED,
   REMOVE_REPOSITORY_LABEL,
+  ASYNC_DELETE_IMAGE_ERROR_MESSAGE,
+  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
 } from '~/registry/explorer/constants';
 import { RouterLink } from '../../stubs';
 import { imagesListResponse } from '../../mock_data';
@@ -21,6 +23,7 @@ describe('Image List Row', () => {
   const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]');
   const findDeleteBtn = () => wrapper.find(DeleteButton);
   const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findWarningIcon = () => wrapper.find('[data-testid="warning-icon"]');
 
   const mountComponent = props => {
     wrapper = shallowMount(Component, {
@@ -74,6 +77,26 @@ describe('Image List Row', () => {
       expect(button.props('text')).toBe(item.location);
       expect(button.props('title')).toBe(item.location);
     });
+
+    describe('warning icon', () => {
+      it.each`
+        failedDelete | cleanup_policy_started_at | shown    | title
+        ${true}      | ${true}                   | ${true}  | ${ASYNC_DELETE_IMAGE_ERROR_MESSAGE}
+        ${false}     | ${true}                   | ${true}  | ${CLEANUP_TIMED_OUT_ERROR_MESSAGE}
+        ${false}     | ${false}                  | ${false} | ${''}
+      `(
+        'when failedDelete is $failedDelete and cleanup_policy_started_at is $cleanup_policy_started_at',
+        ({ cleanup_policy_started_at, failedDelete, shown, title }) => {
+          mountComponent({ item: { ...item, failedDelete, cleanup_policy_started_at } });
+          const icon = findWarningIcon();
+          expect(icon.exists()).toBe(shown);
+          if (shown) {
+            const tooltip = getBinding(icon.element, 'gl-tooltip');
+            expect(tooltip.value.title).toBe(title);
+          }
+        },
+      );
+    });
   });
 
   describe('delete button', () => {