@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/demo/licence/__tests__/DemoLicenceEnableCloudStorageModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import DemoLicenceEnableCloudStorageModal from "@/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue";
-import { PRICING_URL } from "../../options";
+import { PRICING_URL } from '../../options';
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import DemoLicenceEnableCloudStorageModal from '@/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue';
 
 describe('DemoLicenceEnableCloudStorageModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open pricing url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoLicenceEnableCloudStorageModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/licence/__tests__/DemoLicenceInfoModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { SUPPORT_URL } from "@/components/demo/options";
-import DemoLicenceInfoModal from "@/components/demo/licence/DemoLicenceInfoModal.vue";
+import { demoLicenceSubtitles, demoLicenceTitle, SUPPORT_URL } from '@/components/demo/options';
+import { mount } from '@vue/test-utils';
+import { VCardText, VCardTitle, VDialog } from 'vuetify/components';
+import DemoLicenceInfoModal from '@/components/demo/licence/DemoLicenceInfoModal.vue';
 
 describe('DemoLicenceInfoModal tests', () => {
   it('should mount', () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    const wrapper = mount(DemoLicenceInfoModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    const wrapper = mount(DemoLicenceInfoModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open support url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
-    const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mount(DemoLicenceInfoModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(SUPPORT_URL, '_self');
@@ -31,7 +31,17 @@ describe('DemoLicenceInfoModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false, isModalOpen: true };
-    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoLicenceInfoModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
+  });
+
+  it('should show title and subtitle', async () => {
+    vi.spyOn(demoLicenceTitle, 'value', 'get').mockReturnValue('Title');
+    vi.spyOn(demoLicenceSubtitles, 'value', 'get').mockReturnValue(['Subtitle']);
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mount(DemoLicenceInfoModal, { props });
+    expect(wrapper.findComponent(VCardTitle).text()).contains('Title');
+    expect(wrapper.findComponent(VCardText).text()).contains('Subtitle');
   });
 });

package/src/components/demo/licence/__tests__/DemoLicenceSendToPartyModal.spec.ts

@@ -1,18 +1,17 @@
-import { describe, expect, it } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { VTextField } from "vuetify/components";
-import DemoLicenceSendToPartyModal from "@/components/demo/licence/DemoLicenceSendToPartyModal.vue";
+import { VDialog, VTextField } from 'vuetify/components';
+import { mount } from '@vue/test-utils';
+import DemoLicenceSendToPartyModal from '@/components/demo/licence/DemoLicenceSendToPartyModal.vue';
 
 describe('DemoLicenceSendToPartyModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should enter email', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
     const input = wrapper.getComponent(VTextField);
     await input.setValue('example@singular.health');
     await input.trigger('keyup.enter');
@@ -22,15 +21,16 @@ describe('DemoLicenceSendToPartyModal tests', () => {
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoLicenceSendToPartyModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/licence/__tests__/DemoLicenceShareToMobileModal.spec.ts

@@ -1,31 +1,31 @@
-import { describe, expect, it, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { PRICING_URL } from "../../options";
-import DemoLicenceShareToMobileModal from "@/components/demo/licence/DemoLicenceShareToMobileModal.vue";
+import { PRICING_URL } from '../../options';
+import { mount } from '@vue/test-utils';
+import { VDialog } from 'vuetify/components';
+import DemoLicenceShareToMobileModal from '@/components/demo/licence/DemoLicenceShareToMobileModal.vue';
 
 describe('DemoLicenceShareToMobileModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
     const close = wrapper.findComponent('[data-testid="close-1"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should go to next step and open url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
     const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
     await confirm1.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
     const confirm2 = wrapper.findComponent('[data-testid="confirm-2"]');
     await confirm2.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -34,10 +34,10 @@ describe('DemoLicenceShareToMobileModal tests', () => {
 
   it('should go to next step and close', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
     const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
     await confirm1.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
     const close2 = wrapper.findComponent('[data-testid="close-2"]');
     await close2.trigger('click');
     expect(wrapper.text()).toBe('');
@@ -45,7 +45,8 @@ describe('DemoLicenceShareToMobileModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoLicenceShareToMobileModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/options.ts

@@ -1,18 +1,20 @@
-import { computed, ref, unref, watch } from "vue";
-import { LoadViewerOptions } from "@/models/LoadViewerOptions";
-import { LoadViewerPayload } from "@/models/LoadViewerPayload";
+import { computed, ref } from 'vue';
+import { LoadViewerOptions } from '@/models/loadViewerOptions';
+import { LoadViewerPayload } from '@/models/loadViewerPayload';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { mockDemoViewerStlDecimator } from '@/composables/useViewerOptions';
+import { DemoType } from '@/types/demo-type';
 
 export const PRICING_URL = 'https://3dicomviewer.com/pricing';
+
 export const SUPPORT_URL = 'https://3dicomviewer.com/contact-3dicom';
 
-export function checkIsDemo(payload: LoadViewerPayload) {
-  isDemo.value =
-    payload.Url ===
-    "https://webgl-3dr.singular.health/test_scans/01440d4e-8b04-4b90-bb2c-698535ce16d6/CHEST.3vxl";
-}
+const BASE_STATE_URL = 'https://webgl-3dr.singular.health/demo';
 
+const viewer3cr = useViewer3cr();
 export const isDemo = ref<boolean>(false);
-export const m_demo = ref<boolean>(false);
+export const show = ref<boolean>(true);
+export const m_demoLicence = ref<boolean>(false);
 export const m_demoLicenceShareToMobile = ref<boolean>(false);
 export const m_demoLicenceSendToParty = ref<boolean>(false);
 export const m_demoLicenseEnableCloudStorage = ref<boolean>(false);
@@ -20,50 +22,47 @@ export const m_demoPatient = ref<boolean>(false);
 export const m_demoPatientShareToMobile = ref<boolean>(false);
 export const m_demoPatientSendToParty = ref<boolean>(false);
 export const m_demoPatientEnableCloudStorage = ref<boolean>(false);
-export const demoPatientTitle = ref<string>("");
+export const demoPatientTitle = ref<string>('');
 export const demoPatientSubtitles = ref<Array<string>>([]);
-export const demoLicenceTitle = ref<string>("");
+export const demoLicenceTitle = ref<string>('');
 export const demoLicenceSubtitles = ref<Array<string>>([]);
 
 export const demoLicenceOptions: LoadViewerOptions = {
-  OnClosePopup: () => Promise.resolve(),
+  OnClosePopup: undefined,
   OnExitViewer: () => {
-    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
+    demoLicenceTitle.value = 'Thank you for trying the 3Dicom Licensing Demo.';
     demoLicenceSubtitles.value = [
-      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+      'Should you have any further questions or enquiries, please get in touch by emailing support@singular.health'
     ];
-    m_demo.value = true;
+    m_demoLicence.value = true;
+    show.value = false;
   },
   OnLoadNewDicomSeries: () => {
-    demoLicenceTitle.value = "Support multiple medical imaging file types";
+    demoLicenceTitle.value = 'Support multiple medical imaging file types';
     demoLicenceSubtitles.value = [
-      "3Dicom’s white-labelled online 2D / 3D DICOM viewer allows the loading of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET) using the global DICOM file format.",
+      '3Dicom’s white-labelled online 2D / 3D DICOM viewer allows the loading of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET) using the global DICOM file format.'
     ];
 
-    m_demo.value = true;
+    m_demoLicence.value = true;
   },
   OnDownloadDicomSeries: () => {
-    demoLicenceTitle.value =
-      "Improve interoperability with local download of DICOM series";
+    demoLicenceTitle.value = 'Improve interoperability with local download of DICOM series';
     demoLicenceSubtitles.value = [
-      "Integrate 3Dicom’s white-labelled online 2D/3D viewer into your PACS and/or medical records database to pull DICOM series and allow for local download direct from the viewer. This feature can be hidden upon request.",
+      'Integrate 3Dicom’s white-labelled online 2D/3D viewer into your PACS and/or medical records database to pull DICOM series and allow for local download direct from the viewer. This feature can be hidden upon request.'
     ];
-    m_demo.value = true;
+    m_demoLicence.value = true;
   },
   OnLoadSavedSession: () => {
-    demoLicenceTitle.value =
-      "Save previous progress and share particular sessions";
+    demoLicenceTitle.value = 'Save previous progress and share particular sessions';
     demoLicenceSubtitles.value = [
-      "3Dicom’s viewer enables session-saving to record any changes made during the viewing of medical scans including orientation of views, editing of labels, visualisation settings, and density settings. Changes made during sessions preserve the integrity of the DICOM file and are overlaid in future sessions.",
+      '3Dicom’s viewer enables session-saving to record any changes made during the viewing of medical scans including orientation of views, editing of labels, visualisation settings, and density settings. Changes made during sessions preserve the integrity of the DICOM file and are overlaid in future sessions.'
     ];
-    m_demo.value = true;
+    m_demoLicence.value = true;
   },
   OnSaveSession: () => {
-    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
-    demoLicenceSubtitles.value = [
-      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
-    ];
-    m_demo.value = true;
+    demoLicenceTitle.value = 'Thank you for trying the 3Dicom Licensing Demo.';
+    demoLicenceSubtitles.value = ['Each 3Dicom viewer session can be saved with your changes made for future viewing.'];
+    m_demoLicence.value = true;
   },
   OnSendTo3rdParty: () => {
     m_demoLicenceSendToParty.value = true;
@@ -74,60 +73,52 @@ export const demoLicenceOptions: LoadViewerOptions = {
   OnEnableCloudStorage: () => {
     m_demoLicenseEnableCloudStorage.value = true;
   },
-  OnShare: () => {
-    //TODO:
-    // m_demo.value = true;
+  OnAutoAnnotate: async () => {
+    mockDemoViewerStlDecimator();
+    await viewer3cr.loadMcadObjects({ Url: `${BASE_STATE_URL}/state/TotalSegmentator_1722837421466.3crms` });
   },
+  OnShare: undefined,
   OnScreenshot: undefined,
-  OnErrorClose: () => Promise.resolve(),
+  OnErrorClose: undefined
 };
 
 export const demoPatientOptions: LoadViewerOptions = {
-  OnClosePopup: () => Promise.resolve(),
+  OnClosePopup: undefined,
   OnExitViewer: () => {
-    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
+    demoPatientTitle.value = 'Thank you for trying the 3Dicom Patient Demo.';
     demoPatientSubtitles.value = [
-      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+      'Should you have any further questions or enquiries, please get in touch by emailing support@singular.health'
     ];
     m_demoPatient.value = true;
-    watch(m_demoPatient, () => {
-      if (!m_demoPatient) {
-        window.close();
-      }
-    });
+    show.value = false;
   },
   OnLoadNewDicomSeries: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient supports multiple Medical Imaging Formats";
+    demoPatientTitle.value = '3Dicom Patient supports multiple Medical Imaging Formats';
     demoPatientSubtitles.value = [
-      "3Dicom Patient enables you to load of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET), using the global DICOM file format.",
-      "Purchase 3Dicom Patient to load your own medical images and view in 2D / 3D.",
+      '3Dicom Patient enables you to load of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET), using the global DICOM file format.',
+      'Purchase 3Dicom Patient to load your own medical images and view in 2D / 3D.'
     ];
     m_demoPatient.value = true;
   },
   OnDownloadDicomSeries: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient enables on-demand download of DICOM series";
+    demoPatientTitle.value = '3Dicom Patient enables on-demand download of DICOM series';
     demoPatientSubtitles.value = [
-      "3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. ",
-      "DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.",
-      "Purchase 3Dicom Patient to gain control over your DICOM file storage.",
+      '3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. ',
+      'DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.',
+      'Purchase 3Dicom Patient to gain control over your DICOM file storage.'
     ];
     m_demoPatient.value = true;
   },
   OnLoadSavedSession: () => {
-    demoPatientTitle.value =
-      "3Dicom Patient allows you to load previous Sessions";
+    demoPatientTitle.value = '3Dicom Patient allows you to load previous Sessions';
     demoPatientSubtitles.value = [
-      "3Dicom Patient gives you to option to save any changes made during the viewing of your scan including orientation of views, editing of labels, visualisation settings, and density settings to easily view your scans the same way in the future. Session data can also be shared to 3rd parties so they see your scan the same way that you do.",
+      '3Dicom Patient gives you to option to save any changes made during the viewing of your scan including orientation of views, editing of labels, visualisation settings, and density settings to easily view your scans the same way in the future. Session data can also be shared to 3rd parties so they see your scan the same way that you do.'
     ];
     m_demoPatient.value = true;
   },
   OnSaveSession: () => {
-    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
-    demoPatientSubtitles.value = [
-      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
-    ];
+    demoPatientTitle.value = 'Thank you for trying the 3Dicom Patient Demo.';
+    demoPatientSubtitles.value = ['Each 3Dicom viewer session can be saved with your changes made for future viewing.'];
     m_demoPatient.value = true;
   },
   OnSendTo3rdParty: () => {
@@ -139,34 +130,41 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnEnableCloudStorage: () => {
     m_demoPatientEnableCloudStorage.value = true;
   },
-  OnShare: () => {
-    //TODO:
-    // m_demoPatient.value = true;
-  },
+  OnAutoAnnotate: demoLicenceOptions.OnAutoAnnotate,
+  OnShare: undefined,
   OnScreenshot: undefined,
-  OnErrorClose: () => Promise.resolve(),
+  OnErrorClose: undefined
 };
 
-const optionalTypes = ["licence", "patient"];
+export function checkIsDemo(payload: LoadViewerPayload) {
+  isDemo.value = payload.Url.startsWith('https://webgl-3dr.singular.health/demo');
+}
 
 export const demoType = computed(() => {
   const urlParams = new URLSearchParams(window.location.search);
-  let type = (urlParams.get("demoType") || "licence").toLowerCase();
-
-  if (type === "license") type = optionalTypes[0];
-  return optionalTypes.includes(type) ? type : optionalTypes[0];
+  if (urlParams.has('demoType')) {
+    const demoType = urlParams.get('demoType')!.toLowerCase();
+    switch (demoType) {
+      case 'patient':
+        return DemoType.Patient;
+      case 'licence':
+        return DemoType.Licence;
+    }
+  }
+  return DemoType.Patient;
 });
 
 export const demoOptions = computed(() => {
-  if (unref(demoType) === "licence") {
-    return demoLicenceOptions;
-  } else if (unref(demoType) === "patient") {
-    return demoPatientOptions;
-  } else {
-    throw new Error('Unknown demo type');
+  switch (demoType.value) {
+    case DemoType.Patient:
+      return demoPatientOptions;
+    case DemoType.Licence:
+      return demoLicenceOptions;
+    default:
+      throw new Error('Unknown demo type');
   }
 });
 
-export function openUrl(url: string, target: string = "_self") {
+export function openUrl(url: string, target: string = '_self') {
   window.open(url, target);
 }

package/src/components/demo/patient/DemoPatientInfoModal.vue

@@ -1,23 +1,19 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import {
-  demoPatientSubtitles,
-  demoPatientTitle,
-  openUrl, PRICING_URL,
-} from "@/components/demo/options";
+import { computed } from 'vue';
+import { demoPatientSubtitles, demoPatientTitle, openUrl, PRICING_URL } from '@/components/demo/options';
 
 export interface Props {
   modal: boolean;
-  isModalOpen: boolean;
+  isModalOpen?: boolean;
 }
 
 const emit = defineEmits<{
-  "update:modal": [value: boolean];
+  'update:modal': [value: boolean];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
   modal: false,
-  isModalOpen: true,
+  isModalOpen: true
 });
 
 const modalState = computed({
@@ -25,25 +21,16 @@ const modalState = computed({
     return props.modal;
   },
   set(value) {
-    emit("update:modal", value);
-  },
+    emit('update:modal', value);
+  }
 });
 </script>
 
 <template>
   <v-dialog v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background card-bg-border"
-      theme="dark"
-      max-width="680"
-    >
-      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{
-        demoPatientTitle
-      }}</v-card-title>
-      <v-card-text
-        class="text-justify"
-        v-for="subtitle in demoPatientSubtitles"
-        :key="subtitle"
+    <v-card class="pa-1 ma-auto position-relative motif-background card-bg-border" theme="dark" max-width="680">
+      <v-card-title class="text-center mb-4 mt-2 font-weight-bold">{{ demoPatientTitle }}</v-card-title>
+      <v-card-text class="text-justify" v-for="subtitle in demoPatientSubtitles" :key="subtitle"
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
@@ -51,12 +38,7 @@ const modalState = computed({
           Continue with Demo
         </v-btn>
         <v-spacer />
-        <v-btn
-          data-testid="confirm"
-          variant="flat"
-          color="success"
-          @click="openUrl(PRICING_URL)"
-        >
+        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
           Purchase 3Dicom Patient
         </v-btn>
       </v-card-actions>

package/src/components/demo/patient/__tests__/DemoPatientEnableCloudStorageModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import DemoPatientEnableCloudStorageModal from "@/components/demo/patient/DemoPatientEnableCloudStorageModal.vue";
-import { PRICING_URL } from "../../options";
+import { PRICING_URL } from '../../options';
+import { mount } from '@vue/test-utils';
+import DemoPatientEnableCloudStorageModal from '@/components/demo/patient/DemoPatientEnableCloudStorageModal.vue';
+import { VDialog } from 'vuetify/components';
 
 describe('DemoPatientEnableCloudStorageModal tests', () => {
   it('should mount', () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open pricing url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoPatientEnableCloudStorageModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false };
-    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientEnableCloudStorageModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });

package/src/components/demo/patient/__tests__/DemoPatientInfoModal.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountVuetify, openAllModals } from "~/helper";
-import { PRICING_URL } from "@/components/demo/options";
-import DemoPatientInfoModal from "@/components/demo/patient/DemoPatientInfoModal.vue";
+import { mount } from '@vue/test-utils';
+import { PRICING_URL } from '@/components/demo/options';
+import { VDialog } from 'vuetify/components';
+import DemoPatientInfoModal from '@/components/demo/patient/DemoPatientInfoModal.vue';
 
 describe('DemoPatientInfoModal tests', () => {
   it('should mount', () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const wrapper = mount(DemoPatientInfoModal, { props });
     expect(wrapper).toBeTruthy();
   });
 
   it('should close modal', async () => {
     const props = { modal: true, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const wrapper = mount(DemoPatientInfoModal, { props });
     const close = wrapper.findComponent('[data-testid="close"]');
     await close.trigger('click');
-    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
 
   it('should open support url', async () => {
     vi.stubGlobal('open', vi.fn());
     const spy = vi.spyOn(window, 'open');
-    const props = { modal: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mount(DemoPatientInfoModal, { props });
     const button = wrapper.findComponent('[data-testid="confirm"]');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
@@ -31,7 +31,8 @@ describe('DemoPatientInfoModal tests', () => {
 
   it('should open via input', async () => {
     const props = { modal: false, isModalOpen: true };
-    const wrapper = mountVuetify(DemoPatientInfoModal, props);
-    await openAllModals(wrapper);
+    const wrapper = mount(DemoPatientInfoModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
   });
 });