@3cr/viewer-browser 0.0.248 → 0.0.293

package/src/components/modal/actions/PanAction.vue

@@ -1,22 +1,22 @@
 <template>
   <Action
-    text="Pan"
+    :text="t('labels.pan')"
     icon="pan_tool"
     :color="enabled ? 'blue-lighten-1' : 'white'"
     :variant="variant"
-    @click="togglePan"
+    @click="toggle"
+    data-testid="button"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ScanView } from '@3cr/types-ts';
-import { useEventListener } from '@/composables/useEventListener';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
-  element: HTMLElement;
   variant?: 'button' | 'menu-item';
 }
 
@@ -24,55 +24,15 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'button'
 });
 
-useEventListener(props.element, 'mousedown', onMouseDown);
-useEventListener(props.element, 'mouseenter', onMouseEnter);
-useEventListener(props.element, 'mouseleave', onMouseLeave);
-useEventListener(window, 'mousemove', onMouseMove);
-useEventListener(window, 'mouseup', onMouseUp);
-
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
-const enabled = ref<boolean>(false);
-const mouseDown = ref<boolean>(false);
-const prev = ref({ x: 0, y: 0 });
-
-async function togglePan(): Promise<void> {
-  const value = !enabled.value;
-  await viewer3cr.hoverOverCanvas(!value);
-  enabled.value = value;
-}
-
-function onMouseDown(event: Event): void {
-  if (enabled.value) {
-    const { x, y } = event as MouseEvent;
-    prev.value = { x, y };
-    mouseDown.value = true;
-  }
-}
 
-async function onMouseMove(event: Event): Promise<void> {
-  if (enabled.value && mouseDown.value) {
-    const { x, y } = event as MouseEvent;
-    const xDelta = x - prev.value.x;
-    const yDelta = prev.value.y - y; // swapped because in js down is positive
-    await viewer3cr.panRight(props.view, xDelta);
-    await viewer3cr.panUp(props.view, yDelta);
-    prev.value = { x, y };
-  }
-}
-
-async function onMouseEnter(_: Event): Promise<void> {
-  if (enabled.value && !mouseDown.value) {
-    await viewer3cr.hoverOverCanvas(false);
-  }
-}
-
-async function onMouseLeave(_: Event): Promise<void> {
-  if (enabled.value && !mouseDown.value) {
-    await viewer3cr.hoverOverCanvas(true);
-  }
-}
+const enabled = ref<boolean>(false);
 
