@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/modal/menus/__tests__/SettingsMenu.spec.ts

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils';
+import { VCard, VMenu } from 'vuetify/components';
+import SettingsMenu from '@/components/modal/menus/SettingsMenu.vue';
+import ValueSelector from '@/components/shared/ValueSelector.vue';
+import { scanState } from '@/models/scanState';
+
+type ValueSelector = InstanceType<typeof ValueSelector>;
+
+describe('SettingsMenu tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(SettingsMenu);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should open and close', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponent(VMenu).setValue(false);
+    await wrapper.setProps({ modelValue: false });
+    expect(wrapper.findComponent(VCard).isVisible()).toBeFalsy();
+  });
+
+  it('should set brightness', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('brightness').setValue(1, 'value');
+    expect(scanState.value.Display.Brightness).toBe(1);
+  });
+
+  it('should set contrast', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('contrast').setValue(2, 'value');
+    expect(scanState.value.Display.Contrast).toBe(2);
+  });
+
+  it('should set opacity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('opacity').setValue(3, 'value');
+    expect(scanState.value.Display.Opacity).toBe(3);
+  });
+
+  it('should set pan sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('pan').setValue(4, 'value');
+    expect(scanState.value.InteractionSettings.PanSensivitity).toBe(4);
+  });
+
+  it('should set zoom sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('zoom').setValue(5, 'value');
+    expect(scanState.value.InteractionSettings.ZoomSensitivity).toBe(5);
+  });
+
+  it('should set rotate sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('rotate').setValue(6, 'value');
+    expect(scanState.value.InteractionSettings.RotateSensitivity).toBe(6);
+  });
+
+  it('should set camera rotate sensitivity', async () => {
+    const props = { modelValue: true };
+    const wrapper = mount(SettingsMenu, { props });
+    await wrapper.findComponentByTestId<ValueSelector>('camera').setValue(7, 'value');
+    expect(scanState.value.InteractionSettings.CameraRotateSensitivity).toBe(7);
+  });
+});

package/src/components/shared/DoubleSliderSelector.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-row class="flex-column" no-gutters>
+    <v-row v-if="label" no-gutters justify="start">
+      <v-col>
+        <span class="text-caption">{{ label }}</span>
+      </v-col>
+    </v-row>
+    <v-row class="py-2" no-gutters>
+      <v-col cols="3">
+        <v-text-field
+          data-testid="lower"
+          :model-value="sliderState[0]"
+          @update:model-value="input[0] = parseInt($event)"
+          @blur="onUpdateLower"
+          @keyup.enter="onUpdateLower"
+          density="compact"
+          hide-details
+          type="number"
+          variant="outlined"
+        />
+      </v-col>
+      <v-spacer />
+      <v-col cols="3">
+        <v-text-field
+          data-testid="upper"
+          :model-value="sliderState[1]"
+          @update:model-value="input[1] = parseInt($event)"
+          @blur="onUpdateHigher"
+          @keyup.enter="onUpdateHigher"
+          density="compact"
+          hide-details
+          type="number"
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+    <v-row class="pb-4" no-gutters>
+      <v-range-slider
+        v-model="sliderState"
+        data-testid="slider"
+        :loading="loading"
+        :thumb-label="showThumb"
+        thumb-color="blue"
+        :min="min"
+        :max="max"
+        hide-details
+      />
+    </v-row>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, unref, watch } from 'vue';
+import { clamp } from '@/functions/clamp';
+
+interface Props {
+  modelValue?: [number, number];
+  loading?: boolean;
+  label?: string;
+  min?: number;
+  max?: number;
+}
+
+type Emits = {
+  'update:modelValue': [[number, number]];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [0, 0],
+  loading: false,
+  label: '',
+  min: -99999,
+  max: 99999
+});
+
+const emit = defineEmits<Emits>();
+
+const _modelValue = ref<[number, number]>(props.modelValue);
+const input = ref<[number, number]>(props.modelValue);
+const showThumb = ref<'always' | boolean>(false);
+const showThumbTimeout = ref<NodeJS.Timeout | undefined>(undefined);
+
+const sliderState = computed({
+  get(): [number, number] {
+    return _modelValue.value;
+  },
+  set(value: [number, number]): void {
+    _modelValue.value = value;
+    emit('update:modelValue', value);
+  }
+});
+
+watch(
+  () => props.modelValue,
+  (value: [number, number]) => {
+    _modelValue.value = value;
+  }
+);
+
+watch([() => sliderState.value[0], () => sliderState.value[1]], () => {
+  clearTimeout(unref(showThumbTimeout));
+  showThumb.value = 'always';
+  showThumbTimeout.value = setTimeout(() => {
+    showThumb.value = false;
+  }, 1000);
+});
+
+function onUpdateLower(): void {
+  const higher = sliderState.value[1];
+  const lower = clamp(input.value[0], props.min, higher);
+  sliderState.value = [lower, higher];
+}
+
+function onUpdateHigher(): void {
+  const lower = sliderState.value[0];
+  const higher = clamp(input.value[1], lower, props.max);
+  sliderState.value = [lower, higher];
+}
+
+defineExpose({ sliderState });
+</script>
+
+<style scoped lang="scss">
+:deep(input) {
+  font-size: 14px;
+  padding: 4px 8px;
+  min-height: 0;
+}
+
+:deep(.v-slider-thumb__label-container) {
+  transform: translate(100%, 18px) rotate(180deg) !important;
+}
+
+:deep(.v-slider-thumb__label) {
+  padding: 2px 4px;
+  height: fit-content;
+}
+
+:deep(.v-slider-thumb__label div) {
+  transform: rotate(180deg) !important;
+}
+</style>

