1 files changed, 44 insertions, 0 deletions
diff --git a/spec/frontend/static_site_editor/rich_content_editor/modals/insert_video_modal_spec.js b/spec/frontend/static_site_editor/rich_content_editor/modals/insert_video_modal_spec.js
new file mode 100644
index 00000000000..392d31bf039
--- /dev/null
+++ b/spec/frontend/static_site_editor/rich_content_editor/modals/insert_video_modal_spec.js
@@ -0,0 +1,44 @@
+import { GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import InsertVideoModal from '~/static_site_editor/rich_content_editor/modals/insert_video_modal.vue';
+
+describe('Insert Video Modal', () => {
+  let wrapper;
+
+  const findModal = () => wrapper.find(GlModal);
+  const findUrlInput = () => wrapper.find({ ref: 'urlInput' });
+
+  const triggerInsertVideo = (url) => {
+    const preventDefault = jest.fn();
+    findUrlInput().vm.$emit('input', url);
+    findModal().vm.$emit('primary', { preventDefault });
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMount(InsertVideoModal);
+  });
+
+  afterEach(() => wrapper.destroy());
+
+  describe('when content is loaded', () => {
+    it('renders a modal component', () => {
+      expect(findModal().exists()).toBe(true);
+    });
+
+    it('renders an input to add a URL', () => {
+      expect(findUrlInput().exists()).toBe(true);
+    });
+  });
+
+  describe('insert video', () => {
+    it.each`
+      url                                       | emitted
+      ${'https://www.youtube.com/embed/someId'} | ${[['https://www.youtube.com/embed/someId']]}
+      ${'https://www.youtube.com/watch?v=1234'} | ${[['https://www.youtube.com/embed/1234']]}
+      ${'::youtube.com/invalid/url'}            | ${undefined}
+    `('formats the url correctly', ({ url, emitted }) => {
+      triggerInsertVideo(url);
+      expect(wrapper.emitted('insertVideo')).toEqual(emitted);
+    });
+  });
+});