2 files changed, 68 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap b/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap
new file mode 100644
index 00000000000..2cded2ead2e
--- /dev/null
+++ b/spec/frontend/packages_and_registries/shared/components/__snapshots__/cleanup_policy_enabled_alert_spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CleanupPolicyEnabledAlert renders 1`] = `
+<gl-alert-stub
+  class="gl-mt-2"
+  dismissible="true"
+  dismisslabel="Dismiss"
+  primarybuttonlink=""
+  primarybuttontext=""
+  secondarybuttonlink=""
+  secondarybuttontext=""
+  title=""
+  variant="info"
+>
+  <gl-sprintf-stub
+    message="Cleanup policies are now available for this project. %{linkStart}Click here to get started.%{linkEnd}"
+  />
+</gl-alert-stub>
+`;
diff --git a/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js b/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js
new file mode 100644
index 00000000000..269e087f5ac
--- /dev/null
+++ b/spec/frontend/packages_and_registries/shared/components/cleanup_policy_enabled_alert_spec.js
@@ -0,0 +1,49 @@
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import component from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+
+describe('CleanupPolicyEnabledAlert', () => {
+  let wrapper;
+
+  const defaultProps = {
+    projectPath: 'foo',
+    cleanupPoliciesSettingsPath: 'label-bar',
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const mountComponent = (props) => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        LocalStorageSync,
+      },
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders', () => {
+    mountComponent();
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('when dismissed is not visible', async () => {
+    mountComponent();
+
+    expect(findAlert().exists()).toBe(true);
+    findAlert().vm.$emit('dismiss');
+
+    await nextTick();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+});