package/src/components/shared/UpdateSnackbar.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-snackbar
+    v-model="updateFound"
+    :timeout="-1"
+    color="transparent"
+    location="bottom end"
+    rounded="lg"
+    class="bg-transparent"
+    min-width="240"
+    elevation="0"
+    variant="elevated"
+  >
+    <v-alert v-model="updateFound" :color="`#303474`" prominent rounded="lg" icon="browser_updated">
+      <span class="text-subtitle-2">
+        We have detected an update for you! <br />Please click update as soon as possible.
+      </span>
+      <template #append>
+        <v-btn v-if="!updateInstalled" :loading="true" disabled>Installing</v-btn>
+        <v-btn
+          v-if="updateInstalled"
+          data-testid="update"
+          color="#2596be"
+          variant="flat"
+          size="large"
+          :loading="updateLoading"
+          @click="completeRegistration"
+          >Update</v-btn
+        >
+      </template>
+    </v-alert>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { ServiceWorkerService } from '@/services/service-worker.service';
+
+let registration: ServiceWorkerRegistration | undefined = undefined;
+
+const updateFound = ref<boolean>(false);
+const updateInstalled = ref<boolean>(false);
+const updateLoading = ref<boolean>(false);
+
+onMounted(async () => {
+  registration = await ServiceWorkerService.Instantiate().getRegistration();
+  if (registration) {
+    setupCheck(registration);
+  }
+});
+
+function setupCheck(registration: ServiceWorkerRegistration) {
+  registration.addEventListener('updatefound', () => {
+    updateFound.value = true;
+    if (registration.installing) {
+      registration.installing.addEventListener('statechange', () => {
+        if (registration.waiting) {
+          updateInstalled.value = true;
+          console.log('[app]Service Worker update available');
+        }
+      });
+    }
+  });
+  setInterval(() => {
+    registration.update();
+  }, 1000);
+}
+
+function completeRegistration() {
+  updateLoading.value = true;
+  registration?.waiting?.postMessage('SKIP_WAITING');
+}
+</script>

package/src/components/{selectors → shared}/ValueSelector.vue

@@ -9,7 +9,7 @@
       <v-col cols="4">
         <v-text-field
           :model-value="sliderValue"
-          @update:modelValue="sliderValue = toNumber($event)"
+          @update:modelValue="sliderValue = parseInt($event)"
           class="mt-0 pt-0"
           hide-details
           variant="outlined"
@@ -23,9 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { toNumber } from "@/helpers/utils";
-import { clamp } from "@/dataLayer/clamp";
+import { computed } from 'vue';
+import { clamp } from '@/functions/clamp';
 
 export interface Props {
   value: number;
@@ -40,15 +39,15 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   value: 0,
   loading: false,
-  label: "Test",
+  label: 'Test',
   min: -99999,
   max: 99999,
   step: 1,
-  prepend: "",
+  prepend: ''
 });
 
 const emit = defineEmits<{
-  "update:value": [number];
+  'update:value': [number];
 }>();
 
 const sliderValue = computed({
@@ -57,8 +56,8 @@ const sliderValue = computed({
   },
   set(value: number) {
     const val = clamp(value, props.min, props.max);
-    emit("update:value", val);
-  },
+    emit('update:value', val);
+  }
 });
 
 defineExpose({ sliderValue });
