spec/frontend/vue_shared/components/rich_content_editor/modals/add_image_modal_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { shallowMount } from '@vue/test-utils';
import { GlModal } from '@gitlab/ui';
import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image_modal.vue';

describe('Add Image Modal', () => {
  let wrapper;

  const findModal = () => wrapper.find(GlModal);
  const findUrlInput = () => wrapper.find({ ref: 'urlInput' });
  const findDescriptionInput = () => wrapper.find({ ref: 'descriptionInput' });

  beforeEach(() => {
    wrapper = shallowMount(AddImageModal);
  });

  describe('when content is loaded', () => {
    it('renders a modal component', () => {
      expect(findModal().exists()).toBe(true);
    });

    it('renders an input to add an image URL', () => {
      expect(findUrlInput().exists()).toBe(true);
    });

    it('renders an input to add an image description', () => {
      expect(findDescriptionInput().exists()).toBe(true);
    });
  });

  describe('add image', () => {
    it('emits an addImage event when a valid URL is specified', () => {
      const preventDefault = jest.fn();
      const mockImage = { imageUrl: '/some/valid/url.png', altText: 'some description' };
      wrapper.setData({ ...mockImage });

      findModal().vm.$emit('ok', { preventDefault });
      expect(preventDefault).not.toHaveBeenCalled();
      expect(wrapper.emitted('addImage')).toEqual([[mockImage]]);
    });
  });
});