@3cr/viewer-browser 0.0.248 → 0.0.292

package/src/components/modal/modal/__tests__/DataOverlayModal.spec.ts

@@ -0,0 +1,94 @@
+import DataOverlayModal from '@/components/modal/modal/DataOverlayModal.vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import { useToolStore } from '@/stores/tool.store';
+import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
+import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
+import DataOverlayGeneralModal from '@/components/modal/modal/DataOverlayGeneralModal.vue';
+import { VOverlay } from 'vuetify/components';
+import DataOverlayMeasurementModal from '@/components/modal/modal/DataOverlayMeasurementModal.vue';
+import { useEventListener } from '@/composables/useEventListener';
+import { MockImportOriginal } from '@test/MockImportOriginal';
+import { deepClone } from '@vitest/utils';
+
+vi.mock(
+  '@/composables/useEventListener',
+  async (importOriginal: MockImportOriginal<typeof import('@/composables/useEventListener')>) => {
+    return {
+      ...(await importOriginal()),
+      useEventListener: vi.fn()
+    };
+  }
+);
+describe('DataOverlayInfo tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(DataOverlayModal);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should select an item as measurement', async () => {
+    const { dataOverlayTool } = useToolStore();
+    const wrapper = mount(DataOverlayModal);
+    expect(wrapper).toBeTruthy();
+    await wrapper.findComponent(VOverlay).setValue(true);
+
+    dataOverlayTool.selected.value = DataOverlayPolygonFaker.random();
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayMeasurementModal).exists()).toBe(true);
+  });
+
+  it('should select an item as measurement and updateTitle', async () => {
+    const { dataOverlayTool } = useToolStore();
+    const wrapper = mount(DataOverlayModal);
+    expect(wrapper).toBeTruthy();
+    await wrapper.findComponent(VOverlay).setValue(true);
+
+    dataOverlayTool.selected.value = DataOverlayPolygonFaker.random();
+    const clone = deepClone(dataOverlayTool.selected.value);
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayMeasurementModal).exists()).toBe(true);
+    await wrapper.findComponent(DataOverlayMeasurementModal).vm.$emit('updateTitle');
+
+    expect(dataOverlayTool.selected.value).toStrictEqual(clone);
+    await wrapper.findComponent(DataOverlayMeasurementModal).vm.$emit('updateTitle', 'some new title', clone.Id);
+    expect(dataOverlayTool.selected.value).not.toStrictEqual(clone);
+  });
+
+  it('should select an item as mcad', async () => {
+    const { dataOverlayTool } = useToolStore();
+    const wrapper = mount(DataOverlayModal);
+    expect(wrapper).toBeTruthy();
+    await wrapper.findComponent(VOverlay).setValue(true);
+
+    dataOverlayTool.selected.value = DataOverlayMcadFaker.random();
+
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayGeneralModal).exists()).toBe(true);
+  });
+
+  it('simulate click', async () => {
+    const defaultTarget = [0, 0];
+    let fn = (_obj: { x: number; y: number }) => {};
+    const eventListener = vi.mocked(useEventListener).mockImplementation((_a: any, _b: any, c: any) => {
+      fn = c;
+    });
+    const { dataOverlayTool } = useToolStore();
+    const wrapper = mount(DataOverlayModal);
+    expect(wrapper).toBeTruthy();
+    const overlay = wrapper.findComponent(VOverlay);
+    await overlay.setValue(true);
+    expect(overlay.vm.target).toStrictEqual(defaultTarget);
+
+    dataOverlayTool.selected.value = DataOverlayMcadFaker.random();
+
+    await flushPromises();
+    expect(wrapper.findComponent(DataOverlayGeneralModal).exists()).toBe(true);
+    expect(eventListener).toHaveBeenCalled();
+
+    fn({ x: 10, y: 10 });
+    expect(overlay.vm.target).toStrictEqual(defaultTarget);
+    await overlay.setValue(false);
+    fn({ x: 10, y: 10 });
+    await flushPromises();
+    expect(overlay.vm.target).toStrictEqual([10, 10]);
+  });
+});

package/src/components/modal/modal/__tests__/ShareModal.spec.ts