@@ -69,9 +68,7 @@ defineExpose({ sliderValue });
   .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
   > .v-input__control
   > .v-input__slot,
-.single-slider-selector
-  .v-text-field.v-text-field--enclosed
-  .v-text-field__details {
+.single-slider-selector .v-text-field.v-text-field--enclosed .v-text-field__details {
   padding: 0px 8px !important;
 }
 

package/src/components/shared/__tests__/DoubleSliderSelector.spec.ts

@@ -0,0 +1,83 @@
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
+import { VRangeSlider, VTextField } from 'vuetify/components';
+import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
+
+class DoubleSliderSelectorHarness<T> {
+  constructor(private readonly _wrapper: VueWrapper<T>) {}
+
+  get wrapper(): VueWrapper<T> {
+    return this._wrapper;
+  }
+
+  lower() {
+    return this.wrapper.findComponent<VTextField>('[data-testid="lower"]');
+  }
+
+  upper() {
+    return this.wrapper.findComponent<VTextField>('[data-testid="upper"]');
+  }
+
+  // slider() {
+  //   return this.wrapper.findComponent<VRangeSlider>('[data-testid="slider"]');
+  // }
+}
+
+describe('DoubleSliderSelector tests', () => {
+  it('should timeout the thumb', async () => {
+    vi.useFakeTimers();
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.wrapper.setProps({ modelValue: [1, 1] });
+    const slider = harness.wrapper.findComponent(VRangeSlider);
+    vi.advanceTimersByTime(999);
+    expect(slider.props().thumbLabel).toEqual('always');
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(slider.props().thumbLabel).toEqual(false);
+  });
+
+  it('should clamp lower only to min', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.lower().setValue(-100);
+    await harness.lower().trigger('blur');
+    await harness.upper().setValue(50);
+    await harness.upper().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 50]]]);
+  });
+
+  it('should clamp upper only to max', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.upper().setValue(200);
+    await harness.upper().trigger('blur');
+    await harness.lower().setValue(50);
+    await harness.lower().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[50, 100]]]);
+  });
+
+  it('should clamp lower and upper to min', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.lower().setValue(-100);
+    await harness.lower().trigger('blur');
+    await harness.upper().setValue(-10);
+    await harness.upper().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 0]]]);
+  });
+
+  it('should clamp lower and upper to max', async () => {
+    const props = { min: 0, max: 100 };
+    const wrapper = mount(DoubleSliderSelector, { props });
+    const harness = new DoubleSliderSelectorHarness(wrapper);
+    await harness.upper().setValue(9001);
+    await harness.upper().trigger('blur');
+    await harness.lower().setValue(9000);
+    await harness.lower().trigger('blur');
+    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 100]], [[100, 100]]]);
+  });
+});

package/src/components/shared/__tests__/LoadingSpinner.spec.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils';
+import LoadingSpinner from '@/components/shared/LoadingSpinner.vue';
+
+describe('LoadingSpinner tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(LoadingSpinner);
+    expect(wrapper).toBeTruthy();
+  });
+});

package/src/components/shared/__tests__/UpdateSnackbar.spec.ts

