@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/modal/__tests__/MftpWebGL3DRModal.spec.ts

@@ -1,15 +1,14 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { mountVuetify, shallowMountVuetify } from "~/helper";
-import { inflateInitialScanState, inflateScanState } from "@/helpers/modelHelper";
+import { inflateInitialScanState, inflateScanState } from '@/functions/modelHelper';
 import {
   AnchorPoint,
   FrontEndInterfaces,
+  LayoutActions,
   PositionData,
   ScanMovementActions,
-  SlidersActions,
-} from "@3cr/types-ts";
-import { flushPromises } from "@vue/test-utils";
-import { spyOn } from "@vitest/spy";
+  SlidersActions
+} from '@3cr/types-ts';
+import { flushPromises, mount } from '@vue/test-utils';
+import { spyOn } from '@vitest/spy';
 import {
   cSlider,
   currentGreyscalePreset,
@@ -18,220 +17,198 @@ import {
   setInitialScanStateFromPayload,
   setScanState,
   sSlider,
+  thresholdSlider,
   transactionStarted,
   tSlider,
-} from "@/dataLayer/scanState";
-import { unref } from "vue";
-import { isDemo } from "@/components/demo/options";
-import { Viewer3cr } from "@/dataLayer/viewer3cr";
-import MftpWebGL3DRModal from "../MftpWebGL3DRModal.vue";
-import { VDialog } from "vuetify/components";
-
-vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
-  const mod = (await importOriginal()) as object;
-  return {
-    ...mod,
-    useNotification: vi.fn().mockReturnValue({
-      notify: vi.fn(),
-    }),
-  };
+  windowSlider
+} from '@/models/scanState';
+import { defineComponent, onMounted, ref, unref } from 'vue';
+import { isDemo } from '@/components/demo/options';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import MftpWebGL3DRModal from '../MftpWebGL3DRModal.vue';
+import { VBtn, VDialog } from 'vuetify/components';
+import SettingsMenu from '@/components/modal/menus/SettingsMenu.vue';
+
+let spy = spyOn(Viewer3crService.prototype, 'sendPayload').mockResolvedValue();
+
+const app = defineComponent({
+  template: '<v-app><MftpWebGL3DRModal ref="webgl"></MftpWebGL3DRModal></v-app>',
+  components: { MftpWebGL3DRModal },
+  setup() {
+    const webgl = ref<typeof MftpWebGL3DRModal>();
+    onMounted(() => webgl.value!.alterValue(true));
+    return { webgl };
+  }
 });
 
