@3cr/viewer-browser 0.0.161 → 0.0.194

package/src/components/modal/__tests__/{mftp-webgl-3dr-modal.spec.ts → MftpWebGL3DRModal.spec.ts}

@@ -1,48 +1,32 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { shallowMountVuetify } from "~/helper";
-import MftpWebGL3DRModal from "../MftpWebGL3DRModal.vue";
-import {
-  inflateInitialScanState,
-  inflateScanState,
-} from "@/helpers/modelHelper";
+import { mountVuetify, shallowMountVuetify } from "~/helper";
+import { inflateInitialScanState, inflateScanState } from "@/helpers/modelHelper";
 import {
   AnchorPoint,
-  FileManagementActions,
   FrontEndInterfaces,
-  InteractivityActions,
-  NotificationPayload,
   PositionData,
   ScanMovementActions,
-  ScanStateActions,
-  ScanView,
   SlidersActions,
 } from "@3cr/types-ts";
 import { flushPromises } from "@vue/test-utils";
-import { PayloadHandler } from "@/dataLayer/payloadHandler";
 import { spyOn } from "@vitest/spy";
 import {
   cSlider,
   currentGreyscalePreset,
   isLayout1x3,
   isLayout2x2,
+  setInitialScanStateFromPayload,
   setScanState,
   sSlider,
   transactionStarted,
   tSlider,
 } from "@/dataLayer/scanState";
 import { unref } from "vue";
-import { isDemo } from "@/demo/options";
+import { isDemo } from "@/components/demo/options";
+import { Viewer3cr } from "@/dataLayer/viewer3cr";
+import MftpWebGL3DRModal from "../MftpWebGL3DRModal.vue";
+import { VDialog } from "vuetify/components";
 
-vi.mock("@3cr/sdk-browser", async (importOriginal) => {
-  const mod = (await importOriginal()) as object;
-  return {
-    ...mod,
-    registerVersion: vi.fn(),
-    createInstance: vi.fn(),
-    executePayload: vi.fn(),
-    registerOnPayloadHandler: vi.fn(),
-  };
-});
 vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
   return {
@@ -52,29 +36,16 @@ vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
     }),
   };
 });
