spec/frontend/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab_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 UploadImageTab from '~/vue_shared/components/rich_content_editor/modals/add_image/upload_image_tab.vue';

describe('Upload Image Tab', () => {
  let wrapper;

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

  afterEach(() => wrapper.destroy());

  const triggerInputEvent = (size) => {
    const file = { size, name: 'file-name.png' };
    const mockEvent = new Event('input');

    Object.defineProperty(mockEvent, 'target', { value: { files: [file] } });

    wrapper.find({ ref: 'fileInput' }).element.dispatchEvent(mockEvent);

    return file;
  };

  describe('onInput', () => {
    it.each`
      size          | fileError
      ${2000000000} | ${'Maximum file size is 2MB. Please select a smaller file.'}
      ${200}        | ${null}
    `('validates the file correctly', ({ size, fileError }) => {
      triggerInputEvent(size);

      expect(wrapper.vm.fileError).toBe(fileError);
    });
  });

  it('emits input event when file is valid', () => {
    const file = triggerInputEvent(200);

    expect(wrapper.emitted('input')).toEqual([[file]]);
  });
});