1 files changed, 99 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js
new file mode 100644
index 00000000000..f75694bd504
--- /dev/null
+++ b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js
@@ -0,0 +1,99 @@
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import {
+  CONFIRM_DANGER_WARNING,
+  CONFIRM_DANGER_MODAL_BUTTON,
+  CONFIRM_DANGER_MODAL_ID,
+} from '~/vue_shared/components/confirm_danger/constants';
+import ConfirmDangerModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('Confirm Danger Modal', () => {
+  const confirmDangerMessage = 'This is a dangerous activity';
+  const confirmButtonText = 'Confirm button text';
+  const phrase = 'You must construct additional pylons';
+  const modalId = CONFIRM_DANGER_MODAL_ID;
+
+  let wrapper;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findConfirmationPhrase = () => wrapper.findByTestId('confirm-danger-phrase');
+  const findConfirmationInput = () => wrapper.findByTestId('confirm-danger-input');
+  const findDefaultWarning = () => wrapper.findByTestId('confirm-danger-warning');
+  const findAdditionalMessage = () => wrapper.findByTestId('confirm-danger-message');
+  const findPrimaryAction = () => findModal().props('actionPrimary');
+  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
+
+  const createComponent = ({ provide = {} } = {}) =>
+    shallowMountExtended(ConfirmDangerModal, {
+      propsData: {
+        modalId,
+        phrase,
+      },
+      provide,
+      stubs: { GlSprintf },
+    });
+
+  beforeEach(() => {
+    wrapper = createComponent({ provide: { confirmDangerMessage, confirmButtonText } });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the default warning message', () => {
+    expect(findDefaultWarning().text()).toBe(CONFIRM_DANGER_WARNING);
+  });
+
+  it('renders any additional messages', () => {
+    expect(findAdditionalMessage().text()).toBe(confirmDangerMessage);
+  });
+
+  it('renders the confirm button', () => {
+    expect(findPrimaryAction().text).toBe(confirmButtonText);
+    expect(findPrimaryActionAttributes('variant')).toBe('danger');
+  });
+
+  it('renders the correct confirmation phrase', () => {
+    expect(findConfirmationPhrase().text()).toBe(
+      `Please type ${phrase} to proceed or close this modal to cancel.`,
+    );
+  });
+
+  describe('without injected data', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('does not render any additional messages', () => {
+      expect(findAdditionalMessage().exists()).toBe(false);
+    });
+
+    it('renders the default confirm button', () => {
+      expect(findPrimaryAction().text).toBe(CONFIRM_DANGER_MODAL_BUTTON);
+    });
+  });
+
+  describe('with a valid confirmation phrase', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('enables the confirm button', async () => {
+      expect(findPrimaryActionAttributes('disabled')).toBe(true);
+
+      await findConfirmationInput().vm.$emit('input', phrase);
+
+      expect(findPrimaryActionAttributes('disabled')).toBe(false);
+    });
+
+    it('emits a `confirm` event when the button is clicked', async () => {
+      expect(wrapper.emitted('confirm')).toBeUndefined();
+
+      await findConfirmationInput().vm.$emit('input', phrase);
+      await findModal().vm.$emit('primary');
+
+      expect(wrapper.emitted('confirm')).not.toBeUndefined();
+    });
+  });
+});