import AnnotationCreateModal from '@/components/navigation/annotation/AnnotationCreateModal.vue';
import AnnotationCreateSnackbar from '@/components/navigation/annotation/AnnotationCreateSnackbar.vue';
import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
import { mount } from '@vue/test-utils';
import { VCard, VOverlay } from 'vuetify/components';

describe('MaskIcon tests', () => {
  const annotation = DataOverlayAnnotationFaker.random();

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

  it('should mount open', () => {
    const props = { annotation, modelValue: true };
    const wrapper = mount(AnnotationCreateModal, { props });
    expect(wrapper).toBeTruthy();
    expect(wrapper.findComponent(VCard).exists()).toBe(true);
  });

  it('should mount open and open createsnack', async () => {
    const props = { annotation, modelValue: true };
    const wrapper = mount(AnnotationCreateModal, { props });
    expect(wrapper).toBeTruthy();
    const snack = wrapper.findComponent(AnnotationCreateSnackbar);

    expect(snack.isVisible()).toBe(true);
    expect(wrapper.vm.s_annotationCreate).toBeFalsy();

    await snack.setValue(true);

    expect(wrapper.vm.s_annotationCreate).toBeTruthy();
  });

  it('should Update overlay', async () => {
    const props = { annotation, modelValue: false };
    const wrapper = mount(AnnotationCreateModal, { props });
    const overlay = wrapper.findComponent(VOverlay);

    await overlay.setValue(true);

    expect(overlay.isVisible()).toBeTruthy();
  });

  it('should submit form', async () => {
    const props = { annotation, modelValue: false };
    const wrapper = mount(AnnotationCreateModal, { props });
    const overlay = wrapper.findComponent(VOverlay);

    await overlay.setValue(true);

    const btn = wrapper.findComponentByTestId('submit-btn');

    await btn.trigger('click');

    expect(overlay.isVisible()).toBeTruthy();
  });
});