@@ -0,0 +1,262 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import ShareModal from '@/components/modal/modal/ShareModal.vue';
+import { VCard, VDialog, VSnackbar, VTabs, VTabsWindow, VTextField } from 'vuetify/components';
+import ImagesSharedSnackbar from '@/components/modal/snackbars/ImagesSharedSnackbar.vue';
+import LinkCopiedSnackbar from '@/components/modal/snackbars/LinkCopiedSnackbar.vue';
+import ShareMenu from '@/components/modal/menus/ShareMenu.vue';
+import { storeToRefs } from 'pinia';
+import { useViewerStore } from '@/stores/viewer.store';
+
+describe('ShareModal tests', () => {
+  it('should mount', () => {
+    const wrapper = mount(ShareModal);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should mount and open Modal', async () => {
+    const wrapper = mount(ShareModal);
+    expect(wrapper).toBeTruthy();
+
+    const dialog = wrapper.findComponent(VDialog);
+
+    expect(wrapper.findComponent(VCard).exists()).toBe(false);
+
+    await dialog.setValue(true);
+
+    await flushPromises();
+
+    expect(wrapper.findComponent(VCard).exists()).toBe(true);
+  });
+
+  it('should mount and close modal by click', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponentByTestId('close-btn').trigger('click');
+
+    expect(card.isVisible()).toBe(false);
+  });
+
+  it('should mount and close modal by click cancel', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponentByTestId('close-cancel').trigger('click');
+
+    expect(card.isVisible()).toBe(false);
+  });
+
+  it('should mount and setTab second', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponent(VTabs).setValue(1);
+
+    expect(card.html()).toContain('android-qr.svg');
+  });
+
+  it('should mount and setTab first', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponent(VTabs).setValue(0);
+
+    expect(card.html()).not.toContain('android-qr.svg');
+  });
+
+  it('should mount and setTab through window second', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponent(VTabsWindow).setValue(1);
+
+    expect(card.html()).toContain('android-qr.svg');
+  });
+
+  it('should mount and setTab through window first', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+
+    expect(card.exists()).toBe(true);
+
+    await card.findComponent(VTabsWindow).setValue(0);
+
+    expect(card.html()).not.toContain('android-qr.svg');
+  });
+
+  it('should show ImagesSharedSnackbar', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const [imagesSharedSnackbar, _linkCopiedSnackbar] = wrapper.findAllComponents(VSnackbar);
+    expect(imagesSharedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(false);
+
+    await wrapper.findComponent(ImagesSharedSnackbar).setValue(true);
+
+    expect(imagesSharedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(true);
+  });
+
+  it('should show ImagesSharedSnackbar then close it', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const [imagesSharedSnackbar, _linkCopiedSnackbar] = wrapper.findAllComponents(VSnackbar);
+    expect(imagesSharedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(false);
+
+    await wrapper.findComponent(ImagesSharedSnackbar).setValue(true);
+
+    const closeBtn = imagesSharedSnackbar.findComponentByTestId('closeBtn');
+    expect(closeBtn.exists()).toBe(true);
+
+    await closeBtn.trigger('click');
+
+    await flushPromises();
+    expect(imagesSharedSnackbar.findComponentByTestId('closeBtn').isVisible()).toBe(false);
+  });
+  it('should show LinkCopiedSnackbar', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const [_imagesSharedSnackbar, linkCopiedSnackbar] = wrapper.findAllComponents(VSnackbar);
+    expect(linkCopiedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(false);
+
+    await wrapper.findComponent(LinkCopiedSnackbar).setValue(true);
+
+    expect(linkCopiedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(true);
+  });
+
+  it('should show LinkCopiedSnackbar then close it', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const [_imagesSharedSnackbar, linkCopiedSnackbar] = wrapper.findAllComponents(VSnackbar);
+    expect(linkCopiedSnackbar.findComponentByTestId('closeBtn').exists()).toBe(false);
+
+    await wrapper.findComponent(LinkCopiedSnackbar).setValue(true);
+
+    const closeBtn = linkCopiedSnackbar.findComponentByTestId('closeBtn');
+    expect(closeBtn.exists()).toBe(true);
+
+    await closeBtn.trigger('click');
+
+    await flushPromises();
+    expect(linkCopiedSnackbar.findComponentByTestId('closeBtn').isVisible()).toBe(false);
+  });
+
+  it('should set email value', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponent(VTextField).setValue('e@c.com');
+    const btn = card.findComponentByTestId('invite-btn');
+
+    await flushPromises();
+
+    expect(card.findComponent(VTextField).vm.modelValue).toBe('e@c.com');
+    expect(btn.attributes().disabled).toBe(undefined);
+  });
+
+  it('should invite email', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponent(VTextField).setValue('e@c.com');
+
+    await flushPromises();
+    expect(card.findComponent(VTextField).vm.modelValue).toBe('e@c.com');
+    const btn = card.findComponentByTestId('invite-btn');
+
+    expect(btn.attributes().disabled).toBe(undefined);
+    await btn.trigger('click');
+    for (const menu of card.findAllComponents(ShareMenu)) {
+      await menu.setValue(true);
+    }
+
+    expect(card.findComponent(VTextField).vm.modelValue).toBe('');
+  });
+
+  it('should open email share menu', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponent(VTextField).findComponent(ShareMenu).setValue(true);
+
+    await flushPromises();
+
+    expect(wrapper.findComponent(ShareMenu).exists()).toBeTruthy();
+  });
+
+  it('should copy link', async () => {
+    const writeText = vi.fn();
+    Object.defineProperty(window, 'navigator', {
+      value: {
+        clipboard: {
+          writeText
+        }
+      },
+      writable: true // possibility to override
+    });
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponentByTestId('copy-link').trigger('click');
+
+    await flushPromises();
+
+    expect(writeText).toHaveBeenCalledWith(window.location.href);
+  });
+
+  it('should done without onshareScan', async () => {
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponentByTestId('done-btn').trigger('click');
+
+    await flushPromises();
+    expect(card.isVisible()).toBe(false);
+  });
+
+  it('should done with onshareScan', async () => {
+    const onshare = vi.fn();
+    const { options } = storeToRefs(useViewerStore());
+    options.value.onShareScan = onshare;
+
+    const wrapper = mount(ShareModal, { props: { modelValue: true } });
+    expect(wrapper).toBeTruthy();
+
+    const card = wrapper.findComponent(VCard);
+    await card.findComponentByTestId('done-btn').trigger('click');
+
+    await flushPromises();
+
+    expect(onshare).toHaveBeenCalled();
+    expect(card.isVisible()).toBe(false);
+  });
+});

