@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/demo/__tests__/CloudDropZone.spec.ts

@@ -0,0 +1,132 @@
+import CloudDropZone from '@/components/demo/CloudDropZone.vue';
+import { mount } from '@vue/test-utils';
+describe('Cloud DropZone Component', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should render the drop zone correctly', () => {
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped: vi.fn()
+      }
+    });
+    expect(wrapper.find('.drop-zone').exists()).toBe(true);
+    expect(wrapper.find('.icon-container').exists()).toBe(true);
+    expect(wrapper.text()).toContain('Click to upload or drag and drop');
+  });
+
+  it('should add drag-over class on dragover and remove it on drag leave', async () => {
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped: vi.fn()
+      }
+    });
+    const dropZone = wrapper.find('.drop-zone');
+    await dropZone.trigger('dragover');
+    expect(wrapper.classes()).toContain('drag-over');
+    await dropZone.trigger('dragleave');
+    expect(wrapper.classes()).not.toContain('drag-over');
+  });
+
+  it('should add drag-over class on drag enter', async () => {
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped: vi.fn()
+      }
+    });
+    const dropZone = wrapper.find('.drop-zone');
+    await dropZone.trigger('dragenter');
+    expect(wrapper.classes()).toContain('drag-over');
+  });
+
+  it('should call onFilesDropped with files on drop', async () => {
+    const mockFiles = [new File(['content'], 'test-file.txt')];
+    const onFilesDropped = vi.fn();
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped
+      }
+    });
+    const dropZone = wrapper.find('.drop-zone');
+    await dropZone.trigger('drop', {
+      dataTransfer: {
+        files: mockFiles
+      }
+    });
+    expect(onFilesDropped).toHaveBeenCalledOnce();
+    expect(onFilesDropped).toHaveBeenCalledWith(mockFiles);
+  });
+
+  it('should handle drop event with no files', async () => {
+    const onFilesDropped = vi.fn();
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped
+      }
+    });
+    const dropZone = wrapper.find('.drop-zone');
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    await dropZone.trigger('drop', {
+      dataTransfer: {
+        files: null
+      }
+    });
+    expect(onFilesDropped).not.toHaveBeenCalled();
+    expect(consoleWarnSpy).toHaveBeenCalledWith('No files were dropped.');
+    consoleWarnSpy.mockRestore();
+  });
+
+  it('should call onFilesDropped with files when files are selected', async () => {
+    const mockFiles = [new File(['content'], 'test-file.dcm')];
+    const onFilesDropped = vi.fn();
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped
+      }
+    });
+    const mockInput = document.createElement('input') as HTMLInputElement; // Create an actual input element
+    Object.defineProperty(mockInput, 'files', {
+      value: mockFiles,
+      writable: true
+    });
+    const spy = vi.spyOn(document, 'createElement').mockReturnValue(mockInput);
+    await wrapper.find('.drop-zone').trigger('click');
+    if (mockInput.onchange) {
+      mockInput.onchange(new Event('change'));
+    }
+    expect(onFilesDropped).toHaveBeenCalledOnce();
+    expect(onFilesDropped).toHaveBeenCalledWith(mockFiles);
+
+    spy.mockRestore();
+  });
+
+  it('should log a warning when no files are selected', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const onFilesDropped = vi.fn();
+    const wrapper = mount(CloudDropZone, {
+      props: {
+        onFilesDropped
+      }
+    });
+    const mockInput = document.createElement('input') as HTMLInputElement;
+
+    Object.defineProperty(mockInput, 'files', {
+      value: null,
+      writable: true
+    });
+    const spy = vi.spyOn(document, 'createElement').mockReturnValue(mockInput);
+    await wrapper.find('.drop-zone').trigger('click');
+    if (mockInput.onchange) {
+      mockInput.onchange(new Event('change'));
+    }
+    expect(onFilesDropped).not.toHaveBeenCalled();
+    expect(warnSpy).toHaveBeenCalledWith('No files were selected.');
+    warnSpy.mockRestore();
+    spy.mockRestore();
+  });
+});

