1 files changed, 23 insertions, 15 deletions

diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
index e8ddad2d8ca..af5723267f4 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
@@ -1,8 +1,8 @@
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue';
 import {
-  CLEANUP_TIMED_OUT_ERROR_MESSAGE,
   CLEANUP_STATUS_SCHEDULED,
   CLEANUP_STATUS_ONGOING,
   CLEANUP_STATUS_UNFINISHED,
@@ -17,12 +17,20 @@ describe('cleanup_status', () => {
 
   const findMainIcon = () => wrapper.findByTestId('main-icon');
   const findExtraInfoIcon = () => wrapper.findByTestId('extra-info');
+  const findPopover = () => wrapper.findComponent(GlPopover);
+
+  const cleanupPolicyHelpPage = helpPagePath(
+    'user/packages/container_registry/reduce_container_registry_storage.html',
+    { anchor: 'how-the-cleanup-policy-works' },
+  );
 
   const mountComponent = (propsData = { status: SCHEDULED_STATUS }) => {
     wrapper = shallowMountExtended(CleanupStatus, {
       propsData,
-      directives: {
-        GlTooltip: createMockDirective(),
+      stubs: {
+        GlLink,
+        GlPopover,
+        GlSprintf,
       },
     });
   };
@@ -43,7 +51,7 @@ describe('cleanup_status', () => {
       mountComponent({ status });
 
       expect(findMainIcon().exists()).toBe(visible);
-      expect(wrapper.text()).toBe(text);
+      expect(wrapper.text()).toContain(text);
     },
   );
 
@@ -53,12 +61,6 @@ describe('cleanup_status', () => {
 
       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', () => {
@@ -76,12 +78,18 @@ describe('cleanup_status', () => {
       },
     );
 
-    it(`has a tooltip`, () => {
-      mountComponent({ status: UNFINISHED_STATUS });
+    it(`has a popover with a learn more link and a time frame for the next run`, () => {
+      jest.spyOn(Date, 'now').mockImplementation(() => new Date('2063-04-04T00:42:00Z').getTime());
 
-      const tooltip = getBinding(findExtraInfoIcon().element, 'gl-tooltip');
+      mountComponent({
+        status: UNFINISHED_STATUS,
+        expirationPolicy: { next_run: '2063-04-08T01:44:03Z' },
+      });
 
-      expect(tooltip.value.title).toBe(CLEANUP_TIMED_OUT_ERROR_MESSAGE);
+      expect(findPopover().exists()).toBe(true);
+      expect(findPopover().text()).toContain('The cleanup will continue within 4 days. Learn more');
+      expect(findPopover().findComponent(GlLink).exists()).toBe(true);
+      expect(findPopover().findComponent(GlLink).attributes('href')).toBe(cleanupPolicyHelpPage);
     });
   });
 });