1 files changed, 116 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js
new file mode 100644
index 00000000000..e25162f4da5
--- /dev/null
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js
@@ -0,0 +1,116 @@
+import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import component from '~/packages_and_registries/container_registry/explorer/components/details_page/delete_alert.vue';
+import {
+  DELETE_TAG_SUCCESS_MESSAGE,
+  DELETE_TAG_ERROR_MESSAGE,
+  DELETE_TAGS_SUCCESS_MESSAGE,
+  DELETE_TAGS_ERROR_MESSAGE,
+  ADMIN_GARBAGE_COLLECTION_TIP,
+} from '~/packages_and_registries/container_registry/explorer/constants';
+
+describe('Delete alert', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.find(GlAlert);
+  const findLink = () => wrapper.find(GlLink);
+
+  const mountComponent = (propsData) => {
+    wrapper = shallowMount(component, { stubs: { GlSprintf }, propsData });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when deleteAlertType is null', () => {
+    it('does not show the alert', () => {
+      mountComponent();
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('when deleteAlertType is not null', () => {
+    describe('success states', () => {
+      describe.each`
+        deleteAlertType   | message
+        ${'success_tag'}  | ${DELETE_TAG_SUCCESS_MESSAGE}
+        ${'success_tags'} | ${DELETE_TAGS_SUCCESS_MESSAGE}
+      `('when deleteAlertType is $deleteAlertType', ({ deleteAlertType, message }) => {
+        it('alert exists', () => {
+          mountComponent({ deleteAlertType });
+          expect(findAlert().exists()).toBe(true);
+        });
+
+        describe('when the user is an admin', () => {
+          beforeEach(() => {
+            mountComponent({
+              deleteAlertType,
+              isAdmin: true,
+              garbageCollectionHelpPagePath: 'foo',
+            });
+          });
+
+          it(`alert title is ${message}`, () => {
+            expect(findAlert().attributes('title')).toBe(message);
+          });
+
+          it('alert body contains admin tip', () => {
+            expect(findAlert().text()).toMatchInterpolatedText(ADMIN_GARBAGE_COLLECTION_TIP);
+          });
+
+          it('alert body contains link', () => {
+            const alertLink = findLink();
+            expect(alertLink.exists()).toBe(true);
+            expect(alertLink.attributes('href')).toBe('foo');
+          });
+        });
+
+        describe('when the user is not an admin', () => {
+          it('alert exist and text is appropriate', () => {
+            mountComponent({ deleteAlertType });
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(message);
+          });
+        });
+      });
+    });
+    describe('error states', () => {
+      describe.each`
+        deleteAlertType  | message
+        ${'danger_tag'}  | ${DELETE_TAG_ERROR_MESSAGE}
+        ${'danger_tags'} | ${DELETE_TAGS_ERROR_MESSAGE}
+      `('when deleteAlertType is $deleteAlertType', ({ deleteAlertType, message }) => {
+        it('alert exists', () => {
+          mountComponent({ deleteAlertType });
+          expect(findAlert().exists()).toBe(true);
+        });
+
+        describe('when the user is an admin', () => {
+          it('alert exist and text is appropriate', () => {
+            mountComponent({ deleteAlertType });
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(message);
+          });
+        });
+
+        describe('when the user is not an admin', () => {
+          it('alert exist and text is appropriate', () => {
+            mountComponent({ deleteAlertType });
+            expect(findAlert().exists()).toBe(true);
+            expect(findAlert().text()).toBe(message);
+          });
+        });
+      });
+    });
+
+    describe('dismissing alert', () => {
+      it('GlAlert dismiss event triggers a change event', () => {
+        mountComponent({ deleteAlertType: 'success_tags' });
+        findAlert().vm.$emit('dismiss');
+        expect(wrapper.emitted('change')).toEqual([[null]]);
+      });
+    });
+  });
+});