@3cr/viewer-browser 0.0.200 → 0.0.246

package/src/components/{modal/ViewerDisplaySettings.vue → views/DisplaySettings.vue}

@@ -3,20 +3,16 @@
     <v-row no-gutters>
       <v-col>
         <DoubleSliderSelector
-          id="skin-to-bone"
-          v-model:value="windowSlider"
           v-bind="huMinMax"
+          v-model:model-value="windowSlider"
+          id="skin-to-bone"
           label="Skin to Bone"
         />
       </v-col>
     </v-row>
     <v-row no-gutters>
       <v-col>
-        <DoubleSliderSelector
-          v-model:value="thresholdSlider"
-          v-bind="huMinMax"
-          label="Fine Adjustment"
-        />
+        <DoubleSliderSelector v-bind="huMinMax" v-model:model-value="thresholdSlider" label="Fine Adjustment" />
       </v-col>
     </v-row>
     <v-row no-gutters>
@@ -37,11 +33,7 @@
           @update:model-value="onGreyscalePresetChange"
         >
           <template #item="{ props, item }">
-            <v-list-item
-              v-bind="props"
-              :title="item.raw.Name"
-              lines="three"
-            >
+            <v-list-item v-bind="props" :title="item.raw.Name" lines="three">
               <template v-slot:subtitle>
                 Skin Density:
                 <span class="text-mono">{{ item.raw.Lower }}</span>