-function onMouseUp(_: Event): void {
-  mouseDown.value = false;
+async function toggle(): Promise<void> {
+  const state = !enabled.value;
+  const message = { Version: '0.0.0', View: props.view, Visibility: state };
+  await viewer3cr.pan({ message });
+  enabled.value = state;
 }
 </script>

package/src/components/modal/actions/ResetViewAction.vue

@@ -1,15 +1,12 @@
 <template>
-  <Action
-    text="Reset Views to Default"
-    icon="home"
-    :variant="variant"
-    @click="reset"
-  />
+  <Action :text="text" icon="home" :variant="variant" @click="reset" />
 </template>
 
 <script setup lang="ts">
-import { ScanView, ViewSelectionActions } from "@3cr/types-ts";
-import { useViewer3cr } from "@/composables/useViewer3cr";
+import { ScanView, ViewSelectionActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -20,8 +17,13 @@ withDefaults(defineProps<Props>(), {
   variant: 'button'
 });
 
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
 
+const text = computed(() => {
+  return t('labels.resetView');
+});
+
 async function reset(): Promise<void> {
   await viewer3cr.viewSelection(ViewSelectionActions.vs06);
   await viewer3cr.viewSelection(ViewSelectionActions.vs05);

package/src/components/modal/actions/Rotate2dAction.vue

@@ -1,42 +1,40 @@
 <template>
   <v-menu data-testid="menu" v-model="menuState" location="top" :close-on-content-click="false">
     <template #activator="{ props: menu }">
-      <Action v-bind="menu" :text="`Rotate ${getViewName(view)} View`" icon="360" :variant="variant" />
+      <Action v-bind="menu" :text="text" icon="360" :variant="variant" />
     </template>
     <v-card>
       <v-card-title class="text-body-1">
-        <span>Rotate {{ getViewName(view) }} View</span>
+        <span>{{ text }}</span>
       </v-card-title>
       <v-card-text>
-        <v-text-field
-          data-testid="rotation"
-          v-model="rotationDeg"
-          type="number"
-          variant="outlined"
-          suffix="deg"
-          hide-details
-        />
+        <v-text-field data-testid="angle" v-model="angle" type="number" variant="outlined" suffix="deg" hide-details />
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn data-testid="rotate" color="primary" @click="rotate"> Rotate </v-btn>
+        <v-btn data-testid="rotate" color="primary" @click="rotate">
+          <span>{{ t('labels.rotate') }}</span>
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import { getViewName } from '@/models/scanState';
 import { computed, ref } from 'vue';
-import { ScanView } from '@3cr/types-ts';
+import { RotationValue, ScanView } from '@3cr/types-ts';
 import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
+import { useViewName } from '@/composables/useViewName';
 
 interface Props {
   view: ScanView;
   variant?: 'button' | 'menu-item';
+  modelValue?: boolean;
 }
 
 type Emits = {
+  'update:modelValue': [value: boolean];
   'update:modal': [value: boolean];
 };
 
@@ -46,9 +44,16 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const { t } = useI18n();
+const { name } = useViewName(props.view);
 const viewer3cr = useViewer3cr();
+
 const menu = ref<boolean>(false);
-const rotationDeg = ref<number>(0);
+const angle = ref<number>(0);
+
+const text = computed(() => {
+  return t('labels.rotateView', { view: name.value });
+});
 
 const menuState = computed({
   get(): boolean {
@@ -61,6 +66,11 @@ const menuState = computed({
 });
 
 async function rotate(): Promise<void> {
-  await viewer3cr.rotateByDeg(props.view, rotationDeg.value);
+  const message: RotationValue = {
+    Version: '0.0.0',
+    View: props.view,
+    Angle: angle.value
+  };
+  await viewer3cr.rotateByDeg({ message });
 }
 </script>

package/src/components/modal/actions/Slice3dAction.vue

@@ -1,17 +1,22 @@
 <template>
-  <v-menu v-model="menuState" data-testid="menu" :close-on-content-click="false" location="end">
+  <v-overlay
+    v-model="menuState"
+    data-testid="menu"
+    location-strategy="connected"
+    location="end"
+    origin="top start"
+    target="#volume"
+    :scrim="false"
+  >
     <template #activator="{ props }">
-      <Action v-bind="props" text="Slice the 3D Volume" icon="cut" :variant="variant" />
+      <Action v-bind="props" :text="text" icon="cut" :variant="variant" />
     </template>
-    <v-card min-width="400" class="pb-2">
-      <v-card-title>Slice into the 3D Volume</v-card-title>
-      <v-card-text>
-        <DoubleSliderSelector v-model="tSlider" label="Transverse" v-bind="tMinMax" />
-        <DoubleSliderSelector v-model="sSlider" label="Sagittal" v-bind="sMinMax" />
-        <DoubleSliderSelector v-model="cSlider" label="Coronal" v-bind="cMinMax" />
-      </v-card-text>
+    <v-card class="px-8 py-4 overflow-hidden" width="300">
+      <DoubleSliderSelector v-model="tSlider" :label="t('enums.scanView.transverse')" v-bind="tMinMax" />
+      <DoubleSliderSelector v-model="sSlider" :label="t('enums.scanView.sagittal')" v-bind="sMinMax" />
+      <DoubleSliderSelector v-model="cSlider" :label="t('enums.scanView.coronal')" v-bind="cMinMax" />
     </v-card>
-  </v-menu>
+  </v-overlay>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +24,7 @@ import { computed, ref } from 'vue';
 import { cMinMax, cSlider, sMinMax, sSlider, tMinMax, tSlider } from '@/models/scanState';
 import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
 import { ScanView } from '@3cr/types-ts';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -35,8 +41,14 @@ withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const { t } = useI18n();
+
 const menu = ref<boolean>(false);
 
+const text = computed(() => {
+  return t('labels.slice');
+});
+
 const menuState = computed({
   get(): boolean {
     return menu.value;

package/src/components/modal/actions/ZoomAction.vue

@@ -1,28 +1,24 @@
 <template>
   <v-menu data-testid="menu" v-model="menuState" :close-on-content-click="false">
     <template #activator="{ props: menu }">
-      <Action
-        v-bind="menu"
-        text="Zoom"
-        icon="search"
-        :variant="variant"
-      />
+      <Action v-bind="menu" :text="t('labels.zoom')" icon="search" :variant="variant" />
     </template>
     <v-list>
       <v-list-item data-testid="zoom-in" prepend-icon="zoom_in" @click.stop="zoomIn">
-        <v-list-item-title>Zoom In</v-list-item-title>
+        <v-list-item-title>{{ t('labels.zoomIn') }}</v-list-item-title>
       </v-list-item>
       <v-list-item data-testid="zoom-out" prepend-icon="zoom_out" @click.stop="zoomOut">
-        <v-list-item-title>Zoom Out</v-list-item-title>
+        <v-list-item-title>{{ t('labels.zoomOut') }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import { ScanView } from "@3cr/types-ts";
-import { computed, ref } from "vue";
-import { useViewer3cr } from "@/composables/useViewer3cr";
+import { MovementData, ScanView } from '@3cr/types-ts';
+import { computed, ref } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   view: ScanView;
@@ -41,7 +37,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const { t } = useI18n();
 const viewer3cr = useViewer3cr();
+
 const menu = ref<boolean>(false);
 
 const menuState = computed({
@@ -55,11 +53,21 @@ const menuState = computed({
 });
 
 async function zoomOut(): Promise<void> {
-  await viewer3cr.zoomOut(props.view, props.percentage);
+  const message: MovementData = {
+    Version: '0.0.0',
+    View: props.view,
+    Movement: props.percentage
+  };
+  await viewer3cr.zoomOut({ message });
 }
 
 async function zoomIn(): Promise<void> {
-  await viewer3cr.zoomIn(props.view, props.percentage);
+  const message: MovementData = {
+    Version: '0.0.0',
+    View: props.view,
+    Movement: props.percentage
+  };
+  await viewer3cr.zoomIn({ message });
 }
 </script>
 

package/src/components/modal/actions/__tests__/Action.spec.ts

@@ -5,7 +5,7 @@ describe('Action tests', () => {
   it('should render as button', async () => {
     const props = { text: '', icon: '', variant: 'button' as 'button', onClick: vi.fn() };
     const wrapper = mount(Action, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     expect(button).toBeTruthy();
     await button.trigger('click');
     expect(props.onClick).toHaveBeenCalled();
@@ -14,7 +14,7 @@ describe('Action tests', () => {
   it('should render as menu-item', async () => {
     const props = { text: '', icon: '', variant: 'menu-item' as 'menu-item', onClick: vi.fn() };
     const wrapper = mount(Action, { props });
-    const menuItem = wrapper.findComponent('[data-testid="menu-item"]');
+    const menuItem = wrapper.findComponentByTestId('menu-item');
     expect(menuItem).toBeTruthy();
     await menuItem.trigger('click');
     expect(props.onClick).toHaveBeenCalled();

package/src/components/modal/actions/__tests__/Flip3dAction.spec.ts

@@ -1,46 +1,90 @@
 import { ScanView } from '@3cr/types-ts';
 import { DOMWrapper, mount } from '@vue/test-utils';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
 import Flip3dAction from '@/components/modal/actions/Flip3dAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('Flip3dAction tests', () => {
-  const spy = vi.spyOn(Viewer3crService.prototype, 'invertTransform').mockResolvedValue();
+  const viewer3cr = useViewer3cr();
   const props = { view: ScanView.Volume };
+
+  const spy = vi.spyOn(viewer3cr, 'invertTransform').mockResolvedValue();
   const wrapper = mount(Flip3dAction, { props });
 
   it('should flip sagittal', async () => {
-    const activator = wrapper.findComponent('[data-testid="activator"]');
+    const activator = wrapper.findComponentByTestId('activator');
     await activator.trigger('click');
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const sagittal = menu.findComponent('[data-testid="sagittal"]');
+    const sagittal = menu.findComponentByTestId('sagittal');
     await sagittal.trigger('click');
-    expect(spy).toHaveBeenCalledWith(true, false, false);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: true,
+        InvertedCoronal: false,
+        InvertedTransverse: false,
+        Version: '0.0.0'
+      }
+    });
     await activator.trigger('click');
     await sagittal.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false, false, false);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: true,
+        InvertedCoronal: false,
+        InvertedTransverse: false,
+        Version: '0.0.0'
+      }
+    });
   });
 
   it('should flip coronal', async () => {
-    const activator = wrapper.findComponent('[data-testid="activator"]');
+    const activator = wrapper.findComponentByTestId('activator');
     await activator.trigger('click');
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const coronal = menu.findComponent('[data-testid="coronal"]');
+    const coronal = menu.findComponentByTestId('coronal');
     await coronal.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false, true, false);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: false,
+        InvertedCoronal: true,
+        InvertedTransverse: false,
+        Version: '0.0.0'
+      }
+    });
     await activator.trigger('click');
     await coronal.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false, false, false);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: false,
+        InvertedCoronal: false,
+        InvertedTransverse: false,
+        Version: '0.0.0'
+      }
+    });
   });
 
   it('should flip transverse', async () => {
-    const activator = wrapper.findComponent('[data-testid="activator"]');
+    const activator = wrapper.findComponentByTestId('activator');
     await activator.trigger('click');
     const menu = new DOMWrapper(document.querySelector('[data-testid="menu"]'));
-    const transverse = menu.findComponent('[data-testid="transverse"]');
+    const transverse = menu.findComponentByTestId('transverse');
     await transverse.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false, false, true);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: false,
+        InvertedCoronal: false,
+        InvertedTransverse: true,
+        Version: '0.0.0'
+      }
+    });
     await activator.trigger('click');
     await transverse.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false, false, false);
+    expect(spy).toHaveBeenCalledWith({
+      message: {
+        InvertedSagittal: false,
+        InvertedCoronal: false,
+        InvertedTransverse: false,
+        Version: '0.0.0'
+      }
+    });
   });
 });

