@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/navigation/annotation/__tests__/AnnotationCreateModal.spec.ts

@@ -0,0 +1,178 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
+import AnnotationCreateModal from '@/components/navigation/annotation/AnnotationCreateModal.vue';
+import { VCard, VOverlay } from 'vuetify/components';
+import AnnotationForm from '@/components/navigation/annotation/AnnotationForm.vue';
+import { useViewer3cr } from '@/composables/useViewer3cr';
+import { deepClone } from '@vitest/utils';
+import AnnotationCreateSnackbar from '@/components/navigation/annotation/AnnotationCreateSnackbar.vue';
+
+describe('MaskIcon tests', () => {
+  const annotation = DataOverlayAnnotationFaker.random();
+
+  it('should mount', () => {
+    const props = { annotation };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should mount open', () => {
+    const props = { annotation, modelValue: true };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.findComponent(VCard).exists()).toBe(true);
+  });
+
+  it('should mount open and open createsnack', async () => {
+    const props = { annotation, modelValue: true };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    expect(wrapper).toBeTruthy();
+    const snack = wrapper.findComponent(AnnotationCreateSnackbar);
+
+    expect(snack.isVisible()).toBe(true);
+    expect(wrapper.vm.s_annotationCreate).toBeFalsy();
+
+    await snack.setValue(true);
+
+    expect(wrapper.vm.s_annotationCreate).toBeTruthy();
+  });
+
+  it('should Update overlay', async () => {
+    const props = { annotation, modelValue: false };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+
+    expect(overlay.isVisible()).toBeTruthy();
+  });
+
+  it('should submit form', async () => {
+    const props = { annotation, modelValue: false };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+
+    const btn = wrapper.findComponentByTestId('submit-btn');
+
+    await btn.trigger('click');
+
+    expect(overlay.isVisible()).toBeTruthy();
+  });
+
+  it('should submit form', async () => {
+    const viewer3cr = useViewer3cr();
+    const removeAnnotationSpy = vi.spyOn(viewer3cr, 'removeAnnotation');
+    const props = { annotation, modelValue: false };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+
+    const btn = wrapper.findComponentByTestId('close-btn');
+
+    await btn.trigger('click');
+
+    expect(removeAnnotationSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: annotation.Id
+      }
+    });
+  });
+
+  it('should submit form default id', async () => {
+    const anno = deepClone(annotation);
+    delete (anno as any).Id;
+    const viewer3cr = useViewer3cr();
+    const removeAnnotationSpy = vi.spyOn(viewer3cr, 'removeAnnotation');
+    const props = { annotation: anno, modelValue: false };
+    const wrapper = mount(AnnotationCreateModal, { props });
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+
+    const btn = wrapper.findComponentByTestId('close-btn');
+
+    await btn.trigger('click');
+
+    expect(removeAnnotationSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: ''
+      }
+    });
+  });
+
+  it('should Update overlay', async () => {
+    const viewer3cr = useViewer3cr();
+    const updateAnnotationTitleSpy = vi.spyOn(viewer3cr, 'updateAnnotationTitle');
+    const updateAnnotationDescriptionSpy = vi.spyOn(viewer3cr, 'updateAnnotationDescription');
+    const updateAnnotationActionsSpy = vi.spyOn(viewer3cr, 'updateAnnotationActions');
+    const setAnnotationIconSpy = vi.spyOn(viewer3cr, 'setAnnotationIcon');
+    const setAnnotation2dColourSpy = vi.spyOn(viewer3cr, 'setAnnotation2dColour');
+    const setAnnotation3dColourSpy = vi.spyOn(viewer3cr, 'setAnnotation3dColour');
+
+    const props = { annotation, modelValue: false };
+    const wrapper = mount(AnnotationCreateModal, { props });
+
+    const overlay = wrapper.findComponent(VOverlay);
+
+    await overlay.setValue(true);
+    const form = wrapper.findComponent(AnnotationForm);
+
+    const dataOverlayAnnotation = DataOverlayAnnotationFaker.random();
+
+    await form.vm.$emit('submit', dataOverlayAnnotation);
+
+    await flushPromises();
+    expect(updateAnnotationTitleSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Value: dataOverlayAnnotation.Title
+      }
+    });
+
+    expect(updateAnnotationDescriptionSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Value: dataOverlayAnnotation.Description
+      }
+    });
+
+    expect(updateAnnotationActionsSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Value: expect.any(String)
+      }
+    });
+
+    expect(setAnnotationIconSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Icon: dataOverlayAnnotation.Icon2d
+      }
+    });
+
+    expect(setAnnotation2dColourSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Colour: dataOverlayAnnotation.Colour2d
+      }
+    });
+
+    expect(setAnnotation3dColourSpy).toHaveBeenCalledWith({
+      message: {
+        Version: '0.0.0',
+        Id: dataOverlayAnnotation.Id,
+        Colour: dataOverlayAnnotation.Colour3d
+      }
+    });
+  });
+});

