1 files changed, 67 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js
new file mode 100644
index 00000000000..59d4e549a91
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js
@@ -0,0 +1,67 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+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"', (done) => {
+      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');
+      $(modalElement).on('shown.bs.modal', () => done());
+
+      modalButton.click();
+    });
+  });
+});