@3cr/viewer-browser 0.0.53 → 0.0.57

package/src/helpers/__tests__/utils.spec.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { fn } from "@vitest/spy";
+import { MockRunOnNewThread, registerEvents, toNumber } from "@/helpers/utils";
+
+describe("MockRunOnNewThread", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should MockRunOnNewThread", () => {
+    const callback = fn();
+
+    MockRunOnNewThread(callback);
+
+    expect(callback).not.toHaveBeenCalledOnce();
+
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledOnce();
+  });
+});
+
+describe("toNumber", () => {
+  it("should '1'", () => {
+    expect(toNumber("1")).toBe(1);
+  });
+
+  it("should '100'", () => {
+    expect(toNumber("100")).toBe(100);
+  });
+
+  it("should 1 ", () => {
+    expect(toNumber(1)).toBe(1);
+  });
+
+  it("should undefined ", () => {
+    expect(toNumber(undefined)).toBe(0);
+  });
+
+  it("should test ", () => {
+    expect(toNumber("test")).toBe(NaN);
+  });
+});
+
+describe("registerEvents", () => {
+  it("should registerEvents", () => {
+    const fakeEvents = ["drag", "drop"];
+    const fakeListener = () => {};
+    const fakeElement = {
+      addEventListener: fn(),
+    } as unknown as HTMLElement;
+
+    registerEvents(fakeElement, fakeEvents, fakeListener);
+
+    expect(fakeElement.addEventListener).toHaveBeenCalledTimes(2);
+    expect(fakeElement.addEventListener).toHaveBeenNthCalledWith(
+      1,
+      fakeEvents[0],
+      fakeListener
+    );
+    expect(fakeElement.addEventListener).toHaveBeenNthCalledWith(
+      2,
+      fakeEvents[1],
+      fakeListener
+    );
+  });
+});

package/src/helpers/layoutOverlayStyle.ts

@@ -1,28 +1,28 @@
-import { AnchorPoint, PositionData } from '@3cr/types-ts';
+import { AnchorPoint, PositionData } from "@3cr/types-ts";
 