-let spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
-  (interfaceType: string, actionType: string, message: any) => Promise.resolve()
-);
+
+let spy = spyOn(Viewer3cr.prototype, "sendPayload").mockResolvedValue();
+
 describe("MftpWebGL3DRModal.vue", () => {
-  let wrapper = shallowMountVuetify(
-    MftpWebGL3DRModal,
-    {}
-    // { WebGL3DR: true, LoadingSpinner: true }
-  );
+  let wrapper = shallowMountVuetify(MftpWebGL3DRModal);
 
   beforeEach(() => {
     transactionStarted.value = false;
-    spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
-      (interfaceType: string, actionType: string, message: any) =>
-        Promise.resolve()
-    );
-
-    wrapper = shallowMountVuetify(
-      MftpWebGL3DRModal,
-      {}
-      // { WebGL3DR: true, LoadingSpinner: true }
-    );
-    // wrapper.vm.alterValue(true);
+    spy = spyOn(Viewer3cr.prototype, "sendPayload").mockResolvedValue();
+    wrapper = shallowMountVuetify( MftpWebGL3DRModal);
     vi.useFakeTimers();
   });
 
@@ -86,6 +57,7 @@ describe("MftpWebGL3DRModal.vue", () => {
   it("inflates", () => {
     expect(wrapper).toBeTruthy();
   });
+
   describe("watchers", () => {
     it("scanState.value.Display.Brightness", async () => {
       await testWatcherForDisplay("Brightness", SlidersActions.sl01);
@@ -193,50 +165,11 @@ describe("MftpWebGL3DRModal.vue", () => {
       );
     });
   });
+
   it("watches scanState", () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it("getIconForPreset Bone", () => {
-    expect(wrapper.vm.getIconForPreset("Bone")).toBe("fa:fas fa-bone");
-  });
-
-  it("getIconForPreset Brain", () => {
-    expect(wrapper.vm.getIconForPreset("Brain")).toBe("fa:fas fa-brain");
-  });
-
-  it("getIconForPreset Liver", () => {
-    expect(wrapper.vm.getIconForPreset("Liver")).toBe("custom:liver_icon");
-  });
-
-  it("getIconForPreset Lungs", () => {
-    expect(wrapper.vm.getIconForPreset("Lungs")).toBe("fa:fas fa-lungs");
-  });
-
-  it("getIconForPreset Muscle", () => {
-    expect(wrapper.vm.getIconForPreset("Muscle")).toBe("custom:muscle_icon");
-  });
-
-  it("getIconForPreset Temporal Bones", () => {
-    expect(wrapper.vm.getIconForPreset("Temporal Bones")).toBe(
-      "custom:temporal_bones_icon"
-    );
-  });
-
-  it("getIconForPreset Soft Tissue", () => {
-    expect(wrapper.vm.getIconForPreset("Soft Tissue")).toBe(
-      "custom:torso_icon"
-    );
-  });
-
-  it("getIconForPreset Skin", () => {
-    expect(wrapper.vm.getIconForPreset("Skin")).toBe("custom:skin_icon");
-  });
-
-  it("getIconForPreset AKJSDHLKAJSDLJ", () => {
-    expect(wrapper.vm.getIconForPreset("AKJSDHLKAJSDLJ")).toBe(undefined);
-  });
-
   it("windowSlider should be set", () => {
     expect(wrapper.vm.windowSlider).toStrictEqual([0, 100]);
   });
@@ -258,14 +191,14 @@ describe("MftpWebGL3DRModal.vue", () => {
   });
 
   it("windowSlider should  set", async () => {
-    const newVals = [20, 20];
+    const newVals: [number, number] = [20, 20];
     wrapper.vm.windowSlider = newVals;
     await flushPromises();
     expect(wrapper.vm.windowSlider).toStrictEqual(newVals);
   });
 
   it("thresholdSlider should set", async () => {
-    const newVals = [20, 20];
+    const newVals: [number, number] = [20, 20];
     wrapper.vm.thresholdSlider = newVals;
     await flushPromises();
     expect(wrapper.vm.thresholdSlider).toStrictEqual(newVals);
@@ -292,66 +225,6 @@ describe("MftpWebGL3DRModal.vue", () => {
     expect(wrapper.vm.cSlider).toStrictEqual(newVals);
   });
 
-  it("should closeModal", async () => {
-    wrapper.vm.closeModal();
-    wrapper.vm.m_closeDialog = true;
-
-    await flushPromises();
-    wrapper.findComponent("#close-dialog-prompt");
-  });
-
-  it("should closeModal", async () => {
-    wrapper.vm.closeModal();
-    wrapper.vm.alterValue(false);
-
-    await flushPromises();
-    wrapper.findComponent("#close-dialog-prompt");
-  });
-
-  it("should handleOnPayload file_management", async () => {
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.file_management,
-      "123",
-      "123"
-    );
-  });
-
-  it("should handleOnPayload file_management", async () => {
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.file_management,
-      FileManagementActions.fm02,
-      JSON.stringify(inflateInitialScanState())
-    );
-  });
-  it("should handleOnPayload notifications", async () => {
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.notifications,
-      "123",
-      JSON.stringify({
-        Action: InteractivityActions.in01,
-        Code: "S00000",
-      } as NotificationPayload)
-    );
-  });
-  it("should handleOnPayload notifications", async () => {
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.notifications,
-      "123",
-      JSON.stringify({
-        Action: InteractivityActions.in02,
-        Code: "S00000",
-      } as NotificationPayload)
-    );
-  });
-
-  it("should handleOnPayload scan_state", async () => {
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.scan_state,
-      ScanStateActions.ss01,
-      JSON.stringify(inflateScanState())
-    );
-  });
-
   it("should isLayout2x2", async () => {
     const scanState = inflateScanState();
     scanState.Layout.PositionData = [
@@ -362,7 +235,6 @@ describe("MftpWebGL3DRModal.vue", () => {
     ];
 
     setScanState(JSON.stringify(scanState));
-
     expect(unref(isLayout2x2)).toBeTruthy();
     expect(unref(isLayout1x3)).toBeFalsy();
   });
@@ -384,101 +256,51 @@ describe("MftpWebGL3DRModal.vue", () => {
 
   it("should getCurrentGreyscalePreset", async () => {
     const initial = inflateInitialScanState();
-
-    initial.GreyscalePresets = [
-      { Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" },
-    ];
-
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.file_management,
-      FileManagementActions.fm02,
-      JSON.stringify(initial)
-    );
+    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    setInitialScanStateFromPayload(JSON.stringify(initial));
     await flushPromises();
 
     const scanState = inflateScanState();
     scanState.Display.WindowLower = 30;
     scanState.Display.WindowUpper = 60;
-
     setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(unref(currentGreyscalePreset)).toBe("testing");
-  });
-
-  it("should isDemo execute option", async () => {
-    isDemo.value = true;
 
-    wrapper.vm.closeModal();
+    expect(unref(currentGreyscalePreset)?.Name).toBe("testing");
   });
 
   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;
-
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.file_management,
-      FileManagementActions.fm02,
-      JSON.stringify(initial)
-    );
+    setInitialScanStateFromPayload(JSON.stringify(initial));
     await flushPromises();
 
     const scanState = inflateScanState();
     scanState.Display.WindowLower = 40;
     scanState.Display.WindowUpper = 50;
-
     setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(unref(currentGreyscalePreset)).toBe("testing");
+
+    expect(unref(currentGreyscalePreset)?.Name).toBe("testing");
   });
 
   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;
-
-    wrapper.vm.handleOnPayload(
-      FrontEndInterfaces.file_management,
-      FileManagementActions.fm02,
-      JSON.stringify(initial)
-    );
+    setInitialScanStateFromPayload(JSON.stringify(initial));
     await flushPromises();
 
     const scanState = inflateScanState();
     scanState.Display.WindowLower = 45;
     scanState.Display.WindowUpper = 46;
-
     setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(unref(currentGreyscalePreset)).toBe(undefined);
-  });
 
-  it("should fullscreenLayout", async () => {
-    const view = ScanView.Coronal;
-    await wrapper.vm.fullscreenLayout(view);
-    // expect(spy).toHaveBeenNthCalledWith(
-    //   1,
-    //   FrontEndInterfaces.view_selection,
-    //   `vs_0${view + 1}`,
-    //   {
-    //     Version: "1.1.0",
-    //   }
-    // );
-    expect(spy).toHaveBeenCalledWith(
-      FrontEndInterfaces.view_selection,
-      `vs_0${view + 1}`,
-      {
-        Version: "1.1.0",
-      }
-    );
+    expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -492,96 +314,35 @@ describe("MftpWebGL3DRModal.vue", () => {
   it("should getViewName Sagittal", async () => {
     expect(wrapper.vm.getViewName(2)).toBe("Sagittal");
   });
+});
 
-  it("should getCurrentActiveView Sagittal", async () => {
-    expect(
-      wrapper.vm.getCurrentActiveView({
-        Anchor: AnchorPoint.CENTER,
-        ActiveView: true,
-        AspectRatio: 1,
-        MaxSize: {
-          Version: "0.0.1",
-          X: 1,
-          Y: 1,
-        },
-        DefaultView: ScanView.Coronal,
-        Priority: 1,
-        Version: "0.0.1",
-        Offset: {
-          Version: "0.0.1",
-          X: 1,
-          Y: 1,
-        },
-      })
-    ).toBe(3);
+describe('MftpWebGL3DRModal tests', () => {
+  it('should mount', () => {
+    const wrapper = mountVuetify(MftpWebGL3DRModal);
+    expect(wrapper).toBeTruthy();
   });
 
-  it("should getCurrentActiveView Sagittal", async () => {
-    const initalState = inflateScanState();
-    initalState.Layout.PositionData = [
-      {
-        Anchor: AnchorPoint.CENTER,
-        ActiveView: true,
-        AspectRatio: 1,
-        MaxSize: {
-          Version: "1.0.0",
-          X: 1,
-          Y: 1,
-        },
-        DefaultView: ScanView.Coronal,
-        Priority: 1,
-        Offset: {
-          Version: "1.0.0",
-          X: 1,
-          Y: 1,
-        },
-        Version: "1.0.0",
-      },
-    ];
-    await setScanState(JSON.stringify(initalState));
-
-    expect(
-      wrapper.vm.getCurrentActiveView({
-        Anchor: AnchorPoint.CENTER,
-        ActiveView: true,
-        AspectRatio: 1,
-        MaxSize: {
-          Version: "0.0.1",
-          X: 1,
-          Y: 1,
-        },
-        DefaultView: ScanView.Coronal,
-        Priority: 1,
-        Version: "0.0.1",
-        Offset: {
-          Version: "0.0.1",
-          X: 1,
-          Y: 1,
-        },
-      })
-    ).toBe(0);
+  it('should v-model modals', async () => {
+    const wrapper = mountVuetify(MftpWebGL3DRModal);
+    const modals = wrapper.findAllComponents(VDialog);
+    for (const modal of modals) {
+      await modal.setValue(false);
+    }
   });
 
-  it("should footerItems", async () => {
-    for (const footerItem of wrapper.vm.footerItems) {
-      const promise = footerItem.click();
-      expect(promise).toBeTruthy();
-      await promise;
-    }
+  it('should start introjs', () => {
+    const wrapper = mountVuetify(MftpWebGL3DRModal);
+    expect(wrapper.vm.startIntro()).resolves.not.toThrow();
   });
 });
 
-async function testWatcherForDisplay(
-  key: string,
-  action: SlidersActions,
-  not: boolean = false
-) {
+async function testWatcherForDisplay(key: string, action: SlidersActions, not: boolean = false) {
   const scanState = inflateScanState();
   (scanState.Display as any)[key] = 60;
 
-  await setScanState(JSON.stringify(scanState));
-
+  setScanState(JSON.stringify(scanState));
   await flushPromises();
+
   if (not) {
     expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
       Version: "0.0.1",
@@ -595,11 +356,7 @@ async function testWatcherForDisplay(
   }
 }
 
-async function testWatcherForSlice(
-  key: string,
-  action: SlidersActions,
-  not: boolean = false
-) {
+async function testWatcherForSlice(key: string, action: SlidersActions, not: boolean = false) {
   const scanState = inflateScanState();
   (scanState.Slice as any)[key] = 100;
 
@@ -620,11 +377,7 @@ async function testWatcherForSlice(
   }
 }
 
-async function testWatcherForOrientation(
-  key: string,
-  action: SlidersActions,
-  not: boolean = false
-) {
+async function testWatcherForOrientation(key: string, action: SlidersActions, not: boolean = false) {
   const scanState = inflateScanState();
   (scanState.Orientations as any)[key].Slice = 100;
 
@@ -644,11 +397,7 @@ async function testWatcherForOrientation(
   }
 }
 
-async function testWatcherForInteractionSettings(
-  key: string,
-  action: ScanMovementActions,
-  not: boolean = false
-) {
+async function testWatcherForInteractionSettings(key: string, action: ScanMovementActions, not: boolean = false) {
   const scanState = inflateScanState();
   (scanState.InteractionSettings as any)[key] = 100;
 

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

@@ -0,0 +1,79 @@
+import { describe, it, expect } from "vitest";
+import { mountVuetify } from "~/helper";
+import { dataOverlayEvent } from "@/dataLayer/scanState";
+import { DataOverlay, DataOverlayEvent, InteractionType } from "@3cr/types-ts";
+import { flushPromises } from "@vue/test-utils";
+import { VMenu } from "vuetify/components";
+import ViewerAnnotationModal from "../ViewerAnnotationModal.vue";
+
+const DATA_OVERLAY: DataOverlay = {
+  Version: '1.1.0',
+  Id: '0',
+  Title: 'Data Overlay',
+  Description: 'Data Overlay',
+  Colour2d: { Version: '1.1.0', R: 255, B: 255, G: 255, A: 255 },
+  Colour3d: { Version: '1.1.0', R: 255, B: 255, G: 255, A: 255 },
+  Icon2d: '',
+  Visibility2d: true,
+  Visibility3d: true,
+  Inverted: { Version: '1.1.0', InvertedCoronal: false, InvertedSagittal: false, InvertedTransverse: false },
+  Position: { Version: '1.1.0', X: 0, Y: 0, Z: 0 },
+  Size2d: { Version: '1.1.0', X: 0, Y: 0 },
+  Size3d: { Version: '1.1.0', X: 0, Y: 0, Z: 0 },
+  CallToAction: {
+    Actions: [
+      {
+        ActionType: 1,
+        ActionData: {
+          Description: 'Test',
+          Url: ''
+        }
+      }
+    ]
+  }
+};
+
+const POINTER_DOWN_EVENT: DataOverlayEvent = {
+  Version: '1.1.0',
+  Interaction: InteractionType.PointerDown,
+  Annotation: DATA_OVERLAY
+}
+
+const POINTER_UP_EVENT: DataOverlayEvent = {
+  Version: '1.1.0',
+  Interaction: InteractionType.PointerUp,
+  Annotation: DATA_OVERLAY
+}
+
+describe('ViewerAnnotationModal tests', () => {
+  it('should mount', () => {
+    const wrapper = mountVuetify(ViewerAnnotationModal);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should show on data overlay event', async () => {
+    const wrapper = mountVuetify(ViewerAnnotationModal);
+    dataOverlayEvent.value = POINTER_DOWN_EVENT;
+    document.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0 }));
+    await flushPromises();
+    dataOverlayEvent.value = POINTER_UP_EVENT;
+    expect(wrapper.isVisible()).toBeTruthy();
+  });
+
+  it('should dismiss on click', async () => {
+    dataOverlayEvent.value = POINTER_UP_EVENT;
+    const wrapper = mountVuetify(ViewerAnnotationModal);
+    document.dispatchEvent(new MouseEvent('click', { clientX: 0, clientY: 0 }));
+    await flushPromises();
+    expect(wrapper.html()).toBe('');
+  });
+
+  it('should close via menu state', async () => {
+    dataOverlayEvent.value = null;
+    const wrapper = mountVuetify(ViewerAnnotationModal);
+    const menu = wrapper.getComponent(VMenu);
+    await menu.setValue(true);
+    await menu.setValue(false);
+    expect(menu.html()).toBe('');
+  });
+});

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

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { mountVuetify } from "~/helper";
+import { inflateInitialScanState, inflateScanState } from "@/helpers/modelHelper";
+import { currentColourPreset, currentGreyscalePreset, setInitialScanStateFromPayload, setScanState, thresholdSlider, windowSlider } from "@/dataLayer/scanState";
+import { ColourPresetData } from "@3cr/types-ts";
+import { VTextField } from "vuetify/components";
+import ViewerDisplaySettings from "@/components/modal/ViewerDisplaySettings.vue";
+import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
+
+describe('ViewerDisplaySettings tests', () => {
+  it('should mount', () => {
+    const wrapper = mountVuetify(ViewerDisplaySettings);
+    expect(wrapper).toBeTruthy();
+  });
+
+  describe('sliders', async () => {
+    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const sliders = wrapper.findAllComponents(DoubleSliderSelector);
+
+    it('should test window slider', async () => {
+      const textFields = sliders[0].findAllComponents(VTextField);
+      await textFields[0].setValue(20);
+      await textFields[1].setValue(40);
+      expect(windowSlider.value).toStrictEqual([20, 40]);
+    });
+
+    it('should test threshold slider', async () => {
+      const textFields = sliders[1].findAllComponents(VTextField);
+      await textFields[0].setValue(50);
+      await textFields[1].setValue(80);
+      expect(thresholdSlider.value).toStrictEqual([50, 80]);
+    });
+  });
+
+  it('should set greyscale preset', async () => {
+    const initial = inflateInitialScanState();
+    initial.GreyscalePresets = [{ Name: "testing", Lower: 30, Upper: 60, Version: "1.0.0" }];
+    setInitialScanStateFromPayload(JSON.stringify(initial));
+
+    const scanState = inflateScanState();
+    scanState.Display.WindowLower = 30;
+    scanState.Display.WindowUpper = 60;
+    setScanState(JSON.stringify(scanState));
+
+    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const greyscale = wrapper.findComponent('[data-testid="greyscale"]');
+    await greyscale.setValue(initial.GreyscalePresets[0]);
+    expect(currentGreyscalePreset.value).toStrictEqual(initial.GreyscalePresets[0]);
+  });
+
+  it('should set colour preset', async () => {
+    const initial = inflateInitialScanState();
+    initial.ColourPresets = [{ Name: "testing" } as ColourPresetData];
+    setInitialScanStateFromPayload(JSON.stringify(initial));
+
+    const wrapper = mountVuetify(ViewerDisplaySettings);
+    const colour = wrapper.findComponent('[data-testid="colour"]');
+    await colour.setValue(initial.ColourPresets[0]);
+    expect(currentColourPreset.value).toStrictEqual(initial.ColourPresets[0]);
+  });
+});

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

@@ -0,0 +1,32 @@
+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";
+
+function factory(component: any, props?: Record<string, any>): VueWrapper {
+  return mount(VApp, {
+    slots: { default: h(component, props) },
+    global: { plugins: [createVuetify({})] },
+  });
+}
+
+describe('ViewerNavigationDrawer tests', () => {
+  it('should mount', () => {
+    const wrapper = factory(ViewerNavigationDrawer, { options: demoOptions.value, drawer: true });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle drawer', async () => {
+    const wrapper = factory(ViewerNavigationDrawer, { options: demoOptions.value, drawer: false });
+    const nav = wrapper.findComponent(ViewerNavigationDrawer);
+    expect(nav.vm.drawer).toBeFalsy();
+    const toggle = nav.findComponent('[data-testid="toggle"]');
+    await toggle.trigger('click');
+    expect(nav.vm.drawer).toBeTruthy();
+    await toggle.trigger('click');
+    expect(nav.vm.drawer).toBeFalsy();
+  });
+});