package/src/components/demo/__tests__/DemoAvatarDropdownMenu.spec.ts

@@ -0,0 +1,16 @@
+import DemoAvatarDropdownMenu from '@/components/demo/DemoAvatarDropdownMenu.vue';
+import { mount } from '@vue/test-utils';
+
+describe('DemoAvatarDropdownMenu', () => {
+  it('should render correctly and trigger actions', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const onFilesDropped = vi.fn();
+    const wrapper = mount(DemoAvatarDropdownMenu, {
+      props: {
+        onFilesDropped
+      }
+    });
+    expect(wrapper.exists()).toBe(true);
+    warnSpy.mockRestore();
+  });
+});

package/src/components/demo/{licence/__tests__/DemoLicenceEnableCloudStorageModal.spec.ts → __tests__/DemoEnableCloudStorageModal.spec.ts}

@@ -1,7 +1,6 @@
-import { PRICING_URL } from '../../options';
 import { mount } from '@vue/test-utils';
-import { VDialog } from 'vuetify/components';
-import DemoLicenceEnableCloudStorageModal from '@/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue';
+import DemoLicenceEnableCloudStorageModal from '@/components/demo/UploadDicomToCloudModal.vue';
+import { PRICING_URL } from '@/constants';
 
 describe('DemoLicenceEnableCloudStorageModal tests', () => {
   it('should mount', () => {
@@ -13,7 +12,7 @@ describe('DemoLicenceEnableCloudStorageModal tests', () => {
   it('should close modal', async () => {
     const props = { modal: true };
     const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
-    const close = wrapper.findComponent('[data-testid="close"]');
+    const close = wrapper.findComponentByTestId('cancel');
     await close.trigger('click');
     expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
@@ -23,16 +22,17 @@ describe('DemoLicenceEnableCloudStorageModal tests', () => {
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true };
     const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
-    const button = wrapper.findComponent('[data-testid="confirm"]');
+    const button = wrapper.findComponentByTestId('done');
     await button.trigger('click');
     expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
     vi.restoreAllMocks();
   });
 
-  it('should open via input', async () => {
-    const props = { modal: false };
-    const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
-    const dialog = wrapper.findComponent(VDialog);
-    await dialog.setValue(true);
-  });
+  // TODO: check after coverage
+  // it('should open via input', async () => {
+  //   const props = { modal: false };
+  //   const wrapper = mount(DemoLicenceEnableCloudStorageModal, { props });
+  //   const dialog = wrapper.findComponent(VDialog);
+  //   await dialog.setValue(true);
+  // });
 });

package/src/components/demo/{licence/__tests__/DemoLicenceInfoModal.spec.ts → __tests__/DemoInfoModal.spec.ts}

@@ -1,7 +1,9 @@
-import { demoLicenceSubtitles, demoLicenceTitle, SUPPORT_URL } from '@/components/demo/options';
 import { mount } from '@vue/test-utils';
+import { storeToRefs } from 'pinia';
 import { VCardText, VCardTitle, VDialog } from 'vuetify/components';
-import DemoLicenceInfoModal from '@/components/demo/licence/DemoLicenceInfoModal.vue';
+import DemoLicenceInfoModal from '@/components/demo/DemoInfoModal.vue';
+import { PRICING_URL } from '@/constants';
+import { useDemoStore } from '@/stores/demo.store';
 
 describe('DemoLicenceInfoModal tests', () => {
   it('should mount', () => {
@@ -13,7 +15,7 @@ describe('DemoLicenceInfoModal tests', () => {
   it('should close modal', async () => {
     const props = { modal: true, isModalOpen: true };
     const wrapper = mount(DemoLicenceInfoModal, { props });
-    const close = wrapper.findComponent('[data-testid="close"]');
+    const close = wrapper.findComponentByTestId('close');
     await close.trigger('click');
     expect(wrapper.emitted('update:modal')).toBeTruthy();
   });
@@ -23,10 +25,10 @@ describe('DemoLicenceInfoModal tests', () => {
     const spy = vi.spyOn(window, 'open');
     const props = { modal: true, isModalOpen: true };
     const wrapper = mount(DemoLicenceInfoModal, { props });
-    const button = wrapper.findComponent('[data-testid="confirm"]');
+    const button = wrapper.findComponentByTestId('confirm');
     await button.trigger('click');
-    expect(spy).toHaveBeenCalledWith(SUPPORT_URL, '_self');
-    vi.restoreAllMocks();
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.clearAllMocks();
   });
 
   it('should open via input', async () => {
@@ -37,8 +39,9 @@ describe('DemoLicenceInfoModal tests', () => {
   });
 
   it('should show title and subtitle', async () => {
-    vi.spyOn(demoLicenceTitle, 'value', 'get').mockReturnValue('Title');
-    vi.spyOn(demoLicenceSubtitles, 'value', 'get').mockReturnValue(['Subtitle']);
+    const { demoTitle, demoSubtitles } = storeToRefs(useDemoStore());
+    vi.spyOn(demoTitle, 'value', 'get').mockReturnValue('Title');
+    vi.spyOn(demoSubtitles, 'value', 'get').mockReturnValue(['Subtitle']);
     const props = { modal: true, isModalOpen: true };
     const wrapper = mount(DemoLicenceInfoModal, { props });
     expect(wrapper.findComponent(VCardTitle).text()).contains('Title');

package/src/components/demo/__tests__/DemoNotificationNavigationDrawer.spec.ts

@@ -0,0 +1,56 @@
+import DemoNotificationNavigationDrawer from '@/components/demo/DemoNotificationNavigationDrawer.vue';
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { Notification, NotificationType } from '@3cr/viewer-types-ts';
+
+const mockNotifications: Notification[] = [
+  {
+    avatar: 'avatar1.png',
+    title: 'Notification 1',
+    type: NotificationType.Text,
+    text: 'This is a text notification',
+    timestamp: new Date(),
+    isUnread: true
+  },
+  {
+    avatar: 'avatar2.png',
+    title: 'Notification 2',
+    type: NotificationType.Download,
+    timestamp: new Date(),
+    onDownload: vi.fn(),
+    isUnread: false
+  },
+  {
+    avatar: 'avatar3.png',
+    title: 'Notification 3',
+    type: NotificationType.Share,
+    timestamp: new Date(),
+    onShare: vi.fn(),
+    isUnread: true
+  }
+];
+
+const DrawerWrapper = defineComponent({
+  template: `
+    <v-app>
+      <DemoNotificationNavigationDrawer :notifications="notifications" />
+    </v-app>
+  `,
+  props: {
+    notifications: {}
+  },
+  components: {
+    DemoNotificationNavigationDrawer
+  }
+});
+
+describe('NotificationDrawer.vue', () => {
+  it('renders correctly with notifications', () => {
+    const wrapper = mount(DrawerWrapper, {
+      props: { notifications: mockNotifications }
+    });
+
+    expect(wrapper.findAll('.v-list-item').length).toBe(mockNotifications.length);
+    expect(wrapper.find('.text-h6').text()).toBe('labels.notifications');
+  });
+});

package/src/components/demo/__tests__/UploadDicomToCloudModal.spec.ts

@@ -0,0 +1,320 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { PRICING_URL } from '@/constants';
+import UploadDicomToCloudModal from '@/components/demo/UploadDicomToCloudModal.vue';
+import { VBtn, VCard, VDialog } from 'vuetify/components';
+import { Upload } from '@3cr/viewer-types-ts';
+import { AsMock, MockImportOriginal } from '@test/MockImportOriginal';
+import { v4 } from 'uuid';
+import { useViewerStore } from '@/stores/viewer.store';
+import { storeToRefs } from 'pinia';
+
+vi.mock('uuid', async (importOriginal: MockImportOriginal<typeof import('uuid')>) => {
+  return {
+    ...(await importOriginal()),
+    v4: vi.fn()
+  };
+});
+
+describe('UploadDicomToCloudModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, { props });
+    const close = wrapper.findComponentByTestId('close');
+    await close.trigger('click');
+    expect(wrapper.emitted('update:modal')).toStrictEqual([[false]]);
+  });
+
+  it('should close modal via cancel', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, { props });
+    const close = wrapper.findComponentByTestId('cancel');
+    await close.trigger('click');
+    expect(wrapper.emitted('update:modal')).toStrictEqual([[false]]);
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: false };
+    const wrapper = mount(UploadDicomToCloudModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(true);
+    expect(wrapper.emitted('update:modal')).toStrictEqual([[true]]);
+  });
+
+  it('should open pricing url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, { props });
+    const button = wrapper.findComponentByTestId('done');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should get current progress 50%', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+
+    const progress = {
+      progress: 0.5
+    } as Upload;
+    expect(wrapper.vm.getProgress(progress)).toBe(50);
+  });
+
+  it('should get current progress 95%', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+
+    const progress = {
+      progress: 0.95
+    } as Upload;
+    expect(wrapper.vm.getProgress(progress)).toBe(95);
+  });
+
+  it('should get current progress 0', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+
+    const progress = {} as Upload;
+    expect(wrapper.vm.getProgress(progress)).toBe(0);
+  });
+
+  it('should delete no file', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const parent = wrapper.findComponent(VCard);
+
+    expect(parent.findAll('.file-item').length).toBe(0);
+
+    const file = {
+      id: '123'
+    } as Upload;
+
+    wrapper.vm.deleteFile(file);
+
+    await flushPromises();
+    expect(parent.findAll('.file-item').length).toBe(0);
+  });
+
+  it('should execute interval n + 1 times', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const numRevolutions = 10;
+    const interval = '123123123';
+    const clearIntervalSpy = vi.spyOn(window, 'clearInterval');
+    const spy = vi.spyOn(window, 'setInterval').mockImplementation((fn: () => void) => {
+      //Run this after the interval has been returned
+      setTimeout(() => {
+        for (let i = 0; i < numRevolutions; i++) {
+          fn();
+        }
+        fn();
+        expect(clearIntervalSpy).toHaveBeenCalledWith(interval);
+      }, 1);
+
+      return interval;
+    });
+
+    await wrapper.vm.handleFilesDropped([new File([], 'something different')]);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should delete 1 file', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+
+    const mockedId = '123';
+    const parent = wrapper.findComponent(VCard);
+    AsMock(v4).mockReturnValue(mockedId);
+
+    await wrapper.vm.handleFilesDropped([new File([], 'something different')]);
+    await flushPromises();
+
+    expect(parent.findAll('.file-item').length).toBe(1);
+
+    const file = {
+      id: mockedId
+    } as Upload;
+
+    wrapper.vm.deleteFile(file);
+
+    await flushPromises();
+    expect(parent.findAll('.file-item').length).toBe(0);
+  });
+
+  it('should delete 1 file through template', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const mockedId = '123';
+    const parent = wrapper.findComponent(VCard);
+    AsMock(v4).mockReturnValue(mockedId);
+
+    await wrapper.vm.handleFilesDropped([new File([], 'something different')]);
+    await flushPromises();
+
+    expect(parent.findAll('.file-item').length).toBe(1);
+
+    await parent.findAllComponents(VBtn)[1].trigger('click');
+
+    await flushPromises();
+    expect(parent.findAll('.file-item').length).toBe(0);
+  });
+
+  it('should retry 1 file', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const mockedId = '123';
+    const parent = wrapper.findComponent(VCard);
+    AsMock(v4).mockReturnValue(mockedId);
+
+    await wrapper.vm.handleFilesDropped([new File([], 'something different')]);
+    await flushPromises();
+
+    const file = {
+      id: mockedId,
+      status: 'failed'
+    } as Upload;
+
+    wrapper.vm.retryUpload(file);
+
+    await flushPromises();
+    expect(parent.findAll('.file-item').length).toBe(1);
+  });
+
+  it('should retry 1 file through template', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const mockedId = '123';
+    const parent = wrapper.findComponent(VCard);
+
+    const file = {
+      id: mockedId,
+      status: 'failed'
+    } as Upload;
+
+    wrapper.vm.droppedFiles.push(file);
+
+    await flushPromises();
+
+    await parent.findAll('a')[0].trigger('click');
+
+    await flushPromises();
+    expect(parent.findAll('.file-item').length).toBe(1);
+  });
+
+  it('should show uploading linear', async () => {
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+    const mockedId = '123';
+    const parent = wrapper.findComponent(VCard);
+
+    const file = {
+      id: mockedId,
+      title: 'hello world',
+      status: 'uploading'
+    } as Upload;
+
+    wrapper.vm.droppedFiles.push(file);
+
+    await flushPromises();
+    expect(parent.find('.progress-container').exists()).toBe(true);
+  });
+
+  it('should onComplete', async () => {
+    const { options } = storeToRefs(useViewerStore());
+
+    options.value.onCloudStorage = vi.fn();
+
+    const props = { modal: true };
+    const wrapper = mount(UploadDicomToCloudModal, {
+      props,
+      global: {
+        stubs: {
+          VProgressLinear: true
+        }
+      }
+    });
+
+    const ext = [new File([], 'something different.dcm'), new File([], 'something different.notExt')];
+
+    await wrapper.vm.handleFilesDropped(ext);
+
+    expect(options.value.onCloudStorage).toHaveBeenCalledWith([ext[0]]);
+  });
+});

package/src/components/demo/__tests__/demo-payload.spec.ts

@@ -0,0 +1,10 @@
+import { demoPayload } from '@/components/demo/demo-payload';
+
+describe('demo payload tests', () => {
+  it('should exist', () => {
+    expect(demoPayload.Url).toBeTruthy();
+    expect(demoPayload.DecryptionKey).toBeTruthy();
+    expect(demoPayload.DecryptionKey.Iv).toBeTruthy();
+    expect(demoPayload.DecryptionKey.Key).toBeTruthy();
+  });
+});

package/src/components/demo/demo-notifications.ts

@@ -0,0 +1,45 @@
+import { addDays, addHours } from 'date-fns';
+import { faker } from '@faker-js/faker';
+import drMiles from '@/assets/images/dr-miles.png';
+import { NotificationType, Notification } from '@3cr/viewer-types-ts';
+
+export const DEMO_NOTIFICATIONS: Notification[] = [
+  {
+    avatar: drMiles,
+    title: '<strong>Dr. Miles</strong> created an annotation in <strong>File Name</strong>',
+    timestamp: addHours(new Date(), -1),
+    isUnread: true,
+    type: NotificationType.Plain
+  },
+  {
+    avatar: drMiles,
+    title: '<strong>Dr. Miles</strong> created annotations in <strong>File Name</strong>',
+    timestamp: addHours(new Date(), -2),
+    isUnread: false,
+    type: NotificationType.Text,
+    text: faker.lorem.sentence()
+  },
+  {
+    avatar: drMiles,
+    title: '<strong>Dr. Miles</strong> shared file <strong>DICOM File Name</strong>',
+    timestamp: addDays(new Date(), -1),
+    isUnread: false,
+    type: NotificationType.Download,
+    onDownload: () => {}
+  },
+  {
+    avatar: drMiles,
+    title: '<strong>Dr. Miles</strong> invited you to <strong>DICOM File Name</strong>',
+    timestamp: addDays(new Date(), -2),
+    isUnread: false,
+    type: NotificationType.Share,
+    onShare: () => {}
+  },
+  {
+    avatar: drMiles,
+    title: '<strong>Dr. Miles</strong> created an annotation in <strong>File Name</strong>',
+    timestamp: addDays(new Date(), -43),
+    isUnread: false,
+    type: NotificationType.Plain
+  }
+];

package/src/components/demo/demo-payload.ts

@@ -0,0 +1,9 @@
+import { ViewerPayload } from '@3cr/viewer-types-ts';
+
+export const demoPayload: ViewerPayload = {
+  Url: 'https://webgl-3dr.singular.health/demo/scans/chest_v6.3vxl',
+  DecryptionKey: {
+    Iv: 'xDt9F6CjVSZElwoS5No77Q==',
+    Key: 'Oc5F5YatHrB0MHRcphh/DlDKUqG5mpbniEm+fWPooag='
+  }
+};