import { DOMWrapper, flushPromises, mount } from '@vue/test-utils';
import { ScanView } from '@3cr/types-ts';
import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
import { cSlider, sSlider, tSlider } from '@/models/scanState';

describe('Slice3dAction tests', () => {
  it('should open slice menu', async () => {
    const props = { view: ScanView.Volume };
    const wrapper = mount(Slice3dAction, { props });
    const button = wrapper.findComponentByTestId('button');
    await button.trigger('click');
    const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
    expect(menu.exists()).toBeTruthy();
  });

  it('should set double-slider-selector model', async () => {
    const props = { view: ScanView.Volume };
    const wrapper = mount(Slice3dAction, { props });
    await wrapper.findByTestId('button').trigger('click');

    const sliders = wrapper.findAllComponents(DoubleSliderSelector);
    for (const slider of sliders) {
      await slider.setValue([40, 60]);
      await flushPromises();
    }

    expect(tSlider.value).toEqual([40, 60]);
    expect(sSlider.value).toEqual([40, 60]);
    expect(cSlider.value).toEqual([40, 60]);
  });
});