-import { toNumber } from '@/helpers/utils';
+import { toNumber } from "@/helpers/utils";
 
 export function generateDivStyleForLayout(layout: PositionData) {
-  const padding = '0px';
-  const canvas = document.getElementById('unity-canvas');
+  const padding = "0px";
+  const canvas = document.getElementById("unity-canvas");
 
   const props = {} as any;
 
   if (layout.Anchor === AnchorPoint.TOP) {
-    props['left'] = '50%';
-    props['transform'] = 'translateX(-50%)';
+    props["left"] = "50%";
+    props["transform"] = "translateX(-50%)";
   }
   if (layout.Anchor === AnchorPoint.BOTTOM) {
-    props['left'] = '50%';
-    props['transform'] = 'translateX(-50%)';
+    props["left"] = "50%";
+    props["transform"] = "translateX(-50%)";
   }
   if (layout.Anchor === AnchorPoint.LEFT) {
-    props['top'] = '50%';
-    props['transform'] = 'translateY(-50%)';
+    props["top"] = "50%";
+    props["transform"] = "translateY(-50%)";
   }
   if (layout.Anchor === AnchorPoint.RIGHT) {
-    props['top'] = '50%';
-    props['transform'] = 'translateY(-50%)';
+    props["top"] = "50%";
+    props["transform"] = "translateY(-50%)";
   }
   if (
     layout.Anchor === AnchorPoint.TOP_LEFT ||
@@ -30,7 +30,7 @@ export function generateDivStyleForLayout(layout: PositionData) {
     layout.Anchor === AnchorPoint.TOP_RIGHT ||
     layout.Anchor === AnchorPoint.CENTER
   ) {
-    props['top'] = padding;
+    props["top"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.LEFT ||
@@ -38,48 +38,68 @@ export function generateDivStyleForLayout(layout: PositionData) {
     layout.Anchor === AnchorPoint.TOP_LEFT ||
     layout.Anchor === AnchorPoint.CENTER
   ) {
-    props['left'] = padding;
+    props["left"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.RIGHT ||
     layout.Anchor === AnchorPoint.TOP_RIGHT ||
     layout.Anchor === AnchorPoint.BOTTOM_RIGHT
   ) {
-    props['right'] = padding;
+    props["right"] = padding;
   }
   if (
     layout.Anchor === AnchorPoint.BOTTOM ||
     layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
     layout.Anchor === AnchorPoint.BOTTOM_RIGHT
   ) {
-    props['bottom'] = '4px';
+    props["bottom"] = "4px";
   }
-  if (layout.Anchor === AnchorPoint.TOP_LEFT || layout.Anchor === AnchorPoint.CENTER) {
-    props['border-top-left-radius'] = padding;
+  if (
+    layout.Anchor === AnchorPoint.TOP_LEFT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props["border-top-left-radius"] = padding;
   }
-  if (layout.Anchor === AnchorPoint.TOP_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
-    props['border-top-right-radius'] = padding;
+  if (
+    layout.Anchor === AnchorPoint.TOP_RIGHT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props["border-top-right-radius"] = padding;
   }
-  if (layout.Anchor === AnchorPoint.BOTTOM_LEFT || layout.Anchor === AnchorPoint.CENTER) {
-    props['border-bottom-left-radius'] = padding;
+  if (
+    layout.Anchor === AnchorPoint.BOTTOM_LEFT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props["border-bottom-left-radius"] = padding;
   }
-  if (layout.Anchor === AnchorPoint.BOTTOM_RIGHT || layout.Anchor === AnchorPoint.CENTER) {
-    props['border-bottom-right-radius'] = padding;
+  if (
+    layout.Anchor === AnchorPoint.BOTTOM_RIGHT ||
+    layout.Anchor === AnchorPoint.CENTER
+  ) {
+    props["border-bottom-right-radius"] = padding;
   }
 
-  props['width'] = `calc(${layout.MaxSize.X * 100}% - ${padding})`;
-  props['height'] = `calc(${layout.MaxSize.Y * 100}% - ${'2px'})`;
+  props["width"] = `calc(${layout.MaxSize.X * 100}% - ${padding})`;
+  props["height"] = `calc(${layout.MaxSize.Y * 100}% - ${"2px"})`;
   if (layout.Anchor === AnchorPoint.CENTER) {
-    props['width'] = `calc(${layout.MaxSize.X * 100}% - ${padding} - ${padding})`;
-    props['height'] = `calc(${layout.MaxSize.Y * 100}% -  ${'2px'} -  ${'2px'})`;
+    props["width"] = `calc(${
+      layout.MaxSize.X * 100
+    }% - ${padding} - ${padding})`;
+    props["height"] = `calc(${
+      layout.MaxSize.Y * 100
+    }% -  ${"2px"} -  ${"2px"})`;
   }
 
   if (layout.AspectRatio === 1) {
     if (layout.MaxSize.X === 1) {
-      props['width'] = `calc(${layout.MaxSize.Y * toNumber(canvas?.offsetHeight)}px)`;
+      props["width"] = `calc(${
+        layout.MaxSize.Y * toNumber(canvas?.offsetHeight)
+      }px)`;
     }
     if (layout.MaxSize.Y === 1) {
-      props['height'] = `calc(${layout.MaxSize.X * toNumber(canvas?.offsetWidth)}px)`;
+      props["height"] = `calc(${
+        layout.MaxSize.X * toNumber(canvas?.offsetWidth)
+      }px)`;
     }
   }
 

package/src/plugins/__tests__/index.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import vuetify from "@/plugins/vuetify";
+import { fn } from "@vitest/spy";
+import { registerPlugins } from "@/plugins";
+import { App } from "vue";
+
+describe("index.ts", () => {
+  it("should registerPlugins", () => {
+    const app = {
+      use: fn(),
+    } as unknown as App;
+
+    expect(app.use).not.toHaveBeenCalledWith(vuetify);
+
+    registerPlugins(app);
+
+    expect(app.use).toHaveBeenCalledWith(vuetify);
+  });
+});

package/src/plugins/__tests__/vuetify.spec.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import vuetify from "@/plugins/vuetify";
+
+describe("vuetify.ts", () => {
+  it("should vuetify base", () => {
+    expect(vuetify).toBeTruthy();
+  });
+});

package/src/plugins/index.ts

@@ -5,11 +5,13 @@
  */
 
 // Plugins
-import vuetify from './vuetify'
+import vuetify from "./vuetify";
 
 // Types
-import type { App } from 'vue'
+import type { App } from "vue";
+import Notifications from "@kyvg/vue3-notification";
 
-export function registerPlugins (app: App) {
-  app.use(vuetify)
+export function registerPlugins(app: App) {
+  app.use(vuetify);
+  app.use(Notifications);
 }

package/src/plugins/vuetify.ts

@@ -5,24 +5,41 @@
  */
 
 // Styles
-import 'vuetify/styles'
+import "vuetify/styles";
 
 // Composables
-import { createVuetify } from 'vuetify'
-import { aliases, md  } from 'vuetify/iconsets/md'
-import { mdi  } from 'vuetify/iconsets/mdi'
+import { createVuetify, IconProps } from "vuetify";
+import { aliases, md } from "vuetify/iconsets/md";
+import { mdi } from "vuetify/iconsets/mdi";
+import { fa } from "vuetify/iconsets/fa";
+import { h } from "vue";
+import liver from "@/components/icons/liver.vue";
+
+const customComponents: any = {
+  liver,
+};
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+/* istanbul ignore next  -- @preserve */
 export default createVuetify({
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: "light",
   },
   icons: {
-    defaultSet: 'md',
+    defaultSet: "md",
     aliases,
     sets: {
       md,
-      mdi
+      mdi,
+      fa,
+      custom: {
+        /* c8 ignore start */
+        component: (props: IconProps) =>
+          h(props.tag, [
+            h(customComponents[props.icon as string], { class: "v-icon__svg" }),
+          ]),
+        /* c8 ignore stop */
+      },
     },
   },
-})
+});

package/test/helper.ts

@@ -0,0 +1,35 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import { createVuetify } from "vuetify";
+import { expect } from "vitest";
+
+export function mountVuetify<T>(
+  component: T,
+  props: any = {},
+  stubs: any = {}
+) {
+  const vuetify = createVuetify({});
+  return mount(component, {
+    props,
+    global: {
+      plugins: [vuetify],
+      stubs,
+    },
+  });
+}
+export function shallowMountVuetify<T>(component: T, props: any = {}) {
+  const vuetify = createVuetify({});
+  return shallowMount(component, {
+    props,
+    global: {
+      plugins: [vuetify],
+    },
+  });
+}
+
+export function checkComponentProps(
+  component: any,
+  propKey: string,
+  equal: any
+) {
+  expect(component.props()[propKey] as any).toBe(equal);
+}

package/test/setup.ts

@@ -0,0 +1 @@
+global.ResizeObserver = require("resize-observer-polyfill");

package/tsconfig.json

@@ -12,7 +12,8 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "~/*": ["test/*"]
     },
     "resolveJsonModule": true,
 
@@ -27,7 +28,9 @@
   },
   "include": [
     "./src/typed-router.d.ts",
-    "**/*.vue"
+    "**/*.ts",
+    "**/*.spec.ts",
+    "**/*.vue",
   ],
   "exclude": ["dist", "node_modules", "cypress"],
   "references": [{ "path": "./tsconfig.node.json" }]

package/vite.config.mts

@@ -68,6 +68,7 @@ if (globalThis.Viewer3CR) {
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '~': fileURLToPath(new URL('./test', import.meta.url)),
     },
     extensions: [
       '.js',

package/vitest.config.mts

@@ -0,0 +1,44 @@
+/// <reference types="vitest" />
+// vitest.config.ts
+import {defineConfig, mergeConfig} from 'vite'
+import viteConfig from "./vite.config.mjs";
+
+export default mergeConfig(viteConfig, defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    server: {
+      deps: {
+        inline: ['vuetify'],
+      },
+    },
+    exclude: ['node_modules/**'],
+    include: ['**/*.spec.ts'],
+    setupFiles: ['/test/setup.ts'],
+    coverage: {
+      provider: 'v8', // or 'v8',
+      enabled: true,
+      reporter: ['html'],
+      include: ['src/**/*', 'index.ts'],
+      exclude: [
+        'coverage/**',
+        'dist/**',
+        'scripts/**',
+        '**/[.]**',
+        'packages/*/test?(s)/**',
+        '**/*.d.ts',
+        '**/virtual:*',
+        '**/__x00__*',
+        '**/\x00*',
+        'cypress/**',
+        'test?(s)/**',
+        'test?(-*).?(c|m)[jt]s?(x)',
+        '**/*{.,-}{test,spec}.?(c|m)[jt]s?(x)',
+        '**/__tests__/**',
+        '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
+        '**/vitest.{workspace,projects}.[jt]s?(on)',
+        '**/.{eslint,mocha,prettier}rc.{?(c|m)js,yml}',
+      ],
+    },
+  },
+}))

package/src/components/expansion-panels/ExpansionHeaderMiniMenu.vue

@@ -1,19 +0,0 @@
-<template>
-  <v-expansion-panel-title class="font-weight-bold transparent">
-    <span
-      ><v-icon small>{{ props.miniMenu.icon }}</v-icon
-      >&nbsp;&nbsp;{{ props.miniMenu.text }}</span
-    >
-    <v-spacer />
-  </v-expansion-panel-title>
-</template>
-<script setup lang="ts">
-
-export interface Props {
-  miniMenu: { icon: string; text: string };
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  miniMenu: () => ({ icon: '', text: '' }),
-});
-</script>

package/src/helpers/models.ts

@@ -1,69 +0,0 @@
-export interface FrontEndPayload {
-  Interface: FrontEndInterfaces;
-  Action: FrontEndInterfaces;
-  Message: string;
-}
-export enum FrontEndInterfaces {
-  scan_loading = 'scan_loading',
-  file_management = 'file_management',
-  view_selection = 'view_selection',
-  layout = 'layout',
-  presets = 'presets',
-  sliders = 'sliders',
-  scan_orientation = 'scan_orientation',
-  scan_movement = 'scan_movement',
-  interactivity = 'interactivity',
-}
-export enum FrontEndActions {
-  pong = 'pong',
-  announcement = 'announcement',
-  fm02 = 'fm_02',
-}
-export enum FileManagementActions {
-  fm01 = 'fm_01',
-  fm02 = 'fm_02',
-}
-export enum NotificationActions {
-  no01 = 'no_01',
-  no02 = 'no_02',
-  no03 = 'no_03',
-}
-export enum ScanOrientationActions {
-  so01 = 'so_01',
-}
-export enum PresetActions {
-  pr01 = 'pr_01',
-  pr02 = 'pr_02',
-}
-export enum ScanMovementActions {
-  sm01 = 'sm_01',
-  sm02 = 'sm_02',
-  sm03 = 'sm_03',
-  sm04 = 'sm_04',
-  sm05 = 'sm_05',
-  sm06 = 'sm_06',
-  sm07 = 'sm_07',
-  sm08 = 'sm_08',
-  sm09 = 'sm_09',
-  sm10 = 'sm_10',
-  sm11 = 'sm_11',
-  sm12 = 'sm_12',
-}
-export enum SliderActions {
-  sl01 = 'sl_01',
-  sl02 = 'sl_02',
-  sl03 = 'sl_03',
-  sl04 = 'sl_04',
-  sl05 = 'sl_05',
-  sl06 = 'sl_06',
-  sl07 = 'sl_07',
-  sl08 = 'sl_08',
-  sl09 = 'sl_09',
-  sl10 = 'sl_10',
-  sl11 = 'sl_11',
-  sl12 = 'sl_12',
-  sl13 = 'sl_13',
-  sl14 = 'sl_14',
-  sl15 = 'sl_15',
-  sl16 = 'sl_16',
-}