Fix test infrastructure issues for Vue 3 / VTU v2

- Add missing vi import in PersistentTaskProgressMonitorAlert test
- Remove duplicate jest helper imports (now using vitest helpers)
- Update VueRouter usage to v4 pattern with createTestRouter()
- Change wrapper.destroy() to wrapper.unmount() (VTU v2 API)
- Change propsData to props in mount options (VTU v2 API)

Author: dannon

client/src/components/Citation/CitationsList.test.ts

@@ -1,18 +1,16 @@
 import { createTestingPinia } from "@pinia/testing";
-import { getLocalVue } from "@tests/vitest/helpers";
+import { createTestRouter, getLocalVue } from "@tests/vitest/helpers";
 import { setupMockHistoryBreadcrumbs } from "@tests/vitest/mockHistoryBreadcrumbs";
 import { mount, type Wrapper } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import VueRouter from "vue-router";
 
 import { setMockConfig } from "@/composables/__mocks__/config";
 
 import CitationItem from "./CitationItem.vue";
 import MountTarget from "./CitationsList.vue";
 
 const localVue = getLocalVue(true);
-localVue.use(VueRouter);
 
 vi.mock("@/composables/config");
 
@@ -45,7 +43,7 @@ describe("CitationsList", () => {
     beforeEach(async () => {
         const pinia = createTestingPinia({ createSpy: vi.fn });
 
-        const router = new VueRouter();
+        const router = createTestRouter();
         router.push("/histories/citations?id=test-id");
 
         wrapper = mount(MountTarget as object, {

client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts

@@ -1,4 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
+import { vi } from "vitest";
 import { ref } from "vue";
 
 import type { TaskMonitor } from "@/composables/genericTaskMonitor";

client/src/components/Form/Elements/FormData/FormData.test.ts

@@ -4,7 +4,6 @@ import "@/composables/__mocks__/filter";
 import { createTestingPinia } from "@pinia/testing";
 import { dispatchEvent, getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import { dispatchEvent, getLocalVue } from "tests/jest/helpers";
 
 import { testDatatypesMapper } from "@/components/Datatypes/test_fixtures";
 import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";

client/src/components/Form/Elements/FormDirectory.test.js

@@ -93,7 +93,7 @@ describe("DirectoryPathEditableBreadcrumb", () => {
     });
     afterEach(async () => {
         if (wrapper) {
-            wrapper.destroy();
+            wrapper.unmount();
         }
         wrapper = undefined;
     });

client/src/components/Form/Elements/FormNumber.test.js

@@ -31,7 +31,7 @@ describe("FormInput", () => {
 
             const inputRange = await getInputRange(wrapper);
             expect(inputRange.exists()).toBe(shoudExist);
-            wrapper.destroy();
+            wrapper.unmount();
         };
 
         const props = { value: 50, type: "float" };
@@ -59,7 +59,7 @@ describe("FormInput", () => {
             const alert = await getAlert(wrapper);
             expect(alert.exists()).toBeTruthy();
             expect(alert.text().includes(`${number} is out`)).toBeTruthy();
-            wrapper.destroy();
+            wrapper.unmount();
         };
 
         const numberBiggerThanRange = [110, Number.MAX_VALUE];
@@ -87,7 +87,7 @@ describe("FormInput", () => {
 
             const alert = await getAlert(wrapper);
             expect(alert.exists()).toBeTruthy();
-            wrapper.destroy();
+            wrapper.unmount();
         };
 
         const props = { value: 50, type: "integer", min: 10, max: 100 };

client/src/components/History/CurrentHistory/HistoryNavigation.test.ts

@@ -14,7 +14,7 @@ async function createWrapper(props: object, userData?: Partial<RegisteredUser>)
     const pinia = createPinia();
 
     const wrapper = shallowMount(HistoryNavigation as object, {
-        propsData,
+        props,
         global: localVue,
         pinia,
     });

client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.test.js

@@ -49,7 +49,7 @@ describe("Libraries/LibraryFolder/FolderDetails/FolderDetails.vue", () => {
     });
 
     afterEach(async () => {
-        wrapper.destroy();
+        wrapper.unmount();
     });
 
     it("Should display details button", async () => {

client/src/components/ObjectStore/ObjectStoreBadge.test.ts

@@ -1,6 +1,5 @@
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
 
 import type { ObjectStoreBadgeType } from "@/api/objectStores.templates";
 import { MESSAGES } from "@/components/ObjectStore/badgeMessages";

client/src/components/Popper/usePopper.test.js

@@ -61,7 +61,7 @@ describe("usePopper", () => {
     test("should destroy Popper instance on unmount", () => {
         const wrapper = createTestComponent();
         const popperInstance = createPopper.mock.results[0].value;
-        wrapper.destroy();
+        wrapper.unmount();
         expect(popperInstance.destroy).toHaveBeenCalled();
     });
 

client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts

@@ -100,7 +100,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     });
 
     afterEach(() => {
-        wrapper.destroy();
+        wrapper.unmount();
         server.resetHandlers();
         currentItemState.value = null;
         setTourMock.mockClear();