package/src/components/modal/modal/__tests__/UploadsDrawer.spec.ts

@@ -0,0 +1,174 @@
+import UploadsDrawer from '@/components/modal/modal/UploadsDrawer.vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import { VBottomSheet, VBtn, VList, VToolbar } from 'vuetify/components';
+import { Upload } from '@3cr/viewer-types-ts';
+
+describe('UploadsDrawer', () => {
+  it('calculates progress correctly for uploading files', async () => {
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [{ id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'uploading', progress: 0.5 }],
+        modelValue: true
+      }
+    });
+
+    const upload = wrapper.props()?.uploads![0];
+    const progress = wrapper.vm.getProgress(upload);
+    expect(progress).toBe(50); // 0.5 * 100 = 50
+
+    await flushPromises();
+
+    expect(wrapper.findComponent(VToolbar).find('.font-weight-bold').html()).toContain('Uploading 1 items');
+  });
+
+  it('returns 0 progress when upload does not have progress (completed)', () => {
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [{ id: '2', title: 'File2', subtitle: 'Subtitle2', status: 'completed' }],
+        modelValue: true
+      }
+    });
+
+    const upload = wrapper.props()?.uploads![0];
+    const progress = wrapper.vm.getProgress(upload);
+    expect(progress).toBe(0);
+  });
+
+  it('should display v-sheet when v-bottom-sheet modelValue is true', async () => {
+    // Mount the component
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [],
+        modelValue: false
+      }
+    });
+
+    const bottomsheet = wrapper.findComponent(VBottomSheet);
+    expect(bottomsheet.isVisible()).toBe(true);
+
+    await bottomsheet.setValue(true);
+
+    await flushPromises();
+    expect(bottomsheet.isVisible()).toBe(true);
+  });
+
+  it('should expand', async () => {
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [{ id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'uploading', progress: 0.5 }],
+        modelValue: true
+      }
+    });
+
+    const toolbar = wrapper.findComponent(VToolbar);
+    const expandBtn = toolbar.findComponent(VBtn);
+
+    await flushPromises();
+
+    expect(expandBtn.html()).toContain('keyboard_arrow_down');
+
+    await expandBtn.trigger('click');
+    await flushPromises();
+
+    expect(expandBtn.html()).toContain('keyboard_arrow_up');
+  });
+
+  it('should close', async () => {
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [{ id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'uploading', progress: 0.5 }],
+        modelValue: true
+      }
+    });
+
+    const toolbar = wrapper.findComponent(VToolbar);
+    const [_expandBtn, closeButton] = toolbar.findAllComponents(VBtn);
+
+    await flushPromises();
+
+    expect(closeButton.html()).toContain('close');
+
+    await closeButton.trigger('click');
+    await flushPromises();
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  });
+
+  it('should be waiting', async () => {
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [{ id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'uploading', progress: 0.5 }],
+        modelValue: true
+      }
+    });
+
+    const [_firstToolbar, secondToolbar] = wrapper.findAllComponents(VToolbar);
+
+    await flushPromises();
+
+    expect(secondToolbar.html()).toContain('Please wait...');
+  });
+
+  it('should be counting then finish', async () => {
+    const upload = { id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'uploading', progress: 0.1 };
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [],
+        modelValue: true
+      }
+    });
+
+    async function updateUpload() {
+      await wrapper.setProps({
+        uploads: [upload as Upload]
+      });
+      await flushPromises();
+    }
+
+    await updateUpload();
+    vi.useFakeTimers();
+    vi.advanceTimersByTime(10000);
+
+    upload.progress = 0.6;
+    await updateUpload();
+
+    const [_firstToolbar, secondToolbar] = wrapper.findAllComponents(VToolbar);
+
+    await flushPromises();
+
+    expect(secondToolbar.html()).toContain('7 seconds remaining');
+    vi.advanceTimersByTime(10000);
+
+    upload.progress = 1;
+    await updateUpload();
+
+    expect(secondToolbar.html()).not.toContain('7 seconds remaining');
+
+    upload.status = 'completed';
+    await updateUpload();
+
+    expect(secondToolbar.html()).not.toContain('7 seconds remaining');
+  });
+
+  it('should show cancelled', async () => {
+    const upload = { id: '1', title: 'File1', subtitle: 'Subtitle1', status: 'cancelled', progress: 0.1 };
+    const wrapper = mount(UploadsDrawer, {
+      props: {
+        uploads: [],
+        modelValue: true
+      }
+    });
+
+    async function updateUpload() {
+      await wrapper.setProps({
+        uploads: [upload as Upload]
+      });
+      await flushPromises();
+    }
+
+    await updateUpload();
+    const list = wrapper.findComponent(VList);
+
+    expect(list.html()).toContain('Cancelled');
+  });
+});

