@3cr/viewer-browser 0.0.62 → 0.0.92

package/src/components/modal/__tests__/mftp-webgl-3dr-modal.spec.ts

@@ -12,14 +12,26 @@ import {
   InteractivityActions,
   NotificationPayload,
   PositionData,
-  PresetsActions,
   ScanMovementActions,
-  ScanOrientationActions,
   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,
+  setScanState,
+  sSlider,
+  transactionStarted,
+  tSlider,
+} from "@/dataLayer/scanState";
+import { unref } from "vue";
+import { isDemo } from "@/demo/options";
 
 vi.mock("@3cr/sdk-browser", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
@@ -35,12 +47,14 @@ vi.mock("@kyvg/vue3-notification", async (importOriginal) => {
   const mod = (await importOriginal()) as object;
   return {
     ...mod,
-    useNotification: {
+    useNotification: vi.fn().mockReturnValue({
       notify: vi.fn(),
-    },
+    }),
   };
 });
-
+let spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
+  (interfaceType: string, actionType: string, message: any) => Promise.resolve()
+);
 describe("MftpWebGL3DRModal.vue", () => {
   let wrapper = shallowMountVuetify(
     MftpWebGL3DRModal,
@@ -49,6 +63,12 @@ describe("MftpWebGL3DRModal.vue", () => {
   );
 
   beforeEach(() => {
+    transactionStarted.value = false;
+    spy = spyOn(PayloadHandler.prototype, "sendPayload").mockImplementation(
+      (interfaceType: string, actionType: string, message: any) =>
+        Promise.resolve()
+    );
+
     wrapper = shallowMountVuetify(
       MftpWebGL3DRModal,
       {}
@@ -60,6 +80,7 @@ describe("MftpWebGL3DRModal.vue", () => {
 
   afterEach(() => {
     vi.useRealTimers();
+    isDemo.value = false;
   });
 
   it("inflates", () => {
@@ -67,106 +88,85 @@ describe("MftpWebGL3DRModal.vue", () => {
   });
   describe("watchers", () => {
     it("scanState.value.Display.Brightness", async () => {
-      await testWatcherForDisplay(wrapper, "Brightness", SlidersActions.sl01);
+      await testWatcherForDisplay("Brightness", SlidersActions.sl01);
     });
 
     it("scanState.value.Display.Contrast", async () => {
-      await testWatcherForDisplay(wrapper, "Contrast", SlidersActions.sl02);
+      await testWatcherForDisplay("Contrast", SlidersActions.sl02);
     });
 
     it("scanState.value.Display.Opacity", async () => {
-      await testWatcherForDisplay(wrapper, "Opacity", SlidersActions.sl03);
+      await testWatcherForDisplay("Opacity", SlidersActions.sl03);
     });
 
     it("scanState.value.Display.WindowLower", async () => {
-      await testWatcherForDisplay(wrapper, "WindowLower", SlidersActions.sl04);
+      await testWatcherForDisplay("WindowLower", SlidersActions.sl04);
     });
 
     it("scanState.value.Display.WindowUpper", async () => {
-      await testWatcherForDisplay(wrapper, "WindowUpper", SlidersActions.sl05);
+      await testWatcherForDisplay("WindowUpper", SlidersActions.sl05);
     });
 
     it("scanState.value.Display.ThresholdLower", async () => {
-      await testWatcherForDisplay(
-        wrapper,
-        "ThresholdLower",
-        SlidersActions.sl06
-      );
+      await testWatcherForDisplay("ThresholdLower", SlidersActions.sl06);
     });
 
     it("scanState.value.Display.ThresholdUpper", async () => {
-      await testWatcherForDisplay(
-        wrapper,
-        "ThresholdUpper",
-        SlidersActions.sl07
-      );
+      await testWatcherForDisplay("ThresholdUpper", SlidersActions.sl07);
     });
 
     it("scanState.value.Slice.TransverseLower", async () => {
-      await testWatcherForSlice(
-        wrapper,
-        "TransverseLower",
-        SlidersActions.sl08
-      );
+      await testWatcherForSlice("TransverseLower", SlidersActions.sl08);
     });
 
     it("scanState.value.Orientations.Transverse.Slice", async () => {
-      await testWatcherForOrientation(
-        wrapper,
-        "Transverse",
-        SlidersActions.sl09
-      );
+      await testWatcherForOrientation("Transverse", SlidersActions.sl09);
     });
 
     it("scanState.value.Slice.TransverseUpper", async () => {
-      await testWatcherForSlice(
-        wrapper,
-        "TransverseUpper",
-        SlidersActions.sl10
-      );
+      await testWatcherForSlice("TransverseUpper", SlidersActions.sl10);
     });
 
     it("scanState.value.Slice.SagittalLower", async () => {
-      await testWatcherForSlice(wrapper, "SagittalLower", SlidersActions.sl11);
+      await testWatcherForSlice("SagittalLower", SlidersActions.sl11);
     });
 
     it("scanState.value.Orientations.Sagittal.Slice", async () => {
-      await testWatcherForOrientation(wrapper, "Sagittal", SlidersActions.sl12);
+      await testWatcherForOrientation("Sagittal", SlidersActions.sl12);
     });
 
     it("scanState.value.Slice.SagittalUpper", async () => {
-      await testWatcherForSlice(wrapper, "SagittalUpper", SlidersActions.sl13);
+      await testWatcherForSlice("SagittalUpper", SlidersActions.sl13);
     });
 
     it("scanState.value.Slice.CoronalLower", async () => {
-      await testWatcherForSlice(wrapper, "CoronalLower", SlidersActions.sl14);
+      await testWatcherForSlice("CoronalLower", SlidersActions.sl14);
     });
 
     it("scanState.value.Orientations.Coronal.Slice", async () => {
-      await testWatcherForOrientation(wrapper, "Coronal", SlidersActions.sl15);
+      await testWatcherForOrientation("Coronal", SlidersActions.sl15);
     });
 
     it("scanState.value.Slice.CoronalUpper", async () => {
-      await testWatcherForSlice(wrapper, "CoronalUpper", SlidersActions.sl16);
+      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16);
     });
 
     it("scanState.value.Slice.CoronalUpper transaction disabled", async () => {
-      wrapper.vm.transactionStarted = true;
-      await testWatcherForSlice(wrapper, "CoronalUpper", SlidersActions.sl16);
+      transactionStarted.value = true;
+      await testWatcherForSlice("CoronalUpper", SlidersActions.sl16, true);
     });
 
     it("scanState.value.InteractionSettings.PanSensivitity transaction disabled", async () => {
-      wrapper.vm.transactionStarted = true;
+      transactionStarted.value = true;
       await testWatcherForInteractionSettings(
-        wrapper,
-        "PanSensivitity",
-        ScanMovementActions.sm05
+        "PanSensivitity1",
+        ScanMovementActions.sm05,
+        true
       );
     });
 
     it("scanState.value.InteractionSettings.PanSensivitity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "PanSensivitity",
         ScanMovementActions.sm05
       );
@@ -174,7 +174,6 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.ZoomSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "ZoomSensitivity",
         ScanMovementActions.sm08
       );
@@ -182,7 +181,6 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.RotateSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "RotateSensitivity",
         ScanMovementActions.sm10
       );
@@ -190,9 +188,8 @@ describe("MftpWebGL3DRModal.vue", () => {
 
     it("scanState.value.InteractionSettings.CameraRotateSensitivity", async () => {
       await testWatcherForInteractionSettings(
-        wrapper,
         "CameraRotateSensitivity",
-        ScanMovementActions.sm10
+        ScanMovementActions.sm12
       );
     });
   });
@@ -249,15 +246,15 @@ describe("MftpWebGL3DRModal.vue", () => {
   });
 
   it("tSlider should be set", () => {
-    expect(wrapper.vm.tSlider).toStrictEqual([0, 0]);
+    expect(unref(tSlider)).toStrictEqual([0, 0]);
   });
 
   it("sSlider should be set", () => {
-    expect(wrapper.vm.sSlider).toStrictEqual([0, 0]);
+    expect(unref(sSlider)).toStrictEqual([0, 0]);
   });
 
   it("cSlider should be set", () => {
-    expect(wrapper.vm.cSlider).toStrictEqual([0, 0]);
+    expect(unref(cSlider)).toStrictEqual([0, 0]);
   });
 
   it("windowSlider should  set", async () => {
@@ -364,9 +361,10 @@ describe("MftpWebGL3DRModal.vue", () => {
       { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
     ];
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
 
-    expect(wrapper.vm.isLayout2x2).toBeTruthy();
+    expect(unref(isLayout2x2)).toBeTruthy();
+    expect(unref(isLayout1x3)).toBeFalsy();
   });
 
   it("should isLayout1x3", async () => {
@@ -378,15 +376,10 @@ describe("MftpWebGL3DRModal.vue", () => {
       { Anchor: AnchorPoint.BOTTOM_RIGHT } as PositionData,
     ];
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
 
-    expect(wrapper.vm.isLayout1x3).toBeTruthy();
-  });
-
-  it("should snap", async () => {
-    await wrapper.vm.snap();
-
-    expect(wrapper.emitted()["snap"]).toStrictEqual([[]]);
+    expect(unref(isLayout1x3)).toBeTruthy();
+    expect(unref(isLayout2x2)).toBeFalsy();
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -407,9 +400,15 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 30;
     scanState.Display.WindowUpper = 60;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe("testing");
+    expect(unref(currentGreyscalePreset)).toBe("testing");
+  });
+
+  it("should isDemo execute option", async () => {
+    isDemo.value = true;
+
+    wrapper.vm.closeModal();
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -432,9 +431,9 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 40;
     scanState.Display.WindowUpper = 50;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe("testing");
+    expect(unref(currentGreyscalePreset)).toBe("testing");
   });
 
   it("should getCurrentGreyscalePreset", async () => {
@@ -457,104 +456,33 @@ describe("MftpWebGL3DRModal.vue", () => {
     scanState.Display.WindowLower = 45;
     scanState.Display.WindowUpper = 46;
 
-    wrapper.vm.setScanState(JSON.stringify(scanState));
+    setScanState(JSON.stringify(scanState));
     await flushPromises();
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe(undefined);
-  });
-
-  it("should rotateByDeg", async () => {
-    const view = ScanView.Coronal;
-    const deg = 10;
-
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementation(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.scan_orientation);
-        expect(a).toBe(ScanOrientationActions.so01);
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-          View: view,
-          Angle: deg,
-        });
-        return Promise.resolve();
-      }
-    );
-
-    await wrapper.vm.rotateByDeg(view, deg);
+    expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
   it("should fullscreenLayout", async () => {
     const view = ScanView.Coronal;
-
-    vi.spyOn(wrapper.vm, "sendPayload")
-      .mockImplementationOnce((it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.layout);
-        expect(a).toBe("lo_01");
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      })
-      .mockImplementationOnce((it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.view_selection);
-        expect(a).toBe(`vs_0${view + 1}`);
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      });
-
     await wrapper.vm.fullscreenLayout(view);
-  });
-
-  it("should layouts", async () => {
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.layout);
-        expect(a).toBe("lo_02");
-        expect(m).toStrictEqual({
-          Version: "0.0.1",
-        });
-        return Promise.resolve();
-      }
-    );
-
-    await wrapper.vm.layouts("lo_02");
-  });
-
-  it("should setPreset", async () => {
-    const action = PresetsActions.pr01;
-    const preset = {};
-
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.presets);
-        expect(a).toBe(action);
-        expect(m).toStrictEqual(preset);
-        return Promise.resolve();
-      }
-    );
-
-    await wrapper.vm.setPreset(action, preset);
-  });
-
-  it("should setPreset pr02", async () => {
-    const action = PresetsActions.pr02;
-    const preset = {};
-
-    vi.spyOn(wrapper.vm, "sendPayload").mockImplementationOnce(
-      (it: string, a: string, m: any) => {
-        expect(it).toBe(FrontEndInterfaces.presets);
-        expect(a).toBe(action);
-        expect(m).toStrictEqual(preset);
-        return Promise.resolve();
+    // 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",
       }
     );
-
-    await wrapper.vm.setPreset(action, preset);
   });
 
   it("should getCurrentGreyscalePreset", async () => {
-    expect(wrapper.vm.getCurrentGreyscalePreset()).toBe(undefined);
+    expect(unref(currentGreyscalePreset)).toBe(undefined);
   });
 
   it("should getViewName 3D Volume", async () => {
@@ -610,7 +538,7 @@ describe("MftpWebGL3DRModal.vue", () => {
         Version: "1.0.0",
       },
     ];
-    await wrapper.vm.setScanState(JSON.stringify(initalState));
+    await setScanState(JSON.stringify(initalState));
 
     expect(
       wrapper.vm.getCurrentActiveView({
@@ -644,83 +572,102 @@ describe("MftpWebGL3DRModal.vue", () => {
 });
 
 async function testWatcherForDisplay(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Display as any)[key] = 60;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Display as any)[key],
-  });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  await setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      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],
+    });
+  }
 }
 
 async function testWatcherForSlice(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Slice as any)[key] = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Slice as any)[key],
-  });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      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],
+    });
+  }
 }
 
 async function testWatcherForOrientation(
-  wrapper: any,
   key: string,
-  action: SlidersActions
+  action: SlidersActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.Orientations as any)[key].Slice = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.sliders, action, {
-    Version: "0.0.1",
-    Value: (scanState.Orientations as any)[key].Slice,
-  });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
+  if (not) {
+    expect(spy).not.toHaveBeenCalledWith(FrontEndInterfaces.sliders, action, {
+      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,
+    });
+  }
 }
 
 async function testWatcherForInteractionSettings(
-  wrapper: any,
   key: string,
-  action: ScanMovementActions
+  action: ScanMovementActions,
+  not: boolean = false
 ) {
   const scanState = inflateScanState();
   (scanState.InteractionSettings as any)[key] = 100;
 
-  setupPayloadSpy(wrapper, FrontEndInterfaces.scan_movement, action, {
-    Version: "0.0.1",
-    Value: (scanState.InteractionSettings as any)[key],
-  });
-  wrapper.vm.setScanState(JSON.stringify(scanState));
+  setScanState(JSON.stringify(scanState));
 
   await flushPromises();
-}
-
-function setupPayloadSpy(
-  wrapper: any,
-  interfaceType: FrontEndInterfaces,
-  actionType: string,
-  message: any
-) {
-  wrapper.vm.sendPayload = (it: FrontEndInterfaces, a: string, m: any) => {
-    console.log(it, a, m);
-    expect(it).toBe(interfaceType);
-    expect(a).toBe(actionType);
-    expect(m).toStrictEqual(message);
-  };
+  if (not) {
+    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],
+    });
+  }
 }