package/src/components/navigation/annotation/__tests__/AnnotationCreateSnackbar.spec.ts

@@ -0,0 +1,31 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import AnnotationCreateSnackbar from '@/components/navigation/annotation/AnnotationCreateSnackbar.vue';
+import { VSnackbar } from 'vuetify/components';
+
+describe('Snackbar Component', () => {
+  it('should mount', async () => {
+    const wrapper = mount(AnnotationCreateSnackbar);
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+  it('renders the snackbar with the correct text and icon', async () => {
+    const wrapper = mount(AnnotationCreateSnackbar, { props: { modelValue: true } });
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+    expect(snack.isVisible()).toBe(true);
+  });
+  it('should close the snackbar when the undo button is clicked', async () => {
+    const wrapper = mount(AnnotationCreateSnackbar, {
+      props: { modelValue: true }
+    });
+    await wrapper.findComponent('button').trigger('click');
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
+  });
+  it('should close the snackbar when the close icon is clicked', async () => {
+    const wrapper = mount(AnnotationCreateSnackbar, {
+      props: { modelValue: true }
+    });
+    await wrapper.findComponent('[data-testid="closeBtn"]').trigger('click');
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false]);
+  });
+});

package/src/components/navigation/annotation/__tests__/AnnotationDataTable.spec.ts

@@ -0,0 +1,79 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import AnnotationDataTable from '@/components/navigation/annotation/AnnotationDataTable.vue';
+import { VBtn, VDataTableVirtual, VTextField } from 'vuetify/components';
+
+describe('AnnotationDataTable tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should update search', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    await wrapper.findComponent(VTextField).setValue('123');
+    await flushPromises();
+
+    expect(wrapper.vm.search).toBe('123');
+  });
+
+  it('should clear search', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    await wrapper.findComponent(VTextField).setValue('123');
+    await flushPromises();
+
+    expect(wrapper.vm.search).toBe('123');
+    await wrapper.findComponent(VBtn).trigger('click');
+    expect(wrapper.vm.search).toBe('');
+  });
+
+  it('should update expanded', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    await wrapper.findComponent(VDataTableVirtual).setValue(['123'], 'expanded');
+    await flushPromises();
+
+    expect(wrapper.vm.expanded).toStrictEqual(['123']);
+  });
+
+  it('should check header props', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    const table = wrapper.findComponent(VDataTableVirtual);
+
+    for (const header of table.vm.headers!!) {
+      if (header.cellProps) {
+        expect((header.cellProps as any)({ item: { Id: '123' } } as any)).not.toContain('bg-minsk_100');
+      }
+      if (header.sortRaw) {
+        expect(header.sortRaw!!({ Title: '123' }, { Title: '234' })).toBe(-1);
+      }
+    }
+  });
+
+  it('should filter', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    expect(
+      wrapper.vm.filter('123', 'title-to-find', {
+        raw: {
+          Title: 'title-to-find'
+        }
+      })
+    ).toBe(true);
+  });
+
+  it('should filter', async () => {
+    const wrapper = mount(AnnotationDataTable, { drawer: true });
+
+    expect(
+      wrapper.vm.filter('123', 'title-not-to-find', {
+        raw: {
+          Title: 'title-to-find'
+        }
+      })
+    ).toBe(false);
+  });
+});

