@mekari/mekari-ui-vue/src/components/FormFile/index.spec.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import MFormFile from './index.vue';
import { shallowMount } from '@vue/test-utils';


describe('Mekari UI Form File Input Component', () => {
  let wrapper;

  const initWrapper = props =>
    shallowMount(MFormFile, {
      propsData: {
        ...props,
      },
    });

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

  it('should match snapshot', () => {
    wrapper = initWrapper();
    expect(wrapper.element).toMatchSnapshot();
  });

  describe('should be able to get file from form input file', () => {
    const mockFile = new File(['file'], 'file.pdf', { type: 'pdf' });
    const mockEvent = { target: { files: [mockFile] } };
    const readAsDataURLSpy = jest.spyOn(FileReader.prototype, 'readAsDataURL');
    const mOnloadEvent = { target: { result: 'file result' } };
    it('should emit the file result (base64) when props emitAsFile set to false', async () => {
      wrapper = initWrapper();
      const fileHandler = wrapper.vm.fileChanged(mockEvent);
      fileHandler.onload(mOnloadEvent);
      expect(readAsDataURLSpy).toBeCalledWith(mockFile);
      expect(wrapper.emitted('change')[0][0]).toBe('file result');
      expect(wrapper.emitted('input')[0][0]).toBe('file result');

      await wrapper.vm.$nextTick();
      expect(wrapper.findComponent({ ref: 'fileInputLabel' }).text()).toBe('file.pdf');
    });

    it('should emit the file object itself when props emitAsFile set to true', async () => {
      wrapper = initWrapper({ emitAsFile: true });
      const fileHandler = wrapper.vm.fileChanged(mockEvent);
      fileHandler.onload(mOnloadEvent);
      expect(readAsDataURLSpy).toBeCalledWith(mockFile);
      expect(wrapper.emitted('change')[0][0]).toEqual(mockFile);
      expect(wrapper.emitted('input')[0][0]).toEqual(mockFile);

      await wrapper.vm.$nextTick();
      expect(wrapper.findComponent({ ref: 'fileInputLabel' }).text()).toBe('file.pdf');
    });
  });

  it('should emit change and input with null if selected file is empty after selecting file', async () => {
    wrapper = initWrapper();
    wrapper.findComponent({ ref: 'formFileInput' }).trigger('change');

    expect(wrapper.emitted('change')[0][0]).toEqual(null);
    expect(wrapper.emitted('input')[0][0]).toEqual(null);
  });

  it('should emit change and input with null if reset icon is clicked', async () => {
    wrapper = initWrapper();
    wrapper.findComponent({ ref: 'resetIcon' }).trigger('click');

    expect(wrapper.emitted('change')[0][0]).toEqual(null);
    expect(wrapper.emitted('input')[0][0]).toEqual(null);
  });

  describe('should be able handle multiple file', () => {
    const mockFile = [
      new File(['file1'], 'file1.pdf', { type: 'pdf' }),
      new File(['file2'], 'file2.pdf', { type: 'pdf' }),
    ];
    const mockEvent = { target: { files: [...mockFile] } };
    it('should show all files with their name correctly after select multiple file', async () => {
      wrapper = initWrapper({
        multiple: true,
      });
      wrapper.vm.fileChanged(mockEvent);
      await wrapper.vm.$nextTick();

      expect(wrapper.emitted('change')[0][0]).toEqual(mockFile);
      expect(wrapper.emitted('input')[0][0]).toEqual(mockFile);

      const fileListWrappers = wrapper.findAllComponents({ ref: 'fileListWrapper' });
      expect(fileListWrappers.length).toBe(2);
      expect(wrapper.findComponent({ ref: 'formFileInput' }).attributes('title')).toBe('2 files selected');

      const fileListNames = wrapper.findAll('.custom-multi-file-name');
      expect(fileListNames.at(0).text()).toBe('file1.pdf');
      expect(fileListNames.at(1).text()).toBe('file2.pdf');
    });

    it('should remove file from file list if the remove icon is clicked', async () => {
      wrapper = initWrapper({
        multiple: true,
      });
      wrapper.vm.fileChanged(mockEvent);
      await wrapper.vm.$nextTick();

      wrapper.find('.custom-multi-file-reset-icon').trigger('click');
      await wrapper.vm.$nextTick();

      let fileListWrappers = wrapper.findAllComponents({ ref: 'fileListWrapper' });
      expect(fileListWrappers.length).toBe(1);
      expect(wrapper.findComponent({ ref: 'formFileInput' }).attributes('title')).toBe('1 file selected');
      expect(wrapper.emitted('change')[1][0]).toEqual([mockFile[1]]);
      expect(wrapper.emitted('input')[1][0]).toEqual([mockFile[1]]);

      wrapper.find('.custom-multi-file-reset-icon').trigger('click');
      await wrapper.vm.$nextTick();

      fileListWrappers = wrapper.findAllComponents({ ref: 'fileListWrapper' });
      expect(fileListWrappers.length).toBe(0);
      expect(wrapper.findComponent({ ref: 'formFileInput' }).attributes('title')).toBe('No file selected');
      expect(wrapper.emitted('change')[2][0]).toEqual([]);
      expect(wrapper.emitted('input')[2][0]).toEqual([]);
    });
  });
});