1 files changed, 73 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/deprecated_modal_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_spec.js
new file mode 100644
index 00000000000..b9793ce2d80
--- /dev/null
+++ b/spec/frontend/vue_shared/components/deprecated_modal_spec.js
@@ -0,0 +1,73 @@
+import Vue from 'vue';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+
+const modalComponent = Vue.extend(DeprecatedModal);
+
+describe('DeprecatedModal', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    describe('without primaryButtonLabel', () => {
+      beforeEach(() => {
+        vm = mountComponent(modalComponent, {
+          primaryButtonLabel: null,
+        });
+      });
+
+      it('does not render a primary button', () => {
+        expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
+      });
+    });
+
+    describe('with id', () => {
+      describe('does not render a primary button', () => {
+        beforeEach(() => {
+          vm = mountComponent(modalComponent, {
+            id: 'my-modal',
+          });
+        });
+
+        it('assigns the id to the modal', () => {
+          expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull();
+        });
+
+        it('does not show the modal immediately', () => {
+          expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show');
+        });
+
+        it('does not show a backdrop', () => {
+          expect(vm.$el.querySelector('modal-backdrop')).toBeNull();
+        });
+      });
+    });
+
+    it('works with data-toggle="modal"', () => {
+      setFixtures(`
+        <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
+        <div id="modal-container"></div>
+      `);
+
+      const modalContainer = document.getElementById('modal-container');
+      const modalButton = document.getElementById('modal-button');
+      vm = mountComponent(
+        modalComponent,
+        {
+          id: 'my-modal',
+        },
+        modalContainer,
+      );
+      const modalElement = vm.$el.querySelector('#my-modal');
+
+      expect(modalElement).not.toHaveClass('show');
+
+      modalButton.click();
+
+      expect(modalElement).toHaveClass('show');
+    });
+  });
+});