@3cr/viewer-browser 0.0.196 → 0.0.220

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

@@ -1,43 +1,46 @@
-import { describe, expect, it } from 'vitest';
-import { mountVuetify } from '~/helper';
-import { demoLicenceOptions, demoPatientOptions } from "@/components/demo/options";
-import { VueWrapper } from "@vue/test-utils";
+import { useVersion3cr } from '@/composables/useVersion3cr';
+import { nextTick } from 'vue';
+import { VBtn } from 'vuetify/components';
+import { mount } from '@vue/test-utils';
 import ViewerNavigationDrawerFooter from '@/components/modal/ViewerNavigationDrawerFooter.vue';
 
-async function testFooterItems(wrapper: VueWrapper): Promise<void> {
-  const resetScan = wrapper.findComponent('[data-testid="footer-0"]');
-  await resetScan.trigger('click');
-  expect(resetScan).toBeTruthy();
-
-  const enableCloudStorage = wrapper.findComponent('[data-testid="footer-1"]');
-  await enableCloudStorage.trigger('click');
-  expect(enableCloudStorage).toBeTruthy();
-
-  const sendTo3rdParty = wrapper.findComponent('[data-testid="footer-2"]');
-  await sendTo3rdParty.trigger('click');
-  expect(sendTo3rdParty).toBeTruthy();
-
-  const shareToMobile = wrapper.findComponent('[data-testid="footer-3"]');
-  await shareToMobile.trigger('click');
-  expect(shareToMobile).toBeTruthy();
-}
-
 describe('ViewerNavigationDrawerFooter tests', () => {
+  beforeEach(() => {
+    const version3cr = useVersion3cr();
+    version3cr.value = '1.0.0';
+  });
+
   it('should mount', () => {
-    const props = { options: {}, drawer: false };
-    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
+    const props = { drawer: false };
+    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
     expect(wrapper).toBeTruthy();
   });
 
-  it('should open patient modals', async () => {
-    const props = { options: demoPatientOptions, drawer: true };
-    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
-    await testFooterItems(wrapper);
+  it('should open modals', async () => {
+    const props = { drawer: true };
+    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
+    for (let i = 0; i < 4; ++i) {
+      const id = `[data-testid="footer-${i}"]`;
+      const footerItem = wrapper.find(id);
+      expect(footerItem).toBeTruthy();
+      const button = footerItem.findComponent(VBtn);
+      expect(button).toBeTruthy();
+      await button.trigger('click');
+      await nextTick();
+    }
+  });
+
+  it('should display version', () => {
+    const props = { drawer: true };
+    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
+    const version = wrapper.find('[data-testid="version"]');
+    expect(version.text()).toEqual('Version 1.0.0');
   });
 
-  it('should open licence modals', async () => {
-    const props = { options: demoLicenceOptions, drawer: true };
-    const wrapper = mountVuetify(ViewerNavigationDrawerFooter, props);
-    await testFooterItems(wrapper);
+  it('should display short version', () => {
+    const props = { drawer: false };
+    const wrapper = mount(ViewerNavigationDrawerFooter, { props });
+    const version = wrapper.find('[data-testid="version"]');
+    expect(version.text()).toEqual('1.0.0');
   });
 });

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

@@ -1,37 +1,39 @@
-import { describe, it, vi, expect } from "vitest";
-import { mountVuetify } from "~/helper";
-import { demoType } from "@/components/demo/options";
-import ViewerNavigationDrawerHeader from "@/components/modal/ViewerNavigationDrawerHeader.vue";
+import { mount } from '@vue/test-utils';
+import { demoType } from '@/components/demo/options';
+import { nextTick } from 'vue';
+import ViewerNavigationDrawerHeader from '@/components/modal/ViewerNavigationDrawerHeader.vue';
 
 describe('ViewerNavigationDrawerHeader tests', () => {
   it('should mount', () => {
-    const wrapper = mountVuetify(ViewerNavigationDrawerHeader);
+    const wrapper = mount(ViewerNavigationDrawerHeader);
     expect(wrapper).toBeTruthy();
   });
 
   it('should show collapsed licence logo', () => {
     const props = { drawer: false };
-    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
     expect(wrapper.find('img').exists()).toBeTruthy();
   });
 
   it('should show expanded licence logo', () => {
     const props = { drawer: true };
-    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
     expect(wrapper.find('img').exists()).toBeTruthy();
   });
 
   it('should show collapsed patient logo', async () => {
     vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
     const props = { drawer: false };
-    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
+    await nextTick();
     expect(wrapper.find('img').exists()).toBeTruthy();
   });
 
   it('should show expanded patient logo', async () => {
     vi.spyOn(demoType, 'value', 'get').mockReturnValue('patient');
     const props = { drawer: true };
-    const wrapper = mountVuetify(ViewerNavigationDrawerHeader, props);
+    const wrapper = mount(ViewerNavigationDrawerHeader, { props });
+    await nextTick();
     expect(wrapper.find('img').exists()).toBeTruthy();
   });
 });

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

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import ViewerScanView from '@/components/modal/ViewerScanView.vue';
+import { ScanView } from '@3cr/types-ts';
+import VerticalSliderSelector from '@/components/shared/VerticalSliderSelector.vue';
+import * as scan from '@/models/scanState';
+import { VBtn, VIcon } from 'vuetify/components';
+import ViewerActionRail from '@/components/modal/ViewerActionRail.vue';
+
+describe('ViewerScanView tests', () => {
+  it('should mount volume', () => {
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(ViewerScanView, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should mount transverse', async () => {
+    const props = { view: ScanView.Transverse };
+    const wrapper = mount(ViewerScanView, { props });
+    await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
+    expect(scan.scanState.value.Orientations.Transverse.Slice).toBe(100);
+  });
+
+  it('should mount coronal', async () => {
+    const props = { view: ScanView.Coronal };
+    const wrapper = mount(ViewerScanView, { props });
+    await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
+    expect(scan.scanState.value.Orientations.Coronal.Slice).toBe(100);
+  });
+
+  it('should mount sagittal', async () => {
+    const props = { view: ScanView.Sagittal };
+    const wrapper = mount(ViewerScanView, { props });
+    await wrapper.findComponent(VerticalSliderSelector).setValue(100, 'value');
+    expect(scan.scanState.value.Orientations.Sagittal.Slice).toBe(100);
+  });
+
+  it('should horizontal flip', () => {
+    vi.spyOn(scan, 'isHorizontalFlip').mockReturnValue(true);
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(ViewerScanView, { props });
+    expect(wrapper.findComponent(VIcon).isVisible()).toBeTruthy();
+  });
+
+  it('should vertical flip', () => {
+    vi.spyOn(scan, 'isVerticalFlip').mockReturnValue(true);
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(ViewerScanView, { props });
+    expect(wrapper.findComponent(VIcon).isVisible()).toBeTruthy();
+  });
+
+  it('should keep hover active', async () => {
+    const props = { view: ScanView.Volume };
+    const wrapper = mount(ViewerScanView, { props });
+    const actions = wrapper.findAllComponents(VBtn);
+    for (const action of actions) {
+      await action.trigger('click');
+    }
+    expect(wrapper.findComponent(ViewerActionRail).isVisible).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { registerOnPayloadHandler, createInstance } from '@3cr/sdk-browser';
+import { nextTick } from 'vue';
+import WebGL3DR from '../WebGL3DR.vue';
+import { mount } from '@vue/test-utils';
+
+describe('WebGL3DR spec', () => {
+  const navigator = {
+    userAgent: 'Android',
+    storage: {
+      estimate() {
+        return Promise.resolve({ usage: 100, quota: 100 });
+      }
+    }
+  };
+
+  it('creates instance', async () => {
+    mount(WebGL3DR);
+    await nextTick();
+    expect(createInstance).toHaveBeenCalled();
+    expect(registerOnPayloadHandler).toHaveBeenCalled();
+  });
+
+  it('should emit wheel event', () => {
+    const wrapper = mount(WebGL3DR);
+    const overlay = wrapper.find('#overlay');
+    overlay.trigger('wheel');
+    expect(wrapper.emitted('wheel')).toBeTruthy();
+  });
+
+  it('should emit mouseover event', () => {
+    const wrapper = mount(WebGL3DR);
+    const overlay = wrapper.find('#overlay');
+    overlay.trigger('mouseover');
+    expect(wrapper.emitted('mouseover')).toBeTruthy();
+  });
+
+  it('should emit mouseout event', () => {
+    const wrapper = mount(WebGL3DR);
+    const overlay = wrapper.find('#overlay');
+    overlay.trigger('mouseover');
+    overlay.trigger('mouseout');
+    expect(wrapper.emitted('mouseover')).toBeTruthy();
+    expect(wrapper.emitted('mouseout')).toBeTruthy();
+  });
+
+  it('should test user agent', () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator as any);
+    mount(WebGL3DR);
+    expect(document.head.children.length > 0).toBeTruthy();
+  });
+
+  it('should test storage', () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator as any);
+    mount(WebGL3DR);
+    expect(global.navigator.storage).toBeTruthy();
+  });
+});

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

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import {computed, mergeProps, ref} from "vue";
 import {ScanView} from "@3cr/types-ts";
-import {useViewer3cr} from "@/dataLayer/useViewer3cr";
+import {useViewer3cr} from "@/composables/useViewer3cr";
 
 interface Props {
   view: ScanView;

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

@@ -1,17 +1,12 @@
 <template>
-  <Action
-    text="Flip Horizontally"
-    icon="swap_horiz"
-    :variant="variant"
-    @click="flipHorizontal"
-  />
+  <Action text="Flip Horizontally" icon="swap_horiz" :variant="variant" @click="flipHorizontal" />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { ScanView } from "@3cr/types-ts";
-import { isHorizontalFlip } from "@/dataLayer/scanState";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { computed } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import { isHorizontalFlip } from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;

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

@@ -1,17 +1,12 @@
 <template>
-  <Action
-    text="Flip Vertically"
-    icon="swap_vert"
-    :variant="variant"
-    @click="flipVertical"
-  />
+  <Action text="Flip Vertically" icon="swap_vert" :variant="variant" @click="flipVertical" />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { ScanView } from "@3cr/types-ts";
-import { isVerticalFlip } from "@/dataLayer/scanState";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { computed } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import { isVerticalFlip } from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;

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

@@ -1,17 +1,12 @@
 <template>
-  <Action
-    :text="text"
-    :icon="icon"
-    :variant="variant"
-    @click="action"
-  />
+  <Action :text="text" :icon="icon" :variant="variant" @click="action" />
 </template>
 
 <script setup lang="ts">
-import { getViewName, isFullscreen, previousLayout } from "@/dataLayer/scanState";
-import { LayoutActions, ScanView, ViewSelectionActions } from "@3cr/types-ts";
-import { computed } from "vue";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { getViewName, isFullscreen, previousLayout } from '@/models/scanState';
+import { LayoutActions, ScanView, ViewSelectionActions } from '@3cr/types-ts';
+import { computed } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;
@@ -33,7 +28,7 @@ const icon = computed(() => {
 });
 
 const action = computed(() => {
-  return isFullscreen.value ? exitFullscreen : fullscreen
+  return isFullscreen.value ? exitFullscreen : fullscreen;
 });
 
 async function fullscreen(): Promise<void> {

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

@@ -0,0 +1,38 @@
+<template>
+  <Action :text="text" :icon="icon" :variant="variant" @click="hide" />
+</template>
+
+<script setup lang="ts">
+import { ScanView } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { computed, ref } from 'vue';
+import { getViewName } from '@/models/scanState';
+
+interface Props {
+  view: ScanView;
+  variant?: 'button' | 'menu-item';
+}
+const isHidden = ref<boolean>(false);
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'button'
+});
+
+const icon = computed(() => {
+  return isHidden.value ? 'visibility' : 'visibility_off';
+});
+
+const text = computed(() => {
+  return isHidden.value ? `Show the ${getViewName(props.view)} view.` : `Hide the ${getViewName(props.view)} view.`;
+});
+
+const viewer3cr = useViewer3cr();
+
+async function hide(): Promise<void> {
+  await viewer3cr.viewSelectionToggleView({
+    View: props.view,
+    Visibility: isHidden.value
+  });
+  isHidden.value = !isHidden.value;
+}
+</script>

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

@@ -4,30 +4,23 @@
       <span class="text-caption">3D Navigation Cube</span>
     </v-col>
     <v-col cols="4" class="d-flex justify-center">
-      <v-switch
-        :model-value="isEnabled"
-        data-testid="switch"
-        color="primary"
-        density="compact"
-        hide-details
-        @click="setEnabled(!isEnabled)"
-      />
+      <v-checkbox :model-value="isEnabled" color="primary" density="compact" hide-details @click="toggleVisibility" />
     </v-col>
   </v-row>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { scanState } from "@/dataLayer/scanState";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { computed } from 'vue';
+import { scanState } from '@/models/scanState';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 const viewer3cr = useViewer3cr();
 
 const isEnabled = computed(() => {
-  return scanState.value.NavigationCube.Interactivity.Value
+  return scanState.value.NavigationCube.Interactivity.Value;
 });
 
-async function setEnabled(value: boolean): Promise<void> {
-  await viewer3cr.setNavCubeInteractivity(value);
+async function toggleVisibility(): Promise<void> {
+  await viewer3cr.setNavCubeInteractivity(!isEnabled.value);
 }
 </script>

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

@@ -9,10 +9,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { ScanView } from "@3cr/types-ts";
-import { useEventListener } from "@/components/modal/composables/useEventListener";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { ref } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import { useEventListener } from '@/composables/useEventListener';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;

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

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ScanView, ViewSelectionActions } from "@3cr/types-ts";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { useViewer3cr } from "@/composables/useViewer3cr";
 
 interface Props {
   view: ScanView;

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

@@ -1,17 +1,7 @@
 <template>
-  <v-menu
-    data-testid="menu"
-    v-model="menuState"
-    location="top"
-    :close-on-content-click="false"
-  >
+  <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="`Rotate ${getViewName(view)} View`" icon="360" :variant="variant" />
     </template>
     <v-card>
       <v-card-title class="text-body-1">
@@ -29,19 +19,17 @@
       </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"> Rotate </v-btn>
       </v-card-actions>
     </v-card>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import { getViewName } from "@/dataLayer/scanState";
-import { computed, ref } from "vue";
-import { ScanView } from "@3cr/types-ts";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { getViewName } from '@/models/scanState';
+import { computed, ref } from 'vue';
+import { ScanView } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 interface Props {
   view: ScanView;
@@ -50,7 +38,7 @@ interface Props {
 
 type Emits = {
   'update:modal': [value: boolean];
-}
+};
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'button'

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

@@ -1,46 +1,24 @@
 <template>
-  <v-menu
-    v-model="menuState"
-    data-testid="menu"
-    :close-on-content-click="false"
-    location="end"
-  >
+  <v-menu v-model="menuState" data-testid="menu" :close-on-content-click="false" location="end">
     <template #activator="{ props }">
-      <Action
-        v-bind="props"
-        text="Slice the 3D Volume"
-        icon="cut"
-        :variant="variant"
-      />
+      <Action v-bind="props" text="Slice the 3D Volume" 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:value="tSlider"
-          label="Transverse"
-          v-bind="tMinMax"
-        />
-        <DoubleSliderSelector
-          v-model:value="sSlider"
-          label="Sagittal"
-          v-bind="sMinMax"
-        />
-        <DoubleSliderSelector
-          v-model:value="cSlider"
-          label="Coronal"
-          v-bind="cMinMax"
-        />
+        <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>
   </v-menu>
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from "vue";
-import {cMinMax, cSlider, sMinMax, sSlider, tMinMax, tSlider} from "@/dataLayer/scanState";
-import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
-import {ScanView} from "@3cr/types-ts";
+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';
 
 interface Props {
   view: ScanView;
@@ -49,7 +27,7 @@ interface Props {
 
 type Emits = {
   'update:modal': [value: boolean];
-}
+};
 
 withDefaults(defineProps<Props>(), {
   variant: 'button'

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

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { ScanView } from "@3cr/types-ts";
 import { computed, ref } from "vue";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { useViewer3cr } from "@/composables/useViewer3cr";
 
 interface Props {
   view: ScanView;

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

@@ -1,11 +1,10 @@
-import { expect, describe, it, vi } from "vitest";
-import { mountVuetify } from "~/helper";
-import Action from "@/components/modal/actions/Action.vue";
+import Action from '@/components/modal/actions/Action.vue';
+import { mount } from '@vue/test-utils';
 
 describe('Action tests', () => {
   it('should render as button', async () => {
-    const props = { text: '', icon: '', variant: 'button', onClick: vi.fn() };
-    const wrapper = mountVuetify(Action, props);
+    const props = { text: '', icon: '', variant: 'button' as 'button', onClick: vi.fn() };
+    const wrapper = mount(Action, { props });
     const button = wrapper.findComponent('[data-testid="button"]');
     expect(button).toBeTruthy();
     await button.trigger('click');
@@ -13,8 +12,8 @@ describe('Action tests', () => {
   });
 
   it('should render as menu-item', async () => {
-    const props = { text: '', icon: '', variant: 'menu-item', onClick: vi.fn() };
-    const wrapper = mountVuetify(Action, props);
+    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"]');
     expect(menuItem).toBeTruthy();
     await menuItem.trigger('click');
@@ -22,8 +21,8 @@ describe('Action tests', () => {
   });
 
   it('should render nothing', async () => {
-    const props = { text: '', icon: '', variant: 'invalid', onClick: vi.fn() };
-    const wrapper = mountVuetify(Action, props);
+    const props = { text: '', icon: '', variant: 'invalid' as any, onClick: vi.fn() };
+    const wrapper = mount(Action, { props });
     expect(wrapper.text()).toBe('');
   });
 });

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

@@ -1,14 +1,12 @@
-import {describe, expect, it, vi} from "vitest";
-import {ScanView} from "@3cr/types-ts";
-import {mountVuetify} from "~/helper";
-import {DOMWrapper} from "@vue/test-utils";
-import Flip3dAction from "@/components/modal/actions/Flip3dAction.vue";
-import {Viewer3cr} from "@/dataLayer/viewer3cr";
+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';
 
 describe('Flip3dAction tests', () => {
-  const spy = vi.spyOn(Viewer3cr.prototype, 'invertTransform').mockResolvedValue();
+  const spy = vi.spyOn(Viewer3crService.prototype, 'invertTransform').mockResolvedValue();
   const props = { view: ScanView.Volume };
-  const wrapper = mountVuetify(Flip3dAction, props);
+  const wrapper = mount(Flip3dAction, { props });
 
   it('should flip sagittal', async () => {
     const activator = wrapper.findComponent('[data-testid="activator"]');

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

@@ -1,15 +1,14 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify } from "~/helper";
-import { ScanView } from "@3cr/types-ts";
-import FlipHorizontalAction from "@/components/modal/actions/FlipHorizontalAction.vue";
-import {Viewer3cr} from "@/dataLayer/viewer3cr";
+import { ScanView } from '@3cr/types-ts';
+import { Viewer3crService } from '@/services/viewer-3cr.service';
+import { mount } from '@vue/test-utils';
+import FlipHorizontalAction from '@/components/modal/actions/FlipHorizontalAction.vue';
 
 describe('FlipHorizontalAction tests', () => {
-  const spy = vi.spyOn(Viewer3cr.prototype, 'flipHorizontally').mockResolvedValue();
+  const spy = vi.spyOn(Viewer3crService.prototype, 'flipHorizontally').mockResolvedValue();
   const props = { view: ScanView.Sagittal };
 
   it('should flip horizontally', async () => {
-    const wrapper = mountVuetify(FlipHorizontalAction, props);
+    const wrapper = mount(FlipHorizontalAction, { props });
     const action = wrapper.findComponent('[data-testid="button"]');
     await action.trigger('click');
     expect(spy).toHaveBeenCalledWith(props.view, true);