import { flushPromises, mount } from '@vue/test-utils';
import McadDropZone from '@/components/navigation/mcad/McadDropZone.vue';
import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';

describe('McadDropZone tests', () => {
  const mcad = DataOverlayMcadFaker.random();
  const props = { mcad };

  beforeEach(() => {
    vi.restoreAllMocks();
  });

  it('should mount', () => {
    const wrapper = mount(McadDropZone, { props });
    expect(wrapper).toBeTruthy();
  });

  it('should registerEvents', async () => {
    const addEventListener = vi.fn();
    const spy = vi.spyOn(document, 'getElementById').mockReturnValue({
      addEventListener,
    } as any);
    const wrapper = mount(McadDropZone, { props });
    expect(wrapper).toBeTruthy();

    await flushPromises();
    expect(spy).toHaveBeenCalledTimes(2);

    // Each event we are listening for
    expect(addEventListener).toHaveBeenCalledTimes(18);
  });

  it('should call after registered', async () => {
    const addEventListener = vi
      .fn()
      .mockImplementation((event: any, listener: any) => {
        listener.handleEvent({
          preventDefault: vi.fn(),
          stopPropagation: vi.fn(),
          dataTransfer: {
            dropEffect: 'nonw',
          },
        });
      });

    const spy = vi.spyOn(document, 'getElementById').mockReturnValue({
      addEventListener,
    } as any);
    const wrapper = mount(McadDropZone, { props });
    expect(wrapper).toBeTruthy();

    await flushPromises();
    expect(spy).toHaveBeenCalledTimes(2);

    // Each event we are listening for
    expect(addEventListener).toHaveBeenCalledTimes(18);
  });

  it('should hover state', async () => {
    const addEventListener = vi
      .fn()
      .mockImplementation((event: any, listener: any) => {
        listener.handleEvent({
          preventDefault: vi.fn(),
          stopPropagation: vi.fn(),
          dataTransfer: {
            dropEffect: 'nonw',
          },
        });
      });

    vi.spyOn(document, 'getElementById').mockReturnValue({
      addEventListener,
    } as any);
    const wrapper = mount(McadDropZone, { props });
    expect(wrapper).toBeTruthy();

    await flushPromises();
    wrapper.vm.exposed.hover.value = true;
    await flushPromises();

    // Each event we are listening for
    expect(wrapper.html()).toContain('add');
    expect(wrapper.html()).toContain('texts.uploadHoverText');
  });

  it('should hover state', async () => {
    const addEventListener = vi
      .fn()
      .mockImplementation((event: any, listener: any) => {
        listener.handleEvent({
          preventDefault: vi.fn(),
          stopPropagation: vi.fn(),
          dataTransfer: {
            dropEffect: 'nonw',
          },
        });
      });

    vi.spyOn(document, 'getElementById').mockReturnValue({
      addEventListener,
    } as any);

    const wrapper = mount(McadDropZone);
    expect(wrapper).toBeTruthy();

    await flushPromises();
    wrapper.vm.exposed.dragOn.value = true;
    await flushPromises();

    // Each event we are listening for
    expect(wrapper.html()).toContain('texts.uploadDropText');
  });
});