@@ -86,9 +78,9 @@ import {
   initialScanState,
   thresholdSlider,
   windowSlider
-} from "@/dataLayer/scanState";
-import { ColourPresetData, GreyscalePresetData, PresetsActions } from "@3cr/types-ts";
-import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+} from '@/models/scanState';
+import { ColourPresetData, GreyscalePresetData, PresetsActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
 
 const viewer3cr = useViewer3cr();
 

package/src/components/views/MarkupTreeView.vue

@@ -0,0 +1,201 @@
+<template>
+  <v-treeview
+    class="py-0"
+    :items="data"
+    item-value="id"
+    density="compact"
+    open-strategy="single"
+    @click:open="focusSlices"
+  >
+    <template #prepend="{ item }">
+      <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
+    </template>
+    <template #title="{ item }">
+      <object-label :label="item.title" :icon="item.icon" :color="item.colour" />
+    </template>
+    <template #item="{ props }">
+      <v-list-item class="info" density="compact">
+        <v-row no-gutters>
+          <v-col class="key">
+            <b>{{ props.key }}</b>
+          </v-col>
+          <v-col class="value">
+            <span class="text-mono" v-html="props.value"></span>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </template>
+  </v-treeview>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { DataOverlayType, SlidersActions } from '@3cr/types-ts';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { initialScanState } from '@/models/scanState';
+import { MarkupTreeViewItem } from '@/components/views/types/markup-tree-view-item';
+import { DataOverlayLength } from '@/types/data-overlay-length';
+import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
+import { DataOverlayAngle } from '@/types/data-overlay-angle';
+import { MarkupTreeViewItemChild } from '@/components/views/types/markup-tree-view-item-child';
+import { DataOverlayData } from '@/types/data-overlay-data';
+import { DataOverlayMarkup } from '@/types/data-overlay-markup';
+
+interface Props {
+  items: DataOverlayData<DataOverlayMarkup>[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const viewer3cr = useViewer3cr();
+const data = ref<MarkupTreeViewItem[]>([]);
+
+watch(
+  () => props.items,
+  (items) => {
+    setTreeViewData(items);
+  },
+  { immediate: true }
+);
+
+function setTreeViewData(markups: DataOverlayData<DataOverlayMarkup>[]): void {
+  data.value = markups
+    .sort((a, b) => a.Data.Title.localeCompare(b.Data.Title))
+    .map((markup) => mapToTreeViewItem(markup));
+}
+
+function getMarkupColour(data: DataOverlayData<DataOverlayMarkup>): string {
+  switch (data.DataType) {
+    case DataOverlayType.Length:
+      return 'green';
+    case DataOverlayType.Polygon:
+      return 'red';
+    case DataOverlayType.Angle:
+      return 'blue';
+    default:
+      return 'white';
+  }
+}
+
+function getMarkupIcon(data: DataOverlayData<DataOverlayMarkup>): string {
+  switch (data.DataType) {
+    case DataOverlayType.Length:
+      return 'straighten';
+    case DataOverlayType.Polygon:
+      return 'pentagon';
+    case DataOverlayType.Angle:
+      return 'circle';
+    default:
+      return 'question_mark';
+  }
+}
+
+function getMarkupTooltip(data: DataOverlayData<DataOverlayMarkup>): string {
+  switch (data.DataType) {
+    case DataOverlayType.Length:
+      return 'Length';
+    case DataOverlayType.Polygon:
+      return 'Polygon';
+    case DataOverlayType.Angle:
+      return 'Angle';
+    default:
+      return '';
+  }
+}
+
+function getMarkupInfo(data: DataOverlayData<DataOverlayMarkup>): MarkupTreeViewItemChild[] {
+  switch (data.DataType) {
+    case DataOverlayType.Length:
+      return getLengthInfo(data.Data as DataOverlayLength);
+    case DataOverlayType.Polygon:
+      return getPolygonInfo(data.Data as DataOverlayPolygon);
+    case DataOverlayType.Angle:
+      return getAngleInfo(data.Data as DataOverlayAngle);
+    default:
+      return [];
+  }
+}
+
+function getLengthInfo(markup: DataOverlayLength): MarkupTreeViewItemChild[] {
+  return [
+    ...markup.SegmentLengths.map((seg, idx) => ({
+      props: { key: `Segment ${idx + 1}`, value: `${seg}${markup.Units}` }
+    })),
+    { props: { key: 'Total Length', value: `${markup.TotalLength}${markup.Units}` } }
+  ];
+}
+
+function getPolygonInfo(markup: DataOverlayPolygon): MarkupTreeViewItemChild[] {
+  return [
+    { props: { key: 'Area', value: `${markup.Area}` } },
+    { props: { key: 'Perimeter', value: `${markup.Perimeter}` } },
+    { props: { key: 'Average HU', value: `${markup.AverageHU}` } },
+    { props: { key: 'Lowest HU', value: `${markup.LowestHU}` } },
+    { props: { key: 'Highest HU', value: `${markup.HighestHU}` } }
+  ];
+}
+
+function getAngleInfo(markup: DataOverlayAngle): MarkupTreeViewItemChild[] {
+  return markup.SegmentAngles.map((seg, idx) => {
+    return { props: { key: `Segment ${idx + 1}`, value: `${seg.Acute}${markup.Units}` } };
+  });
+}
+
+async function toggleVisibility(item: MarkupTreeViewItem): Promise<void> {
+  await viewer3cr.setMarkupVisibility(item.id, !item.isVisible);
+}
+
+function mapToTreeViewItem(data: DataOverlayData<DataOverlayMarkup>): MarkupTreeViewItem {
+  return {
+    id: data.Data.Id,
+    title: data.Data.Title,
+    description: data.Data.Description,
+    isVisible: !!data.Data.Visibility2d && !!data.Data.Visibility3d,
+    tooltip: getMarkupTooltip(data),
+    colour: getMarkupColour(data),
+    icon: getMarkupIcon(data),
+    position: {
+      x: data.Data.Points[0].X,
+      y: data.Data.Points[0].Y,
+      z: data.Data.Points[0].Z
+    },
+    children: getMarkupInfo(data)
+  };
+}
+
+async function focusSlices(value: { id: unknown; value: boolean }): Promise<void> {
+  const item = data.value.find((markup) => markup.id === value.id);
+  if (value.value && item) {
+    const { x, y, z } = item.position;
+    const { XSpacing, YSpacing, ZSpacing } = initialScanState.value;
+    await viewer3cr.sliderHandler(SlidersActions.sl09, z / (ZSpacing || 1));
+    await viewer3cr.sliderHandler(SlidersActions.sl12, x / (XSpacing || 1));
+    await viewer3cr.sliderHandler(SlidersActions.sl15, y / (YSpacing || 1));
+  }
+}
+</script>
+
+<style scoped>
+.info {
+  min-height: 20px;
+}
+
+.key,
+.value {
+  font-size: 12px;
+}
+
+.key {
+  text-align: left;
+}
+
+.value {
+  text-align: right;
+}
+
+:deep(.v-list-group ~ .v-list-group) {
+  border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
+}
+</style>

package/src/components/views/McadObjectTreeView.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <mcad-global-actions :items="items" />
+    <v-treeview class="py-0" :items="data" item-value="id" density="compact" open-strategy="single">
+      <template #prepend="{ item }">
+        <visibility-btn :is-visible="item.isVisible" @click.stop="toggleVisibility(item)" />
+      </template>
+      <template #title="{ item }">
+        <div class="d-flex align-center">
+          <object-label class="mr-1" :label="item.title">
+            <template #prepend>
+              <object-color class="ml-1 mr-2" :color="getColor(item)" />
+            </template>
+          </object-label>
+          <v-spacer />
+          <opacity
+            :model-value="getOpacity(item)"
+            max-width="72px"
+            @update:model-value="onOpacityUpdate(item, $event)"
+            @mousedown.stop
+            @click.stop
+          />
+        </div>
+      </template>
+      <template #append="{ item }">
+        <v-menu v-if="showMenu">
+          <template #activator="{ props }">
+            <v-btn v-bind="props" data-testid="menu" size="32" variant="text" icon="more_vert" />
+          </template>
+          <v-list>
+            <v-list-item data-testid="download" prepend-icon="download" @click="downloadMcad(item.key)">
+              <v-list-item-title>Download</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { clamp } from '@/functions/clamp';
+import { rgbaNormalizedToCss } from '@/functions/rgbaToCss';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { McadObjectTreeViewItem } from '@/components/views/types/mcad-object-tree-view-item';
+import { DataOverlayMcad } from '@/types/data-overlay-mcad';
+
+interface Props {
+  items: DataOverlayMcad[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => []
+});
+
+const viewer3cr = useViewer3cr();
+const options = useViewerOptions();
+const data = ref<McadObjectTreeViewItem[]>([]);
+
+const showMenu = computed(() => {
+  return !!options.value.OnDownloadMcad;
+});
+
+watch(
+  () => props.items,
+  (items) => {
+    setTreeViewData(items);
+  },
+  { immediate: true }
+);
+
+function setTreeViewData(mcadObjects: DataOverlayMcad[]): void {
+  data.value = mcadObjects
+    .sort((a, b) => a.Title.localeCompare(b.Title))
+    .map((mcadObject) => mapToTreeViewItem(mcadObject));
+}
+
+async function downloadMcad(id: string): Promise<void> {
+  if (options.value.OnDownloadMcad) {
+    await options.value.OnDownloadMcad(id);
+  }
+}
+
+function getColor(item: McadObjectTreeViewItem): string {
+  const { r, g, b } = item.colour;
+  return rgbaNormalizedToCss(r, g, b, 1);
+}
+
+function getOpacity(item: McadObjectTreeViewItem): number {
+  return Math.round(item.colour.a * 100);
+}
+
+function mapToTreeViewItem(data: DataOverlayMcad): McadObjectTreeViewItem {
+  return {
+    id: data.Id,
+    key: data.Key,
+    title: data.Title,
+    description: data.Description,
+    isVisible: data.Visibility,
+    colour: {
+      r: data.Colour.R,
+      g: data.Colour.G,
+      b: data.Colour.B,
+      a: data.Colour.A
+    }
+  };
+}
+
+async function onOpacityUpdate(item: McadObjectTreeViewItem, value: number): Promise<void> {
+  if (value) {
+    const a = clamp(value, 0, 100) / 100;
+    const { r, g, b } = item.colour;
+    await viewer3cr.setMcadObjectColour({ Id: item.id, Colour: { Version: '1.2.0', R: r, G: g, B: b, A: a } });
+  }
+}
+
+async function toggleVisibility(item: McadObjectTreeViewItem): Promise<void> {
+  const visibility = !item.isVisible;
+  await viewer3cr.setMcadObjectVisibility({ Id: item.id, Visibility: visibility });
+}
+</script>
+
+<style scoped>
+:deep(.v-list-group ~ .v-list-group) {
+  border-top: thin solid rgb(100%, 100%, 100%, var(--v-border-opacity));
+}
+</style>

package/src/components/views/__tests__/AnnotationTreeView.spec.ts

@@ -0,0 +1,62 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import AnnotationTreeView from '@/components/views/AnnotationTreeView.vue';
+import { GptService } from '@/services/gpt.service';
+import { GptResponseFaker } from '@test/fakers/gpt-response.faker';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
+import { VCard, VChip } from 'vuetify/components';
+import AskAI from '@/components/modal/AskAI.vue';
+
+const gpt = GptResponseFaker.random();
+
+describe('AnnotationTreeView tests', () => {
+  vi.spyOn(GptService.prototype, 'GenerateAnnotations').mockResolvedValue({ data: gpt } as any);
+
+  it('should mount', async () => {
+    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
+    const props = { items };
+    const wrapper = mount(AnnotationTreeView, { props });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle visibility', async () => {
+    const viewer3cr = useViewer3cr();
+    const toggle2d = vi.spyOn(viewer3cr, 'toggle2dAnnotation').mockImplementation(vi.fn());
+    const toggle3d = vi.spyOn(viewer3cr, 'toggle3dAnnotation').mockImplementation(vi.fn());
+
+    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
+    const props = { items };
+    const wrapper = mount(AnnotationTreeView, { props });
+    await flushPromises();
+    await wrapper.findComponent(VisibilityBtn).trigger('click');
+
+    expect(toggle2d).toHaveBeenCalled();
+    expect(toggle3d).toHaveBeenCalled();
+  });
+
+  it('should focus slices', async () => {
+    const viewer3cr = useViewer3cr();
+    const sliderHandler = vi.spyOn(viewer3cr, 'sliderHandler').mockImplementation(vi.fn());
+
+    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
+    const props = { items };
+    const wrapper = mount(AnnotationTreeView, { props });
+    await flushPromises();
+    await wrapper.findComponent(ObjectLabel).trigger('click');
+
+    expect(sliderHandler).toHaveBeenCalledTimes(3);
+  });
+
+  it('should select AI action', async () => {
+    const items = faker.helpers.multiple(DataOverlayDataFaker.annotation, { count: 3 });
+    const props = { items };
+    const wrapper = mount(AnnotationTreeView, { props });
+    await flushPromises();
+    await wrapper.findComponent(VChip).trigger('click');
+    expect(wrapper.findComponent(AskAI).findComponent(VCard).exists()).toBeTruthy();
+  });
+});

package/src/components/{modal/__tests__/ViewerDisplaySettings.spec.ts → views/__tests__/DisplaySettings.spec.ts}

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

package/src/components/views/__tests__/MarkupTreeView.spec.ts

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import MarkupTreeView from '@/components/views/MarkupTreeView.vue';
+import { DataOverlayDataFaker } from '@test/fakers/data-overlay-data.faker';
+import { DataOverlayType } from '@3cr/types-ts';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import ObjectLabel from '@/components/views/shared/ObjectLabel.vue';
+
+const items = [
+  DataOverlayDataFaker.length(),
+  DataOverlayDataFaker.polygon(),
+  DataOverlayDataFaker.angle(),
+  { ...DataOverlayDataFaker.angle(), DataType: DataOverlayType._ErrorEntity }
+];
+
+describe('MarkupTreeView tests', () => {
+  it('should mount', () => {
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle visibility', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMarkupVisibility').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    await wrapper.findComponent(VisibilityBtn).trigger('click');
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should focus slices', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'sliderHandler').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(MarkupTreeView, { props });
+    await wrapper.findComponent(ObjectLabel).trigger('click');
+    await wrapper.findComponent(ObjectLabel).trigger('click');
+    expect(spy).toHaveBeenCalledTimes(3);
+  });
+});

package/src/components/views/__tests__/McadObjectTreeView.spec.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { faker } from '@faker-js/faker';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import McadObjectTreeView from '@/components/views/McadObjectTreeView.vue';
+import VisibilityBtn from '@/components/views/shared/VisibilityBtn.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import Opacity from '@/components/views/shared/Opacity.vue';
+import { useViewerOptions } from '@/composables/useViewerOptions';
+import { VListItem, VMenu } from 'vuetify/components';
+
+describe('McadObjectTreeView tests', () => {
+  const items = faker.helpers.multiple(DataOverlayMcadFaker.random, { count: 3 });
+
+  it('should mount', () => {
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should toggle visibility', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMcadObjectVisibility').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponent(VisibilityBtn).trigger('click');
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should update opacity', async () => {
+    const viewer3cr = useViewer3cr();
+    const spy = vi.spyOn(viewer3cr, 'setMcadObjectColour').mockImplementation(vi.fn());
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponent(Opacity).setValue(NaN);
+    await wrapper.findComponent(Opacity).setValue(50);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should download mcad', async () => {
+    const options = useViewerOptions();
+    options.value.OnDownloadMcad = vi.fn();
+    const props = { items };
+    const wrapper = mount(McadObjectTreeView, { props });
+    await wrapper.findComponentByTestId<VMenu>('menu').trigger('click');
+    await wrapper.findComponentByTestId<VListItem>('download').trigger('click');
+  });
+});