package/src/components/selectors/ValueSelector.vue

@@ -35,6 +35,10 @@ const sliderValue = computed({
     emit("update:value", Math.floor(val));
   },
 });
+
+defineExpose({
+  sliderValue,
+});
 </script>
 
 <template>

package/src/components/selectors/__tests__/value-selector.spec.ts

@@ -7,11 +7,15 @@ import { flushPromises } from "@vue/test-utils";
 describe("ValueSelector.vue", () => {
   let wrapper = mountVuetify(ValueSelector, {
     value: 1,
+    min: 0,
+    max: 100,
   });
 
   beforeEach(() => {
     wrapper = mountVuetify(ValueSelector, {
       value: [0, 0],
+      min: 0,
+      max: 100,
     });
   });
 
@@ -27,6 +31,20 @@ describe("ValueSelector.vue", () => {
     expect(wrapper.vm.value).toStrictEqual(1);
   });
 
+  it("should set text lower than min limits", async () => {
+    wrapper.vm.sliderValue = -100;
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[0]]);
+  });
+
+  it("should set text higher than max limits", async () => {
+    wrapper.vm.sliderValue = 9000;
+    await flushPromises();
+
+    expect(wrapper.emitted()["update:value"]).toStrictEqual([[100]]);
+  });
+
   it("should set text", async () => {
     const slider = wrapper.findAllComponents(".v-text-field");
 

package/src/components/sliders/DoubleSliderSelector.vue

@@ -35,10 +35,12 @@ const sliderValue = computed({
   },
   set(value: Array<number>) {
     let val = value;
-    if (value[0] > props.max) val[0] = props.max;
-    if (value[1] > props.max) val[1] = props.max;
-    if (value[0] < props.min) val[0] = props.min;
-    if (value[1] < props.min) val[1] = props.min;
+    if (val[0] > props.max) val[0] = props.max;
+    if (val[1] > props.max) val[1] = props.max;
+    if (val[0] < props.min) val[0] = props.min;
+    if (val[1] < props.min) val[1] = props.min;
+    console.log(val);
+    console.log(props);
     const normalised = [Math.floor(val[0]), Math.floor(val[1])];
     emit("update:value", normalised);
   },
@@ -57,6 +59,10 @@ watch(
   },
   { deep: true }
 );
+
+defineExpose({
+  sliderValue,
+});
 </script>
 
 <template>