Vitest followup: switch to happy-dom, cleanup/fixes to mocks

client/package.json

@@ -99,7 +99,7 @@
     "querystring-es3": "^0.2.1",
     "regenerator-runtime": "^0.14.0",
     "requirejs": "2.3.7",
-    "ro-crate-zip-explorer": "^0.4.0",
+    "ro-crate-zip-explorer": "^0.4.1",
     "rxjs": "^7.8.1",
     "rxjs-spy": "^8.0.2",
     "rxjs-spy-devtools-plugin": "^0.0.4",
@@ -196,10 +196,9 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "gulp": "^5.0.0",
+    "happy-dom": "^20.0.10",
     "ignore-loader": "^0.1.2",
     "imports-loader": "^5.0.0",
-    "jsdom": "^27.2.0",
-    "jsdom-worker": "^0.3.0",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^2.9.2",
     "msw": "^2.3.4",

client/src/components/ActivityBar/ActivitySettings.test.js

@@ -78,7 +78,7 @@ describe("ActivitySettings", () => {
         expect(items.length).toBe(1);
         const checkbox = items.at(0).find("[data-title='Hide in Activity Bar']");
         expect(checkbox.exists()).toBeTruthy();
-        const icon = wrapper.find("[icon='activity-test-icon'");
+        const icon = wrapper.find("[icon='activity-test-icon']");
         expect(icon.exists()).toBeTruthy();
         expect(activityStore.getAll()[0].visible).toBeTruthy();
         checkbox.trigger("click");

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

@@ -6,22 +6,20 @@ 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", () => ({
-    useConfig: vi.fn(() => ({
-        config: {
-            value: {
-                citation_bibtex:
-                    "@article{Galaxy2024, title={The Galaxy platform for accessible, reproducible, and collaborative data analyses: 2024 update}, author={{The Galaxy Community}}, journal={Nucleic Acids Research}, year={2024}, doi={10.1093/nar/gkae410}, url={https://doi.org/10.1093/nar/gkae410}}",
-            },
-        },
-    })),
-}));
+vi.mock("@/composables/config");
+
+setMockConfig({
+    citation_bibtex:
+        "@article{Galaxy2024, title={The Galaxy platform for accessible, reproducible, and collaborative data analyses: 2024 update}, author={{The Galaxy Community}}, journal={Nucleic Acids Research}, year={2024}, doi={10.1093/nar/gkae410}, url={https://doi.org/10.1093/nar/gkae410}}",
+});
 
 vi.mock("@/components/Citation/services", () => ({
     getCitations: vi.fn(() =>

client/src/components/DatasetInformation/DatasetError.test.ts

@@ -15,12 +15,7 @@ const localVue = getLocalVue();
 
 const DATASET_ID = "dataset_id";
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: {},
-        isConfigLoaded: true,
-    })),
-}));
+vi.mock("@/composables/config");
 
 const { server, http } = useServerMock();
 

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

@@ -442,7 +442,7 @@ describe("FormData", () => {
         });
         const noCheckLinked = wrapper.find("input[type='checkbox']");
         expect(noCheckLinked.exists()).toBeFalsy();
-        await wrapper.find("[title='Multiple datasets'").trigger("click");
+        await wrapper.find("[title='Multiple datasets']").trigger("click");
         expect(wrapper.emitted()!.input![1]![0]).toEqual(null);
         const elements_0 = wrapper.findAll(SELECT_OPTIONS);
         expect(elements_0.length).toEqual(6);
@@ -508,7 +508,7 @@ describe("FormData", () => {
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(1);
         expect(selectedValues.at(0).text()).toBe("5: hdcaName5");
-        await wrapper.find("[title='Multiple datasets'").trigger("click");
+        await wrapper.find("[title='Multiple datasets']").trigger("click");
         expect(options.at(0).classes()).toContain("active");
         expect(wrapper.emitted()!.input![2]![0]).toEqual(null);
     });

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

