1 files changed, 152 insertions, 0 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js
new file mode 100644
index 00000000000..16c9485e69e
--- /dev/null
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js
@@ -0,0 +1,152 @@
+import { GlSprintf, GlFormInput } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import component from '~/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue';
+import {
+  REMOVE_TAG_CONFIRMATION_TEXT,
+  REMOVE_TAGS_CONFIRMATION_TEXT,
+  DELETE_IMAGE_CONFIRMATION_TITLE,
+  DELETE_IMAGE_CONFIRMATION_TEXT,
+} from '~/packages_and_registries/container_registry/explorer/constants';
+import { GlModal } from '../../stubs';
+
+describe('Delete Modal', () => {
+  let wrapper;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findDescription = () => wrapper.find('[data-testid="description"]');
+  const findInputComponent = () => wrapper.findComponent(GlFormInput);
+
+  const mountComponent = (propsData) => {
+    wrapper = shallowMount(component, {
+      propsData,
+      stubs: {
+        GlSprintf,
+        GlModal,
+      },
+    });
+  };
+
+  const expectPrimaryActionStatus = (disabled = true) =>
+    expect(findModal().props('actionPrimary')).toMatchObject(
+      expect.objectContaining({
+        attributes: [{ variant: 'danger' }, { disabled }],
+      }),
+    );
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('contains a GlModal', () => {
+    mountComponent();
+    expect(findModal().exists()).toBe(true);
+  });
+
+  describe('events', () => {
+    it.each`
+      glEvent      | localEvent
+      ${'primary'} | ${'confirmDelete'}
+      ${'cancel'}  | ${'cancelDelete'}
+    `('GlModal $glEvent emits $localEvent', ({ glEvent, localEvent }) => {
+      mountComponent();
+      findModal().vm.$emit(glEvent);
+      expect(wrapper.emitted(localEvent)).toEqual([[]]);
+    });
+  });
+
+  describe('methods', () => {
+    it('show calls gl-modal show', () => {
+      mountComponent();
+      wrapper.vm.show();
+      expect(GlModal.methods.show).toHaveBeenCalled();
+    });
+  });
+
+  describe('when we are deleting images', () => {
+    it('has the correct title', () => {
+      mountComponent({ deleteImage: true });
+
+      expect(wrapper.text()).toContain(DELETE_IMAGE_CONFIRMATION_TITLE);
+    });
+
+    it('has the correct description', () => {
+      mountComponent({ deleteImage: true });
+
+      expect(wrapper.text()).toContain(
+        DELETE_IMAGE_CONFIRMATION_TEXT.replace('%{code}', '').trim(),
+      );
+    });
+
+    describe('delete button', () => {
+      const itemsToBeDeleted = [{ project: { path: 'foo' } }];
+
+      it('is disabled by default', () => {
+        mountComponent({ deleteImage: true });
+
+        expectPrimaryActionStatus();
+      });
+
+      it('if the user types something different from the project path is disabled', async () => {
+        mountComponent({ deleteImage: true, itemsToBeDeleted });
+
+        findInputComponent().vm.$emit('input', 'bar');
+
+        await nextTick();
+
+        expectPrimaryActionStatus();
+      });
+
+      it('if the user types the project path it is enabled', async () => {
+        mountComponent({ deleteImage: true, itemsToBeDeleted });
+
+        findInputComponent().vm.$emit('input', 'foo');
+
+        await nextTick();
+
+        expectPrimaryActionStatus(false);
+      });
+    });
+  });
+
+  describe('when we are deleting tags', () => {
+    it('delete button is enabled', () => {
+      mountComponent();
+
+      expectPrimaryActionStatus(false);
+    });
+
+    describe('itemsToBeDeleted contains one element', () => {
+      beforeEach(() => {
+        mountComponent({ itemsToBeDeleted: [{ path: 'foo' }] });
+      });
+
+      it(`has the correct description`, () => {
+        expect(findDescription().text()).toBe(
+          REMOVE_TAG_CONFIRMATION_TEXT.replace('%{item}', 'foo'),
+        );
+      });
+
+      it('has the correct title', () => {
+        expect(wrapper.text()).toContain('Remove tag');
+      });
+    });
+
+    describe('itemsToBeDeleted contains more than element', () => {
+      beforeEach(() => {
+        mountComponent({ itemsToBeDeleted: [{ path: 'foo' }, { path: 'bar' }] });
+      });
+
+      it(`has the correct description`, () => {
+        expect(findDescription().text()).toBe(
+          REMOVE_TAGS_CONFIRMATION_TEXT.replace('%{item}', '2'),
+        );
+      });
+
+      it('has the correct title', () => {
+        expect(wrapper.text()).toContain('Remove tags');
+      });
+    });
+  });
+});