package/src/components/modal/modal/__tests__/WhatsNewModal.spec.ts

@@ -0,0 +1,29 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { VBtn, VCard, VDialog } from 'vuetify/components';
+import WhatsNewModal from '@/components/modal/modal/WhatsNewModal.vue';
+
+describe('WhatsNewModal  tests', () => {
+  it('should mount', () => {
+    const props = { title: 'Test' };
+    const wrapper = mount(WhatsNewModal, { props });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(WhatsNewModal, { props });
+    const dialog = wrapper.findComponent(VDialog);
+    await dialog.setValue(false);
+    expect(wrapper.findComponent(VDialog).text()).toBeFalsy();
+  });
+
+  it('should close modal through button', async () => {
+    const props = { title: 'Test', modelValue: true };
+    const wrapper = mount(WhatsNewModal, { props });
+
+    await flushPromises();
+    const dialog = wrapper.findComponent(VCard).findComponent(VBtn);
+    await dialog.trigger('click');
+    expect(wrapper.findComponent(VDialog).text()).toBeFalsy();
+  });
+});

package/src/components/modal/snackbars/AnnotationGeneratedSnackbar.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat" class="pb-4">
+    <v-icon class="minsk-500 pr-3" icon="check_circle" size="large" />
+    <span class="shark-950 text-center text-sm-medium">
+      {{ t('texts.annotationGeneratedSuccess') }}
+    </span>
+    <template #actions>
+      <v-btn data-testid="undoBtn" class="mr-2 px-4 ml-auto" color="minsk_900" variant="flat" @click="undo">
+        <span>{{ t('labels.undo') }}</span>
+      </v-btn>
+      <v-icon
+        data-testid="closeBtn"
+        class="ml-auto mr-3 shark-400"
+        size="small"
+        icon="close"
+        @click="modelValue = false"
+      />
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+function undo(): void {
+  // TODO: implement
+  modelValue.value = false;
+}
+defineExpose({ undo, modelValue });
+</script>