@@ -47,9 +47,10 @@ describe("FormText", () => {
     it("should be able to render border and text color from props", async () => {
         const wrapper = await mountFormText({});
         const el = wrapper.find("input");
-        expect(el.element.style).toMatchObject({});
+        expect(el.element.style.color).toBeFalsy();
         await wrapper.setProps({ color: "green" });
-        expect(el.element.style).toMatchObject({ color: "green", "border-color": "green" });
+        expect(el.element.style.color).toBe("green");
+        expect(el.element.style.borderColor).toBe("green");
         await wrapper.setProps({ cls: "my-custom-class" });
         expect(el.element.classList).toContain("my-custom-class");
     });

client/src/components/Markdown/Sections/MarkdownGalaxy.test.js

@@ -91,7 +91,8 @@ describe("MarkdownContainer", () => {
         const container = wrapper.find(".collapse");
         expect(container.attributes("style")).toBe("display: none;");
         await link.trigger("click");
-        expect(container.attributes("style")).toBe("");
+        // After click, style attribute is removed
+        expect(container.attributes("style")).toBeFalsy();
     });
 
     it("Renders time stamp", async () => {

client/src/components/Panels/Common/ToolSection.test.js

@@ -3,16 +3,15 @@ import { mount } from "@vue/test-utils";
 import { createPinia } from "pinia";
 import { describe, expect, test, vi } from "vitest";
 
+import { setMockConfig } from "@/composables/__mocks__/config";
+
 import ToolSection from "./ToolSection.vue";
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: {
-            toolbox_auto_sort: true,
-        },
-        isConfigLoaded: true,
-    })),
-}));
+vi.mock("@/composables/config");
+
+setMockConfig({
+    toolbox_auto_sort: true,
+});
 
 const localVue = getLocalVue();
 const pinia = createPinia();

client/src/components/Panels/ToolBox.test.js

@@ -4,17 +4,15 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import toolsList from "@/components/ToolsView/testData/toolsList";
 import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel";
+import { setMockConfig } from "@/composables/__mocks__/config";
 
 import { createSortedResultPanel, filterTools } from "./utilities";
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: {
-            toolbox_auto_sort: true,
-        },
-        isConfigLoaded: true,
-    })),
-}));
+vi.mock("@/composables/config");
+
+setMockConfig({
+    toolbox_auto_sort: true,
+});
 
 describe("ToolBox", () => {
     const toolsMock = toolsList.reduce((acc, item) => {

client/src/components/Panels/ToolPanel.test.ts

@@ -35,12 +35,7 @@ const TEST_PANELS_URI = "/api/tool_panels";
 const DEFAULT_VIEW_ID = "default";
 const PANEL_VIEW_ERR_MSG = "Error loading panel view";
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: {},
-        isConfigLoaded: true,
-    })),
-}));
+vi.mock("@/composables/config");
 
 vi.mock("@/composables/userLocalStorage", () => ({
     useUserLocalStorage: vi.fn(() => ref(DEFAULT_VIEW_ID)),

client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts

@@ -1,15 +1,11 @@
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { nextTick } from "vue";
 
 import HeadlessMultiselect from "./HeadlessMultiselect.vue";
 
 describe("HeadlessMultiselect", () => {
-    // this function is not implemented in jsdom
-    // mocking it to avoid false errors
-    Element.prototype.scrollIntoView = vi.fn();
-
     const localVue = getLocalVue();
 
     type Props = InstanceType<typeof HeadlessMultiselect>["$props"];

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

@@ -41,9 +41,9 @@ describe("ToolForm", () => {
             }),
         );
 
-        // the PersonViewer component uses a BPopover that doesn't work with jsdom properly. It would be
+        // the PersonViewer component uses a BPopover that doesn't work in the test environment. It would be
         // better to break PersonViewer and OrganizationViewer out into smaller subcomponents and just
-        // stub out the Popover piece I think.
+        // stub out the Popover piece.
         suppressBootstrapVueWarnings();
 
         axiosMock = new MockAdapter(axios);

client/src/components/Upload/UploadModal.test.js

@@ -12,12 +12,7 @@ import { useUserStore } from "@/stores/userStore";
 import UploadContainer from "./UploadContainer.vue";
 import UploadModal from "./UploadModal.vue";
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: {},
-        isConfigLoaded: true,
-    })),
-}));
+vi.mock("@/composables/config");
 
 const { server, http } = useServerMock();
 