@@ -0,0 +1,116 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VAlert, VBtn, VSnackbar } from 'vuetify/components';
+import UpdateSnackbar from '../UpdateSnackbar.vue';
+
+const registration: any = {
+  addEventListener: vi.fn().mockImplementation((e, callback) => {
+    callback();
+  }),
+  installing: {
+    addEventListener: vi.fn().mockImplementation((e, callback) => {
+      callback();
+    })
+  },
+  waiting: {
+    postMessage: vi.fn()
+  },
+  update: vi.fn()
+};
+
+const navigator: any = {
+  serviceWorker: {
+    getRegistration() {
+      return registration;
+    }
+  }
+};
+
+const navigatorWithoutInstalling: any = {
+  serviceWorker: {
+    getRegistration() {
+      return {
+        addEventListener: vi.fn().mockImplementation((e, callback) => {
+          callback();
+        })
+      };
+    }
+  }
+};
+
+const navigatorWithoutWaiting: any = {
+  serviceWorker: {
+    getRegistration() {
+      return {
+        addEventListener: vi.fn().mockImplementation((e, callback) => {
+          callback();
+        }),
+        installing: {
+          addEventListener: vi.fn().mockImplementation((e, callback) => {
+            callback();
+          })
+        }
+      };
+    }
+  }
+};
+
+describe('UpdateSnackbar tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(UpdateSnackbar);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should set v-alert state', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponent(VAlert).setValue(false);
+    expect(wrapper.findComponent(VAlert).text()).toBe('');
+  });
+
+  it('should set v-snackbar state', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponent(VSnackbar).setValue(false);
+    expect(wrapper.findComponent(VSnackbar).text()).toBe('');
+  });
+
+  it('should check for updates if navigator present', () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should check for updates on interval', async () => {
+    vi.useFakeTimers();
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    mount(UpdateSnackbar);
+    await flushPromises();
+    vi.advanceTimersByTime(1000);
+    expect(navigator.serviceWorker.getRegistration().update).toHaveBeenCalled();
+    vi.useRealTimers();
+  });
+
+  it('should show installing when update found', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutInstalling);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+  });
+
+  it('should ignore update if waiting not found', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigatorWithoutWaiting);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    expect(wrapper.findComponent(VBtn).text()).toBe('Installing');
+  });
+
+  it('should apply update on user confirmation', async () => {
+    vi.spyOn(global, 'navigator', 'get').mockReturnValue(navigator);
+    const wrapper = mount(UpdateSnackbar);
+    await flushPromises();
+    await wrapper.findComponentByTestId('update').trigger('click');
+    expect(navigator.serviceWorker.getRegistration().waiting.postMessage).toHaveBeenCalledWith('SKIP_WAITING');
+  });
+});

package/src/components/shared/__tests__/ValueSelector.spec.ts

@@ -0,0 +1,39 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import ValueSelector from '@/components/shared/ValueSelector.vue';
+
+describe('ValueSelector.vue', () => {
+  const props = { value: 1, min: 0, max: 100 };
+  let wrapper = mount(ValueSelector, { props });
+
+  beforeEach(() => {
+    const props = { value: 0, min: 0, max: 100 };
+    wrapper = mount(ValueSelector, { props });
+  });
+
+  it('should inflate component', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should change from props', async () => {
+    await wrapper.setProps({ value: 1 });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+  });
+
+  it('should set text lower than min limits', async () => {
+    wrapper.vm.sliderValue = -100;
+    await flushPromises();
+    expect(wrapper.emitted('update:value')).toStrictEqual([[0]]);
+  });
+
+  it('should set text higher than max limits', async () => {
+    wrapper.vm.sliderValue = 9000;
+    await flushPromises();
+    expect(wrapper.emitted('update:value')).toStrictEqual([[100]]);
+  });
+
+  it('should set text', async () => {
+    const slider = wrapper.findAllComponents('.v-text-field');
+    await slider[0].setValue(10);
+  });
+});

package/src/components/shared/__tests__/VerticalSliderSelector.spec.ts

@@ -0,0 +1,50 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VSlider } from 'vuetify/components';
+import VerticalSliderSelector from '@/components/shared/VerticalSliderSelector.vue';
+
+describe('VerticalSliderSelector.vue', () => {
+  const props = { value: 0 };
+  let wrapper = mount(VerticalSliderSelector, { props });
+
+  beforeEach(() => {
+    wrapper = mount(VerticalSliderSelector, { props });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should inflate component', () => {
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should change from props', async () => {
+    await wrapper.setProps({
+      value: 1
+    });
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+  });
+
+  it('should timeout the thumb', async () => {
+    await wrapper.setProps({ value: 1 });
+    const slider = wrapper.findComponent(VSlider);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+
+    await wrapper.setProps({ value: 1 });
+    vi.advanceTimersByTime(999);
+    expect(slider.vm.thumbLabel).toBe('always');
+
+    vi.advanceTimersByTime(1);
+    await flushPromises();
+    expect(wrapper.vm.value).toStrictEqual(1);
+    expect(slider.vm.thumbLabel).toBe(false);
+  });
+
+  it('should set slider value', async () => {
+    const slider = wrapper.findComponent('.v-slider');
+    await slider.setValue(1);
+  });
+});