Migrate Tool tests to Vitest

client/src/components/Tool/ToolCard.vitest.test.js

@@ -1,10 +1,11 @@
+import { expectConfigurationRequest, getLocalVue } from "@tests/vitest/helpers";
+import { setupMockConfig } from "@tests/vitest/mockConfig";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
-import { expectConfigurationRequest, getLocalVue } from "tests/jest/helpers";
-import { setupMockConfig } from "tests/jest/mockConfig";
+import { vi } from "vitest";
 
 import { useServerMock } from "@/api/client/__mocks__";
 import { useUserStore } from "@/stores/userStore";
@@ -13,7 +14,7 @@ import ToolCard from "./ToolCard.vue";
 
 const { server, http } = useServerMock();
 
-jest.mock("@/api/schema");
+vi.mock("@/api/schema");
 
 const config = { enable_tool_source_display: false };
 setupMockConfig(config);

client/src/components/Tool/ToolFooter.vitest.test.js

@@ -1,25 +1,53 @@
+import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
+import { vi } from "vitest";
 
 import ToolFooter from "./ToolFooter.vue";
 
 const localVue = getLocalVue(true);
 
-const citationsA = [{ format: "bibtex", content: "@misc{entry_a, year = {1111}}" }];
-const citationsB = [{ format: "bibtex", content: "@misc{entry_b, year = {2222}}" }];
+const citationsA = [
+    {
+        raw: "@misc{entry_a, year = {1111}}",
+        cite: {
+            format: vi.fn(
+                () =>
+                    '<div class="csl-bib-body"><div data-csl-entry-id="entry_a" class="csl-entry">Entry A (1111)</div></div>',
+            ),
+            data: [{ URL: "https://example.com/a" }],
+        },
+    },
+];
+
+const citationsB = [
+    {
+        raw: "@misc{entry_b, year = {2222}}",
+        cite: {
+            format: vi.fn(
+                () =>
+                    '<div class="csl-bib-body"><div data-csl-entry-id="entry_b" class="csl-entry">Entry B (2222)</div></div>',
+            ),
+            data: [{ URL: "https://example.com/b" }],
+        },
+    },
+];
+
+vi.mock("@/components/Citation/services", () => ({
+    getCitations: vi.fn((source, id) => {
+        if (id === "tool_a") {
+            return Promise.resolve(citationsA);
+        } else if (id === "tool_b") {
+            return Promise.resolve(citationsB);
+        }
+        return Promise.resolve([]);
+    }),
+}));
 
 describe("ToolFooter", () => {
     let wrapper;
-    let axiosMock;
 
     beforeEach(() => {
-        axiosMock = new MockAdapter(axios);
-        axiosMock.onGet(`/api/tools/tool_a/citations`).reply(200, citationsA);
-        axiosMock.onGet(`/api/tools/tool_b/citations`).reply(200, citationsB);
-
         wrapper = mount(ToolFooter, {
             propsData: {
                 id: "tool_a",
@@ -31,7 +59,7 @@ describe("ToolFooter", () => {
             },
             localVue,
             stubs: {
-                Citation: false,
+                CitationItem: false,
                 License: true,
                 Creators: true,
                 FontAwesomeIcon: true,
@@ -39,11 +67,6 @@ describe("ToolFooter", () => {
         });
     });
 
-    afterEach(() => {
-        axiosMock.restore();
-        axiosMock.reset();
-    });
-
     it("check props", async () => {
         await flushPromises();
         expect(wrapper.findAll(".footer-section-name").at(0).text()).toBeLocalizationOf("References");

client/src/components/Tool/ToolForm.vitest.test.js

@@ -1,12 +1,12 @@
-import "tests/jest/mockHelpPopovers";
+import "@tests/vitest/mockHelpPopovers";
 
 import { getFakeRegisteredUser } from "@tests/test-data";
+import { getLocalVue, suppressBootstrapVueWarnings } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
-import { getLocalVue, suppressBootstrapVueWarnings } from "tests/jest/helpers";
 
 import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
 import MockCurrentHistory from "@/components/providers/MockCurrentHistory";

client/src/components/Tool/ToolHelpRst.vitest.test.js

@@ -1,5 +1,5 @@
+import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
 
 import ToolHelpRst from "./ToolHelpRst.vue";
 

client/src/components/Tool/ToolSuccessMessage.vitest.test.ts

@@ -1,9 +1,13 @@
+import { getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
 
 import jobInformationResponse from "@/components/JobInformation/testData/jobInformationResponse.json";
 
 import ToolSuccessMessage from "./ToolSuccessMessage.vue";
 
+const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
+
 // Prop constants
 const TEST_JOB_RESPONSE = {
     produces_entry_points: false,
@@ -35,6 +39,8 @@ describe("ToolSuccessMessage", () => {
 
     beforeEach(async () => {
         wrapper = mount(ToolSuccessMessage as object, {
+            localVue,
+            router,
             propsData: {
                 jobResponse: TEST_JOB_RESPONSE,
                 toolName: TEST_TOOL_NAME,

client/src/components/Tool/utilities.vitest.test.ts

@@ -1,6 +1,8 @@
+import { vi } from "vitest";
+
 import { copyLink } from "./utilities";
 
-const writeText = jest.fn();
+const writeText = vi.fn();
 
 Object.assign(navigator, {
     clipboard: {
@@ -10,7 +12,8 @@ Object.assign(navigator, {
 
 describe("copyLink", () => {
     beforeEach(() => {
-        (navigator.clipboard.writeText as jest.Mock).mockResolvedValue(undefined);
+        writeText.mockClear();
+        (navigator.clipboard.writeText as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
     });
 
     it("should copy the link to the clipboard", () => {

client/src/components/ToolEntryPoints/ToolEntryPoints.vitest.test.js

@@ -1,7 +1,7 @@
 import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import { PiniaVuePlugin, setActivePinia } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
 
 import ToolEntryPoints from "./ToolEntryPoints.vue";
 

client/src/components/ToolsList/ToolsList.vitest.test.ts

@@ -1,7 +1,8 @@
 import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import { setActivePinia } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { vi } from "vitest";
 
 import { useToolStore } from "@/stores/toolStore";
 
@@ -27,18 +28,19 @@ const FILTER_SETTINGS = {
 };
 const WHOOSH_QUERY = createWhooshQuery(FILTER_SETTINGS);
 
-const routerPushMock = jest.fn();
+const routerPushMock = vi.fn();
 
-jest.mock("vue-router/composables", () => ({
+vi.mock("vue-router/composables", () => ({
     useRouter: () => ({
         push: routerPushMock,
     }),
 }));
 
 const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
 
 describe("ToolsList", () => {
-    let fetchToolsMock: jest.SpyInstance;
+    let fetchToolsMock: ReturnType<typeof vi.spyOn>;
     let pinia: ReturnType<typeof createTestingPinia>;
 
     beforeEach(() => {
@@ -46,8 +48,8 @@ describe("ToolsList", () => {
         setActivePinia(pinia);
 
         const toolStore = useToolStore(pinia);
-        fetchToolsMock = jest.spyOn(toolStore, "fetchTools").mockResolvedValue();
-        jest.spyOn(toolStore, "fetchToolSections").mockResolvedValue();
+        fetchToolsMock = vi.spyOn(toolStore, "fetchTools").mockResolvedValue();
+        vi.spyOn(toolStore, "fetchToolSections").mockResolvedValue();
 
         // Clear the router mock between tests
         routerPushMock.mockClear();
@@ -57,6 +59,7 @@ describe("ToolsList", () => {
         const wrapper = mount(ToolsList as object, {
             localVue,
             pinia,
+            router,
         });
 
         // By default, no search text, fetch tools is still called but without a query
@@ -95,6 +98,7 @@ describe("ToolsList", () => {
         mount(ToolsList as object, {
             localVue,
             pinia,
+            router,
             propsData: FILTER_SETTINGS,
         });
 

client/src/components/ToolsView/ToolsSchemaJson/ToolsJson.vitest.test.js

@@ -1,9 +1,9 @@
 // test response
+import { getLocalVue } from "@tests/vitest/helpers";
 import { shallowMount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
 
 import testToolsListResponse from "../testData/toolsList";
 import testToolsListInPanelResponse from "../testData/toolsListInPanel";