package/src/components/modal/actions/__tests__/FlipHorizontalAction.spec.ts

@@ -1,16 +1,26 @@
-import { ScanView } from '@3cr/types-ts';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { FlipValue, ScanView } from '@3cr/types-ts';
 import { mount } from '@vue/test-utils';
 import FlipHorizontalAction from '@/components/modal/actions/FlipHorizontalAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+function makeFlipValue(view: ScanView, value: boolean): FlipValue {
+  return {
+    Version: expect.any(String),
+    View: view,
+    Flipped: value
+  };
+}
 
 describe('FlipHorizontalAction tests', () => {
-  const spy = vi.spyOn(Viewer3crService.prototype, 'flipHorizontally').mockResolvedValue();
+  const viewer3cr = useViewer3cr();
   const props = { view: ScanView.Sagittal };
 
+  const spy = vi.spyOn(viewer3cr, 'flipHorizontally').mockResolvedValue();
+
   it('should flip horizontally', async () => {
     const wrapper = mount(FlipHorizontalAction, { props });
-    const action = wrapper.findComponent('[data-testid="button"]');
+    const action = wrapper.findComponentByTestId('button');
     await action.trigger('click');
-    expect(spy).toHaveBeenCalledWith(props.view, true);
+    expect(spy).toHaveBeenCalledWith({ message: makeFlipValue(props.view, true) });
   });
 });

