import { MovementData, ScanView } from '@3cr/types-ts';
import { DOMWrapper, mount } from '@vue/test-utils';
import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
import { useViewer3cr } from '@/composables/useViewer3cr';

describe('ZoomAction tests', () => {
  const viewer3cr = useViewer3cr();
  const props = { view: ScanView.Sagittal, percentage: 25 };

  const zoomInSpy = vi.spyOn(viewer3cr, 'zoomIn');
  const zoomOutSpy = vi.spyOn(viewer3cr, 'zoomOut');

  it('should zoom in', async () => {
    const wrapper = mount(ZoomAction, { props });
    const button = wrapper.findComponentByTestId('button');
    await button.trigger('click');

    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
    const zoomIn = menu.findComponentByTestId('zoom-in');
    await zoomIn.trigger('click');
    const message: MovementData = {
      Version: '0.0.0',
      View: props.view,
      Movement: props.percentage
    };
    expect(zoomInSpy).toHaveBeenCalledWith({ message });
  });

  it('should zoom out', async () => {
    // variable declaration
    const wrapper = mount(ZoomAction, { props });
    const button = wrapper.findComponentByTestId('button');
    await button.trigger('click');
    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
    const zoomOut = menu.findComponentByTestId('zoom-out');
    //execution 2
    await zoomOut.trigger('click');
    //check in of values
    const message: MovementData = {
      Version: '0.0.0',
      View: props.view,
      Movement: props.percentage
    };
    expect(zoomOutSpy).toHaveBeenCalledWith({ message });
  });
});