-let spy = spyOn(Viewer3cr.prototype, "sendPayload").mockResolvedValue();
-
-describe("MftpWebGL3DRModal.vue", () => {
-  let wrapper = shallowMountVuetify(MftpWebGL3DRModal);
+describe('MftpWebGL3DRModal tests', () => {
+  let wrapper = mount(app, { global: { stubs: ['WebGL3DR'] } });
 
   beforeEach(() => {
     transactionStarted.value = false;
-    spy = spyOn(Viewer3cr.prototype, "sendPayload").mockResolvedValue();
-    wrapper = shallowMountVuetify( MftpWebGL3DRModal);
-    vi.useFakeTimers();
+    spy = spyOn(Viewer3crService.prototype, 'sendPayload').mockResolvedValue();
+    wrapper = mount(app, { global: { stubs: ['WebGL3DR'] } });
   });
 
   afterEach(() => {
-    vi.useRealTimers();
     isDemo.value = false;
+    wrapper.unmount();
   });
 
-  it("inflates", () => {
+  it('inflates', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  describe("watchers", () => {
-    it("scanState.value.Display.Brightness", async () => {
-      await testWatcherForDisplay("Brightness", SlidersActions.sl01);
+  describe('watchers', () => {
+    it('scanState.value.Display.Brightness', async () => {
+      await testWatcherForDisplay('Brightness', SlidersActions.sl01);
     });
 
-    it("scanState.value.Display.Contrast", async () => {
-      await testWatcherForDisplay("Contrast", SlidersActions.sl02);
+    it('scanState.value.Display.Contrast', async () => {
+      await testWatcherForDisplay('Contrast', SlidersActions.sl02);
     });
 
-    it("scanState.value.Display.Opacity", async () => {
-      await testWatcherForDisplay("Opacity", SlidersActions.sl03);
+    it('scanState.value.Display.Opacity', async () => {
+      await testWatcherForDisplay('Opacity', SlidersActions.sl03);
     });
 
-    it("scanState.value.Display.WindowLower", async () => {
-      await testWatcherForDisplay("WindowLower", SlidersActions.sl04);
+    it('scanState.value.Display.WindowLower', async () => {
+      await testWatcherForDisplay('WindowLower', SlidersActions.sl04);
     });
 
-    it("scanState.value.Display.WindowUpper", async () => {
-      await testWatcherForDisplay("WindowUpper", SlidersActions.sl05);
+    it('scanState.value.Display.WindowUpper', async () => {
+      await testWatcherForDisplay('WindowUpper', SlidersActions.sl05);
     });
 
-    it("scanState.value.Display.ThresholdLower", async () => {
-      await testWatcherForDisplay("ThresholdLower", SlidersActions.sl06);
+    it('scanState.value.Display.ThresholdLower', async () => {
+      await testWatcherForDisplay('ThresholdLower', SlidersActions.sl06);
     });
 
-    it("scanState.value.Display.ThresholdUpper", async () => {
-      await testWatcherForDisplay("ThresholdUpper", SlidersActions.sl07);
+    it('scanState.value.Display.ThresholdUpper', async () => {
+      await testWatcherForDisplay('ThresholdUpper', SlidersActions.sl07);
     });
 
-    it("scanState.value.Slice.TransverseLower", async () => {
-      await testWatcherForSlice("TransverseLower", SlidersActions.sl08);
+    it('scanState.value.Slice.TransverseLower', async () => {
+      await testWatcherForSlice('TransverseLower', SlidersActions.sl08);
     });
 
-    it("scanState.value.Orientations.Transverse.Slice", async () => {
-      await testWatcherForOrientation("Transverse", SlidersActions.sl09);
+    it('scanState.value.Orientations.Transverse.Slice', async () => {
+      await testWatcherForOrientation('Transverse', SlidersActions.sl09);
     });
 
-    it("scanState.value.Slice.TransverseUpper", async () => {
-      await testWatcherForSlice("TransverseUpper", SlidersActions.sl10);
+    it('scanState.value.Slice.TransverseUpper', async () => {
+      await testWatcherForSlice('TransverseUpper', SlidersActions.sl10);
     });
 
-    it("scanState.value.Slice.SagittalLower", async () => {
-      await testWatcherForSlice("SagittalLower", SlidersActions.sl11);
+    it('scanState.value.Slice.SagittalLower', async () => {
+      await testWatcherForSlice('SagittalLower', SlidersActions.sl11);
     });
 
-    it("scanState.value.Orientations.Sagittal.Slice", async () => {
-      await testWatcherForOrientation("Sagittal", SlidersActions.sl12);
+    it('scanState.value.Orientations.Sagittal.Slice', async () => {
+      await testWatcherForOrientation('Sagittal', SlidersActions.sl12);
     });
 
-    it("scanState.value.Slice.SagittalUpper", async () => {
-      await testWatcherForSlice("SagittalUpper", SlidersActions.sl13);
+    it('scanState.value.Slice.SagittalUpper', async () => {
+      await testWatcherForSlice('SagittalUpper', SlidersActions.sl13);
     });
 
-    it("scanState.value.Slice.CoronalLower", async () => {
-      await testWatcherForSlice("CoronalLower", SlidersActions.sl14);
+    it('scanState.value.Slice.CoronalLower', async () => {
+      await testWatcherForSlice('CoronalLower', SlidersActions.sl14);
     });
 
-    it("scanState.value.Orientations.Coronal.Slice", async () => {
-      await testWatcherForOrientation("Coronal", SlidersActions.sl15);
+    it('scanState.value.Orientations.Coronal.Slice', async () => {
+      await testWatcherForOrientation('Coronal', SlidersActions.sl15);
     });
 
-    it("scanState.value.Slice.CoronalUpper", async () => {
-      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16);
+    it('scanState.value.Slice.CoronalUpper', async () => {
+      await testWatcherForSlice('CoronalUpper', SlidersActions.sl16);
     });
 
-    it("scanState.value.Slice.CoronalUpper transaction disabled", async () => {
+    it('scanState.value.Slice.CoronalUpper transaction disabled', async () => {
       transactionStarted.value = true;
-      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16, true);
+      await testWatcherForSlice('CoronalUpper', SlidersActions.sl16, true);
     });
 
-    it("scanState.value.InteractionSettings.PanSensivitity transaction disabled", async () => {
+    it('scanState.value.InteractionSettings.PanSensivitity transaction disabled', async () => {
       transactionStarted.value = true;
-      await testWatcherForInteractionSettings(
-        "PanSensivitity1",
-        ScanMovementActions.sm05,
-        true
-      );
+      await testWatcherForInteractionSettings('PanSensivitity1', ScanMovementActions.sm05, true);
     });
 
-    it("scanState.value.InteractionSettings.PanSensivitity", async () => {
-      await testWatcherForInteractionSettings(
-        "PanSensivitity",
-        ScanMovementActions.sm05
-      );
+    it('scanState.value.InteractionSettings.PanSensivitity', async () => {
+      await testWatcherForInteractionSettings('PanSensivitity', ScanMovementActions.sm05);
     });
 
-    it("scanState.value.InteractionSettings.ZoomSensitivity", async () => {
-      await testWatcherForInteractionSettings(
-        "ZoomSensitivity",
-        ScanMovementActions.sm08
-      );
+    it('scanState.value.InteractionSettings.ZoomSensitivity', async () => {
+      await testWatcherForInteractionSettings('ZoomSensitivity', ScanMovementActions.sm08);
     });
 
-    it("scanState.value.InteractionSettings.RotateSensitivity", async () => {
-      await testWatcherForInteractionSettings(
-        "RotateSensitivity",
-        ScanMovementActions.sm10
-      );
+    it('scanState.value.InteractionSettings.RotateSensitivity', async () => {
+      await testWatcherForInteractionSettings('RotateSensitivity', ScanMovementActions.sm10);
     });
 
-    it("scanState.value.InteractionSettings.CameraRotateSensitivity", async () => {
-      await testWatcherForInteractionSettings(
-        "CameraRotateSensitivity",
-        ScanMovementActions.sm12
-      );
+    it('scanState.value.InteractionSettings.CameraRotateSensitivity', async () => {
+      await testWatcherForInteractionSettings('CameraRotateSensitivity', ScanMovementActions.sm12);
     });
   });
 
-  it("watches scanState", () => {
+  it('watches scanState', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it("windowSlider should be set", () => {
-    expect(wrapper.vm.windowSlider).toStrictEqual([0, 100]);
-  });
-
-  it("thresholdSlider should be set", () => {
-    expect(wrapper.vm.thresholdSlider).toStrictEqual([0, 100]);
-  });
-
-  it("tSlider should be set", () => {
+  it('tSlider should be set', () => {
     expect(unref(tSlider)).toStrictEqual([0, 0]);
   });
 
-  it("sSlider should be set", () => {
+  it('sSlider should be set', () => {
     expect(unref(sSlider)).toStrictEqual([0, 0]);
   });
 
-  it("cSlider should be set", () => {
+  it('cSlider should be set', () => {
     expect(unref(cSlider)).toStrictEqual([0, 0]);
   });
 
-  it("windowSlider should  set", async () => {
+  it('windowSlider should  set', async () => {
     const newVals: [number, number] = [20, 20];
-    wrapper.vm.windowSlider = newVals;
+    windowSlider.value = newVals;
     await flushPromises();
-    expect(wrapper.vm.windowSlider).toStrictEqual(newVals);
+    expect(windowSlider.value).toStrictEqual(newVals);
   });
 
-  it("thresholdSlider should set", async () => {
+  it('thresholdSlider should set', async () => {
     const newVals: [number, number] = [20, 20];
-    wrapper.vm.thresholdSlider = newVals;
+    thresholdSlider.value = newVals;
     await flushPromises();
-    expect(wrapper.vm.thresholdSlider).toStrictEqual(newVals);
+    expect(thresholdSlider.value).toStrictEqual(newVals);
   });
 
-  it("tSlider should set", async () => {
-    const newVals = [0, 0];
-    wrapper.vm.tSlider = newVals;
+  it('tSlider should set', async () => {
+    const newVals: [number, number] = [0, 0];
+    tSlider.value = newVals;
     await flushPromises();
-    expect(wrapper.vm.tSlider).toStrictEqual(newVals);
+    expect(tSlider.value).toStrictEqual(newVals);
   });
 
-  it("sSlider should set", async () => {
-    const newVals = [0, 0];
-    wrapper.vm.sSlider = newVals;
+  it('sSlider should set', async () => {
+    const newVals: [number, number] = [0, 0];
+    sSlider.value = newVals;
     await flushPromises();
-    expect(wrapper.vm.sSlider).toStrictEqual(newVals);
+    expect(sSlider.value).toStrictEqual(newVals);
   });
 
-  it("cSlider should set", async () => {
-    const newVals = [0, 0];
-    wrapper.vm.cSlider = newVals;
+  it('cSlider should set', async () => {
+    const newVals: [number, number] = [0, 0];
+    cSlider.value = newVals;
     await flushPromises();
-    expect(wrapper.vm.cSlider).toStrictEqual(newVals);
+    expect(cSlider.value).toStrictEqual(newVals);
   });
 
-  it("should isLayout2x2", async () => {
+  it('should isLayout2x2', async () => {
     const scanState = inflateScanState();
     scanState.Layout.PositionData = [
       { Anchor: AnchorPoint.TOP_LEFT } as PositionData,
       { Anchor: AnchorPoint.TOP_RIGHT } as PositionData,
       { Anchor: AnchorPoint.BOTTOM_LEFT } as PositionData,
-      { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
+      { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData
     ];
 
     setScanState(JSON.stringify(scanState));
@@ -239,13 +216,13 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(unref(isLayout1x3)).toBeFalsy();
   });
 
-  it("should isLayout1x3", async () => {
+  it('should isLayout1x3', async () => {
     const scanState = inflateScanState();
     scanState.Layout.PositionData = [
       { Anchor: AnchorPoint.CENTER } as PositionData,
       { Anchor: AnchorPoint.TOP_RIGHT } as PositionData,
       { Anchor: AnchorPoint.RIGHT } as PositionData,
-      { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
+      { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData
     ];
 
     setScanState(JSON.stringify(scanState));
@@ -254,9 +231,9 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(unref(isLayout2x2)).toBeFalsy();
   });
 
-  it("should getCurrentGreyscalePreset", async () => {
+  it('should getCurrentGreyscalePreset', async () => {
     const initial = inflateInitialScanState();
-    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    initial.GreyscalePresets = [{ Name: 'testing', Lower: 30, Upper: 60, Version: '1.0.0' }];
     setInitialScanStateFromPayload(JSON.stringify(initial));
     await flushPromises();
 
@@ -266,12 +243,12 @@ describe("MftpWebGL3DRModal.vue", () => {
     setScanState(JSON.stringify(scanState));
     await flushPromises();
 
-    expect(unref(currentGreyscalePreset)?.Name).toBe("testing");
+    expect(unref(currentGreyscalePreset)?.Name).toBe('testing');
   });
 
-  it("should getCurrentGreyscalePreset", async () => {
+  it('should getCurrentGreyscalePreset', async () => {
     const initial = inflateInitialScanState();
-    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    initial.GreyscalePresets = [{ Name: 'testing', Lower: 30, Upper: 60, Version: '1.0.0' }];
     initial.HuLower = 40;
     initial.HuUpper = 50;
     setInitialScanStateFromPayload(JSON.stringify(initial));
@@ -283,12 +260,12 @@ describe("MftpWebGL3DRModal.vue", () => {
     setScanState(JSON.stringify(scanState));
     await flushPromises();
 
-    expect(unref(currentGreyscalePreset)?.Name).toBe("testing");
+    expect(unref(currentGreyscalePreset)?.Name).toBe('testing');
   });
 
-  it("should getCurrentGreyscalePreset", async () => {
+  it('should getCurrentGreyscalePreset', async () => {
     const initial = inflateInitialScanState();
-    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    initial.GreyscalePresets = [{ Name: 'testing', Lower: 30, Upper: 60, Version: '1.0.0' }];
     initial.HuLower = 40;
     initial.HuUpper = 50;
     setInitialScanStateFromPayload(JSON.stringify(initial));
@@ -303,36 +280,34 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
-  it("should getCurrentGreyscalePreset", async () => {
+  it('should getCurrentGreyscalePreset', async () => {
     expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
-  it("should getViewName 3D Volume", async () => {
-    expect(wrapper.vm.getViewName(0)).toBe("3D Volume");
-  });
-
-  it("should getViewName Sagittal", async () => {
-    expect(wrapper.vm.getViewName(2)).toBe("Sagittal");
-  });
-});
-
-describe('MftpWebGL3DRModal tests', () => {
-  it('should mount', () => {
-    const wrapper = mountVuetify(MftpWebGL3DRModal);
-    expect(wrapper).toBeTruthy();
-  });
-
   it('should v-model modals', async () => {
-    const wrapper = mountVuetify(MftpWebGL3DRModal);
+    const wrapper = mount(MftpWebGL3DRModal);
     const modals = wrapper.findAllComponents(VDialog);
     for (const modal of modals) {
       await modal.setValue(false);
     }
   });
 
-  it('should start introjs', () => {
-    const wrapper = mountVuetify(MftpWebGL3DRModal);
-    expect(wrapper.vm.startIntro()).resolves.not.toThrow();
+  it('should set 2x2 view', async () => {
+    vi.spyOn(Viewer3crService.prototype, 'layouts').mockImplementation(vi.fn());
+    await flushPromises();
+    await wrapper.findComponent(VDialog).findComponentByTestId<VBtn>('layout-2x2').trigger('click');
+    expect(Viewer3crService.prototype.layouts).toHaveBeenCalledWith(LayoutActions.lo02);
+  });
+
+  it('should set 1x3 view', async () => {
+    vi.spyOn(Viewer3crService.prototype, 'layouts').mockImplementation(vi.fn());
+    await flushPromises();
+    await wrapper.findComponentByTestId('layout-1x3').trigger('click');
+    expect(Viewer3crService.prototype.layouts).toHaveBeenCalledWith(LayoutActions.lo03);
+  });
+
+  it('should set settings-menu model', async () => {
+    await wrapper.findComponent(SettingsMenu).setValue(false);
   });
 });
 
@@ -345,13 +320,13 @@ async function testWatcherForDisplay(key: string, action: SlidersActions, not: b
 
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Display as any)[key],
+      Version: '0.0.1',
+      Value: (scanState.Display as any)[key]
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Display as any)[key],
+      Version: '0.0.1',
+      Value: (scanState.Display as any)[key]
     });
   }
 }
@@ -366,13 +341,13 @@ async function testWatcherForSlice(key: string, action: SlidersActions, not: boo
 
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Slice as any)[key],
+      Version: '0.0.1',
+      Value: (scanState.Slice as any)[key]
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Slice as any)[key],
+      Version: '0.0.1',
+      Value: (scanState.Slice as any)[key]
     });
   }
 }
@@ -386,13 +361,13 @@ async function testWatcherForOrientation(key: string, action: SlidersActions, no
   await flushPromises();
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Orientations as any)[key].Slice,
+      Version: '0.0.1',
+      Value: (scanState.Orientations as any)[key].Slice
     });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
-      Version: "0.0.1",
-      Value: (scanState.Orientations as any)[key].Slice,
+      Version: '0.0.1',
+      Value: (scanState.Orientations as any)[key].Slice
     });
   }
 }
@@ -405,18 +380,14 @@ async function testWatcherForInteractionSettings(key: string, action: ScanMoveme
 
   await flushPromises();
   if (not) {
-    expect(spy).not.toHaveBeenCalledWith(
-      FrontEndInterfaces.scan_movement,
-      action,
-      {
-        Version: "0.0.1",
-        Value: (scanState.InteractionSettings as any)[key],
-      }
-    );
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.scan_movement, action, {
+      Version: '0.0.1',
+      Value: (scanState.InteractionSettings as any)[key]
+    });
   } else {
     expect(spy).toHaveBeenCalledWith(FrontEndInterfaces.scan_movement, action, {
-      Version: "0.0.1",
-      Value: (scanState.InteractionSettings as any)[key],
+      Version: '0.0.1',
+      Value: (scanState.InteractionSettings as any)[key]
     });
   }
 }

package/src/components/modal/__tests__/ViewerActionRail.spec.ts

@@ -0,0 +1,11 @@
+import { ScanView } from '@3cr/types-ts';
+import { mount } from '@vue/test-utils';
+import ViewerActionRail from '@/components/modal/ViewerActionRail.vue';
+
+describe('ViewerActionRail tests', () => {
+  it('should mount', () => {
+    const props = { view: ScanView.Volume, element: document.body };
+    const wrapper = mount(ViewerActionRail, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/modal/__tests__/ViewerNavigationDrawer.spec.ts

@@ -1,26 +1,24 @@
-import { describe, it, expect } from "vitest";
-import { VApp } from "vuetify/components";
-import { h } from "vue";
-import { VueWrapper, mount } from "@vue/test-utils";
-import { createVuetify } from "vuetify";
-import { demoOptions } from "@/components/demo/options";
-import ViewerNavigationDrawer from "@/components/modal/ViewerNavigationDrawer.vue";
+import { VApp } from 'vuetify/components';
+import { h } from 'vue';
+import { VueWrapper, mount, flushPromises } from '@vue/test-utils';
+import ViewerNavigationDrawer from '@/components/modal/ViewerNavigationDrawer.vue';
 
 function factory(component: any, props?: Record<string, any>): VueWrapper {
   return mount(VApp, {
-    slots: { default: h(component, props) },
-    global: { plugins: [createVuetify({})] },
+    slots: { default: h(component, props) }
   });
 }
 
 describe('ViewerNavigationDrawer tests', () => {
-  it('should mount', () => {
-    const wrapper = factory(ViewerNavigationDrawer, { options: demoOptions.value, drawer: true });
+  it('should mount', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, { drawer: true });
+    await flushPromises();
     expect(wrapper).toBeTruthy();
   });
 
   it('should toggle drawer', async () => {
-    const wrapper = factory(ViewerNavigationDrawer, { options: demoOptions.value, drawer: false });
+    const wrapper = factory(ViewerNavigationDrawer, { drawer: false });
+    await flushPromises();
     const nav = wrapper.findComponent(ViewerNavigationDrawer);
     expect(nav.vm.drawer).toBeFalsy();
     const toggle = nav.findComponent('[data-testid="toggle"]');

package/src/components/modal/__tests__/ViewerNavigationDrawerContent.spec.ts

@@ -1,29 +1,11 @@
-import {describe, it, expect, vi} from "vitest";
-import { mountVuetify } from "~/helper";
-import { demoOptions } from "@/components/demo/options";
-import { isSessionLoaded } from "@/dataLayer/scanState";
-import ViewerNavigationDrawerContent from "../ViewerNavigationDrawerContent.vue";
-import {flushPromises} from "@vue/test-utils";
+import { demoOptions } from '@/components/demo/options';
+import { mount } from '@vue/test-utils';
+import ViewerNavigationDrawerContent from '@/components/modal/ViewerNavigationDrawerContent.vue';
 
 describe('ViewerNavigationDrawerContent tests', () => {
   it('should mount', () => {
     const props = { drawer: false, options: demoOptions.value };
-    const wrapper = mountVuetify(ViewerNavigationDrawerContent, props);
+    const wrapper = mount(ViewerNavigationDrawerContent, { props });
     expect(wrapper).toBeTruthy();
   });
-
-  it('should expand', async () => {
-    vi.spyOn(isSessionLoaded, 'value', 'get').mockReturnValue(true);
-    const props = { drawer: true, options: demoOptions.value };
-    const wrapper = mountVuetify(ViewerNavigationDrawerContent, props);
-    const panel0 = wrapper.findComponent('[data-testid="panel-0"]');
-    await panel0.trigger('click');
-    await flushPromises();
-    expect(panel0.isVisible()).toBeTruthy();
-
-    const panel1 = wrapper.findComponent('[data-testid="panel-1"]');
-    await panel1.trigger('click')
-    await flushPromises();
-    expect(panel1.isVisible()).toBeTruthy();
-  });
 });