package/src/components/modal/actions/__tests__/FlipVerticalAction.spec.ts

@@ -1,16 +1,26 @@
-import { ScanView } from '@3cr/types-ts';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { FlipValue, ScanView } from '@3cr/types-ts';
 import { mount } from '@vue/test-utils';
 import FlipVerticalAction from '@/components/modal/actions/FlipVerticalAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+
+function makeFlipValue(view: ScanView, value: boolean): FlipValue {
+  return {
+    Version: expect.any(String),
+    View: view,
+    Flipped: value
+  };
+}
 
 describe('FlipVerticalAction tests', () => {
-  const spy = vi.spyOn(Viewer3crService.prototype, 'flipVertically').mockResolvedValue();
+  const viewer3cr = useViewer3cr();
+
+  const spy = vi.spyOn(viewer3cr, 'flipVertically').mockResolvedValue();
   const props = { view: ScanView.Sagittal };
 
   it('should flip horizontally', async () => {
     const wrapper = mount(FlipVerticalAction, { props });
-    const action = wrapper.findComponent('[data-testid="button"]');
+    const action = wrapper.findComponentByTestId('button');
     await action.trigger('click');
-    expect(spy).toHaveBeenCalledWith(props.view, true);
+    expect(spy).toHaveBeenCalledWith({ message: makeFlipValue(props.view, true) });
   });
 });