package/src/components/navigation/annotation/__tests__/AnnotationDeleteSnackbar.spec.ts

@@ -0,0 +1,66 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { VBtn, VIcon, VSnackbar } from 'vuetify/components';
+import AnnotationDeleteSnackbar from '@/components/navigation/annotation/AnnotationDeleteSnackbar.vue';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+
+describe('AnnotationDeleteSnackbar tests', () => {
+  it('should mount', async () => {
+    const wrapper = mount(AnnotationDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+    await flushPromises();
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open AnnotationDeleteSnackbar', async () => {
+    const wrapper = mount(AnnotationDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+  });
+
+  it('should close AnnotationDeleteSnackbar', async () => {
+    const wrapper = mount(AnnotationDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findComponent(VBtn);
+
+    await vbtn.trigger('click');
+    expect(snack.vm.modelValue).toBe(false);
+  });
+
+  it('should close AnnotationDeleteSnackbar', async () => {
+    const wrapper = mount(AnnotationDeleteSnackbar, {
+      props: {
+        measurement: DataOverlayPolygonFaker.random()
+      }
+    });
+
+    const snack = wrapper.findComponent(VSnackbar);
+    await snack.setValue(true);
+
+    expect(snack.isVisible()).toBe(true);
+
+    const vbtn = snack.findAllComponents(VIcon)[1];
+
+    await vbtn.trigger('click');
+    expect(snack.vm.modelValue).toBe(false);
+  });
+});

package/src/components/navigation/annotation/__tests__/AnnotationForm.spec.ts

@@ -0,0 +1,261 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
+import { VTextField } from 'vuetify/components';
+import AnnotationForm from '@/components/navigation/annotation/AnnotationForm.vue';
+import { deepClone } from '@vitest/utils';
+import AnnotationIcon from '@/components/navigation/annotation/AnnotationIcon.vue';
+import ShTextField from '@/components/ShTextField.vue';
+import ShTextarea from '@/components/ShTextarea.vue';
+import { v4 } from 'uuid';
+import ColourPalette from '@/components/shared/ColourPalette.vue';
+
+describe('MaskIcon tests', () => {
+  const annotation = DataOverlayAnnotationFaker.random();
+
+  it('should mount', () => {
+    const props = { annotation };
+    const wrapper = mount(AnnotationForm, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should mount with icon', () => {
+    const anno = deepClone(annotation);
+
+    anno.Icon2d = '123';
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+    expect(wrapper.findComponent(AnnotationIcon).exists()).toBeTruthy();
+  });
+
+  it('should mount without icon', () => {
+    const anno = deepClone(annotation);
+
+    anno.Icon2d = '';
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+    expect(wrapper.findComponent(AnnotationIcon).exists()).not.toBeTruthy();
+  });
+
+  it('should set text field value', async () => {
+    const anno = deepClone(annotation);
+
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    const textfield = wrapper.findComponent(ShTextField);
+    expect(textfield.exists()).toBeTruthy();
+
+    await textfield.setValue('123');
+
+    expect(wrapper.vm.proxy!.Title).toBe('123');
+  });
+
+  it('should set text field 2 value', async () => {
+    const anno = deepClone(annotation);
+
+    anno.CallToAction = {
+      Actions: [
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        }
+      ]
+    };
+    const props = { annotation: DataOverlayAnnotationFaker.random() };
+    const wrapper = mount(AnnotationForm, { props });
+
+    await wrapper.setProps({ annotation: anno });
+    await flushPromises();
+    await flushPromises();
+    await flushPromises();
+
+    const textfield = wrapper.findAllComponents(VTextField);
+
+    const descs = textfield.filter((x) => x.attributes()['data-testid'] === 'actiondata-description');
+    const urls = textfield.filter((x) => x.attributes()['data-testid'] === 'actiondata-Url');
+
+    for (const [i, _] of anno.CallToAction.Actions.entries()) {
+      expect(descs[i].exists()).toBeTruthy();
+      expect(urls[i].exists()).toBeTruthy();
+
+      const val = v4();
+      const val2 = v4();
+      await descs[i].setValue(val);
+      await urls[i].setValue(val2);
+
+      expect(wrapper.vm.proxy!.CallToAction?.Actions[i].ActionData.Description).toBe(val);
+      expect(wrapper.vm.proxy!.CallToAction?.Actions[i].ActionData.Url).toBe(val2);
+    }
+  });
+
+  it('should set text field value', async () => {
+    const anno = deepClone(annotation);
+
+    anno.CallToAction = null;
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    const textfield = wrapper.findComponent(ShTextarea);
+    expect(textfield.exists()).toBeTruthy();
+
+    await textfield.setValue('123');
+
+    expect(wrapper.vm.proxy!.Description).toBe('123');
+  });
+
+  it('should removeaction', async () => {
+    const anno = deepClone(annotation);
+
+    anno.CallToAction = {
+      Actions: [
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        }
+      ]
+    };
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    const textfield = wrapper.findComponentByTestId('actiondata-remove');
+
+    await textfield.trigger('click');
+
+    await wrapper.vm.addAction();
+
+    expect(wrapper.vm.proxy!.CallToAction!.Actions.length).toBe(3);
+
+    wrapper.vm.actions = [];
+    expect(wrapper.vm.proxy!.CallToAction!.Actions.length).toBe(0);
+  });
+  it('should colour pallete', async () => {
+    const anno = deepClone(annotation);
+
+    anno.CallToAction = {
+      Actions: [
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        },
+        {
+          ActionType: 1,
+          ActionData: {
+            Description: '1',
+            Url: '1'
+          }
+        }
+      ]
+    };
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    const colourPalette = wrapper.findComponent(ColourPalette);
+    expect(colourPalette.exists()).toBeTruthy();
+
+    await colourPalette.setValue('#000000');
+
+    expect(wrapper.vm.proxy!.Colour2d).toStrictEqual({ Version: '0.0.0', R: 0.0, G: 0.0, B: 0.0, A: 1 });
+    expect(wrapper.vm.proxy!.Colour3d).toStrictEqual({ Version: '0.0.0', R: 0.0, G: 0.0, B: 0.0, A: 1 });
+  });
+
+  it('should set and get icon', async () => {
+    const anno = deepClone(annotation);
+
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    wrapper.vm.icon = '123';
+
+    expect(wrapper.vm.icon).toBe('123');
+  });
+
+  it('should check input values', async () => {
+    // Mocking DOM and dependencies
+    const mockArrayBuffer = vi.fn(() => Promise.resolve(new ArrayBuffer(8)));
+    const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
+    mockFile.arrayBuffer = mockArrayBuffer;
+
+    // Mocking icon value
+    global.Buffer = { from: vi.fn((_: any) => ({ toString: () => 'mockedBase64String' })) } as any;
+
+    const original = document.createElement('input');
+    Object.defineProperty(original, 'files', {
+      value: [mockFile],
+      writable: true
+    });
+    // Mock document.createElement to return a mocked input element
+    const spy = vi.spyOn(document, 'createElement').mockImplementationOnce((tagName: string) => {
+      return original;
+    });
+
+    const anno = deepClone(annotation);
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    await flushPromises();
+    wrapper.vm.upload();
+    await flushPromises();
+
+    // Assertions for input element creation and click
+    expect(spy).toHaveBeenCalledWith('input');
+
+    await mockArrayBuffer();
+    console.log(original.onchange);
+  });
+
+  it('should check input values', async () => {
+    const anno = deepClone(annotation);
+    const props = { annotation: anno };
+    const wrapper = mount(AnnotationForm, { props });
+
+    await flushPromises();
+    wrapper.vm.submit();
+    await flushPromises();
+
+    expect(wrapper.emitted()).toStrictEqual({ submit: [[expect.anything()]] });
+  });
+});

package/src/components/navigation/annotation/__tests__/AnnotationIcon.spec.ts

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
+import AnnotationIcon from '@/components/navigation/annotation/AnnotationIcon.vue';
+
+describe('MaskIcon tests', () => {
+  const annotation = DataOverlayAnnotationFaker.random();
+
+  it('should mount', () => {
+    const props = { annotation };
+    const wrapper = mount(AnnotationIcon, { props });
+    expect(wrapper).toBeTruthy();
+  });
+});