package/src/components/modal/snackbars/ImagesSharedSnackbar.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <v-icon color="primary" icon="check_circle" size="large" start />
+    <span class="shark-950 text-center text-sm-medium">
+      {{ t('texts.imagesShared') }}
+    </span>
+    <template #actions>
+      <v-btn
+        data-testid="closeBtn"
+        class="shark-400"
+        icon="close"
+        size="small"
+        variant="text"
+        @click="modelValue = false"
+      />
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+</script>

package/src/components/modal/snackbars/LinkCopiedSnackbar.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-snackbar v-model="modelValue" variant="flat">
+    <v-icon color="primary" icon="check_circle" size="large" start />
+    <span class="shark-950 text-center text-sm-medium">
+      {{ t('texts.linkCopied') }}
+    </span>
+    <template #actions>
+      <v-btn
+        class="shark-400"
+        icon="close"
+        size="small"
+        data-testid="closeBtn"
+        variant="text"
+        @click="modelValue = false"
+      />
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const modelValue = defineModel<boolean>({ default: false });
+</script>

package/src/components/modal/snackbars/__tests__/AnnotationGeneratedSnackbar.spec.ts

@@ -0,0 +1,43 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import AnnotationGeneratedSnackbar from '@/components/modal/snackbars/AnnotationGeneratedSnackbar.vue';
+import { VSnackbar } from 'vuetify/components';
+describe('AnnotationGeneratedSnackbar', () => {
+  let wrapper: VueWrapper | null;
+  beforeEach(() => {
+    wrapper = mount(AnnotationGeneratedSnackbar, {
+      props: {
+        modelValue: false
+      }
+    });
+  });
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = null;
+  });
+  it('should render the snackbar correctly', async () => {
+    const snack = wrapper!.findComponent(VSnackbar);
+    await snack.setValue(true);
+    expect(snack.isVisible()).toBe(true);
+  });
+  it('should close the snackbar when close icon is clicked', async () => {
+    await wrapper!.setProps({ modelValue: true });
+    const closeButton = wrapper!.findComponent('[data-testid="closeBtn"]');
+    await closeButton.trigger('click');
+    expect(wrapper!.emitted('update:modelValue')?.[0]).toEqual([false]);
+  });
+  it('should call undo function and close the snackbar', async () => {
+    const undoSpy = vi.spyOn(wrapper!.vm, 'undo');
+    await wrapper!.setProps({ modelValue: true });
+    const undoButton = wrapper!.findComponent('[data-testid="undoBtn"]');
+    await undoButton.trigger('click');
+    expect(undoSpy).toHaveBeenCalled();
+    expect(wrapper!.emitted('update:modelValue')?.[0]).toEqual([false]);
+  });
+  it('should update modelValue and bind correctly via v-model', async () => {
+    await wrapper!.setProps({ modelValue: true });
+    const snackbar = wrapper!.findComponent(VSnackbar);
+    expect(snackbar.props('modelValue')).toBe(true);
+    await wrapper!.setProps({ modelValue: false });
+    expect(snackbar.props('modelValue')).toBe(false);
+  });
+});