package/src/components/modal/actions/__tests__/FullscreenAction.spec.ts

@@ -1,17 +1,19 @@
 import { CurrentScanState, LayoutActions, ScanView } from '@3cr/types-ts';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
 import { previousLayout, scanState } from '@/models/scanState';
 import FullscreenAction from '../FullscreenAction.vue';
 import { mount } from '@vue/test-utils';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('FullscreenAction tests', () => {
+  const viewer3cr = useViewer3cr();
   const props = { view: ScanView.Coronal };
-  const layoutsSpy = vi.spyOn(Viewer3crService.prototype, 'layouts').mockResolvedValue();
-  const viewSpy = vi.spyOn(Viewer3crService.prototype, 'viewSelection').mockResolvedValue();
+
+  const layoutsSpy = vi.spyOn(viewer3cr, 'layouts').mockResolvedValue();
+  const viewSpy = vi.spyOn(viewer3cr, 'viewSelection').mockResolvedValue();
 
   it('should fullscreen', async () => {
     const wrapper = mount(FullscreenAction, { props });
-    const button = wrapper.find('[data-testid="button"]');
+    const button = wrapper.findByTestId('button');
     await button.trigger('click');
     expect(layoutsSpy).toHaveBeenCalledWith(LayoutActions.lo01);
     expect(viewSpy).toHaveBeenCalledWith(`vs_0${props.view + 1}`);
@@ -20,7 +22,7 @@ describe('FullscreenAction tests', () => {
   it('should exit fullscreen', async () => {
     scanState.value = { Layout: { PositionData: [{}] } } as CurrentScanState;
     const wrapper = mount(FullscreenAction, { props });
-    const button = wrapper.find('[data-testid="button"]');
+    const button = wrapper.findByTestId('button');
     await button.trigger('click');
     expect(layoutsSpy).toHaveBeenCalledWith(previousLayout.value);
   });

package/src/components/modal/actions/__tests__/PanAction.spec.ts

@@ -1,45 +1,26 @@
 import { ScanView } from '@3cr/types-ts';
-import { Viewer3crService } from '@/services/viewer-3cr.service';
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import PanAction from '@/components/modal/actions/PanAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('PanAction tests', () => {
-  const spy = vi.spyOn(Viewer3crService.prototype, 'hoverOverCanvas').mockResolvedValue();
-  const element = { addEventListener: vi.fn(), removeEventListener: vi.fn() } as unknown as HTMLElement;
-  const windowAddSpy = vi.spyOn(window, 'addEventListener');
-  // const windowRemoveSpy = vi.spyOn(window, 'removeEventListener');
+  const viewer3cr = useViewer3cr();
 
-  it('should setup event listeners', async () => {
-    const props = { view: ScanView.Volume, element };
-    mount(PanAction, { props });
-    expect(element.addEventListener).toHaveBeenCalledWith('mousedown', expect.anything());
-    expect(element.addEventListener).toHaveBeenCalledWith('mouseenter', expect.anything());
-    expect(element.addEventListener).toHaveBeenCalledWith('mouseleave', expect.anything());
-    expect(windowAddSpy).toHaveBeenCalledWith('mousemove', expect.anything());
-    expect(windowAddSpy).toHaveBeenCalledWith('mouseup', expect.anything());
-  });
+  const spy = vi.spyOn(viewer3cr, 'pan').mockResolvedValue();
 
   it('should disable unity input while active', async () => {
-    const props = { view: ScanView.Volume, element };
+    const props = { view: ScanView.Volume };
     const wrapper = mount(PanAction, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     await button.trigger('click');
-    expect(spy).toHaveBeenCalledWith(false);
-  });
-
-  it('should call event handlers', async () => {
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    const props = { view: ScanView.Volume, element };
-    const wrapper = mount(PanAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    await flushPromises();
+    expect(spy).toHaveBeenCalledWith({
+      message: { Version: '0.0.0', View: ScanView.Volume, Visibility: true }
+    });
     await button.trigger('click');
-    element.dispatchEvent(new MouseEvent('mousedown', { clientX: 0, clientY: 0 }));
-    window.dispatchEvent(new MouseEvent('mousemove', { clientX: 0, clientY: 0 }));
-    window.dispatchEvent(new MouseEvent('mouseup', { clientX: 0, clientY: 0 }));
-    element.dispatchEvent(new MouseEvent('mouseenter', { clientX: 0, clientY: 0 }));
-    element.dispatchEvent(new MouseEvent('mouseleave', { clientX: 0, clientY: 0 }));
-    expect(spy).toHaveBeenCalledWith(false);
-    expect(spy).toHaveBeenCalledWith(true);
+    await flushPromises();
+    expect(spy).toHaveBeenCalledWith({
+      message: { Version: '0.0.0', View: ScanView.Volume, Visibility: false }
+    });
   });
 });

package/src/components/modal/actions/__tests__/ResetViewAction.spec.ts

@@ -1,15 +1,17 @@
-import { Viewer3crService } from '@/services/viewer-3cr.service';
 import { ScanView, ViewSelectionActions } from '@3cr/types-ts';
 import { mount } from '@vue/test-utils';
 import ResetViewAction from '@/components/modal/actions/ResetViewAction.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 describe('ResetViewAction tests', () => {
-  const viewSelectionSpy = vi.spyOn(Viewer3crService.prototype, 'viewSelection').mockResolvedValue();
+  const viewer3cr = useViewer3cr();
+
+  const viewSelectionSpy = vi.spyOn(viewer3cr, 'viewSelection').mockResolvedValue();
 
   it('should reset view', async () => {
     const props = { view: ScanView.Volume };
     const wrapper = mount(ResetViewAction, { props });
-    const button = wrapper.findComponent('[data-testid="button"]');
+    const button = wrapper.findComponentByTestId('button');
     await button.trigger('click');
     expect(viewSelectionSpy).toHaveBeenCalledWith(ViewSelectionActions.vs06);
     expect(viewSelectionSpy).toHaveBeenCalledWith(ViewSelectionActions.vs05);