client/src/components/Workflow/List/WorkflowList.test.ts

@@ -7,13 +7,16 @@ import { setActivePinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import VueRouter from "vue-router";
 
+import { useServerMock } from "@/api/client/__mocks__";
 import { loadWorkflows } from "@/api/workflows";
 import { useUserStore } from "@/stores/userStore";
 
 import { generateRandomWorkflowList } from "../testUtils";
 
 import WorkflowList from "./WorkflowList.vue";
 
+const { server, http } = useServerMock();
+
 vi.mock("@/api/workflows", () => ({
     loadWorkflows: vi.fn(),
 }));
@@ -55,6 +58,12 @@ describe("WorkflowList", () => {
     beforeEach(() => {
         suppressBootstrapVueWarnings();
         vi.clearAllMocks();
+        // Mock the workflow counts endpoint used by workflow card badges
+        server.use(
+            http.get("/api/workflows/{workflow_id}/counts", ({ response }) => {
+                return response(200).json({});
+            }),
+        );
     });
 
     it("render empty workflow list", async () => {

client/src/composables/__mocks__/config.ts

@@ -0,0 +1,34 @@
+import { vi } from "vitest";
+import { ref } from "vue";
+
+// Default mock config values
+const defaultConfig = {
+    allow_local_account_creation: true,
+    enable_oidc: false,
+    mailing_join_addr: "",
+    prefer_custos_login: false,
+    registration_warning_message: "",
+    server_mail_configured: false,
+    show_welcome_with_login: false,
+    terms_url: "",
+    welcome_url: "",
+    citation_bibtex: "",
+    toolbox_auto_sort: false,
+};
+
+const mockConfig = ref({ ...defaultConfig });
+
+export const useConfig = vi.fn(() => ({
+    config: mockConfig,
+    isConfigLoaded: true,
+}));
+
+// Helper function for tests to override config values
+export function setMockConfig(config: Record<string, any>) {
+    mockConfig.value = { ...mockConfig.value, ...config };
+}
+
+// Helper function to reset config to defaults
+export function resetMockConfig() {
+    mockConfig.value = { ...defaultConfig };
+}

client/src/entry/analysis/modules/Login.test.ts

@@ -2,35 +2,33 @@ import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/vitest/helpers";
 import { shallowMount } from "@vue/test-utils";
 import { setActivePinia } from "pinia";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { setMockConfig } from "@/composables/__mocks__/config";
 
 import Login from "./Login.vue";
 
 const localVue = getLocalVue(true);
 
-const configMock = {
-    allow_local_account_creation: true,
-    enable_oidc: true,
-    mailing_join_addr: "mailing_join_addr",
-    prefer_custos_login: true,
-    registration_warning_message: "registration_warning_message",
-    server_mail_configured: true,
-    show_welcome_with_login: true,
-    terms_url: "terms_url",
-    welcome_url: "welcome_url",
-};
-
 vi.mock("@/app", () => ({
     getGalaxyInstance: vi.fn(() => ({ session_csrf_token: "session_csrf_token" })),
 }));
 
-vi.mock("@/composables/config", () => ({
-    useConfig: vi.fn(() => ({
-        config: configMock,
+vi.mock("@/composables/config");
 
-        isConfigLoaded: true,
-    })),
-}));
+beforeEach(() => {
+    setMockConfig({
+        allow_local_account_creation: true,
+        enable_oidc: true,
+        mailing_join_addr: "mailing_join_addr",
+        prefer_custos_login: true,
+        registration_warning_message: "registration_warning_message",
+        server_mail_configured: true,
+        show_welcome_with_login: true,
+        terms_url: "terms_url",
+        welcome_url: "welcome_url",
+    });
+});
 
 const mockRouter = (query: object) => ({
     currentRoute: {