Merge pull request #19185 from jmchilton/testing_24.2_4

Cleanup Jest Test Output (part 3)

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

@@ -3,11 +3,14 @@ import { getLocalVue } from "@tests/jest/helpers";
 import { mount, type Wrapper } from "@vue/test-utils";
 
 import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { setupSelectableMock } from "@/components/ObjectStore/mockServices";
 import { WorkflowFilters } from "@/components/Workflow/List/WorkflowFilters";
 import Filtering, { compare, contains, equals, toBool, toDate } from "@/utils/filtering";
 
 import FilterMenu from "./FilterMenu.vue";
 
+setupSelectableMock();
+
 const localVue = getLocalVue();
 const options = [
     { text: "Any", value: "any" },

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

@@ -2,6 +2,7 @@ import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
 import { useServerMock } from "@/api/client/__mocks__";
 import { rootResponse } from "@/components/FilesDialog/testingData";
@@ -13,6 +14,7 @@ const localVue = getLocalVue();
 jest.mock("app");
 
 const { server, http } = useServerMock();
+setupMockConfig({});
 
 describe("DirectoryPathEditableBreadcrumb", () => {
     let wrapper;
@@ -56,10 +58,6 @@ describe("DirectoryPathEditableBreadcrumb", () => {
         server.use(
             http.get("/api/remote_files/plugins", ({ response }) => {
                 return response(200).json(rootResponse);
-            }),
-
-            http.get("/api/configuration", ({ response }) => {
-                return response(200).json({});
             })
         );
 

client/src/components/Grid/GridList.test.js

@@ -11,8 +11,6 @@ import MountTarget from "./GridList.vue";
 
 jest.useFakeTimers();
 
-jest.mock("composables/config");
-
 setupMockConfig({ disabled: false, enabled: true });
 
 jest.mock("vue-router/composables");

client/src/components/HistoryImport.test.js

@@ -1,13 +1,17 @@
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue, wait } from "tests/jest/helpers";
+import VueRouter from "vue-router";
 
 import { useServerMock } from "@/api/client/__mocks__";
 import { waitOnJob } from "@/components/JobStates/wait";
 
 import HistoryImport from "./HistoryImport.vue";
 
 const localVue = getLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
 const TEST_JOB_ID = "job123789";
 const TEST_SOURCE_URL = "http://galaxy.example/import";
 
@@ -43,6 +47,7 @@ describe("HistoryImport.vue", () => {
         wrapper = mount(HistoryImport, {
             propsData: {},
             localVue,
+            router,
         });
         await flushPromises();
     });

client/src/components/JobInformation/JobOutputs.vue

@@ -26,9 +26,9 @@
                 </tr>
                 <tr v-if="paginate && totalLength > firstN">
                     <td colspan="2">
-                        <b-button id="paginate-btn" block variant="secondary" @click="firstN += 10">
+                        <BButton id="paginate-btn" block variant="secondary" @click="firstN += 10">
                             Show {{ totalLength - firstN >= 10 ? 10 : totalLength - firstN }} more outputs
-                        </b-button>
+                        </BButton>
                     </td>
                 </tr>
             </tbody>
@@ -37,10 +37,12 @@
 </template>
 
 <script>
+import { BButton } from "bootstrap-vue";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 
 export default {
     components: {
+        BButton,
         GenericHistoryItem,
     },
     props: {

client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.test.js

@@ -1,10 +1,13 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
+import VueRouter from "vue-router";
 
 import { worldwideCarbonIntensity, worldwidePowerUsageEffectiveness } from "./carbonEmissionConstants.js";
 import CarbonEmissions from "./CarbonEmissions";
 
 const localVue = getLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 const oneGibibyteMemoryInMebibyte = 1024;
 const oneHourInSeconds = 3600;
@@ -27,8 +30,10 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 jobRuntimeInSeconds: oneHourInSeconds,
                 memoryAllocatedInMebibyte: oneGibibyteMemoryInMebibyte,
                 powerUsageEffectiveness: worldwidePowerUsageEffectiveness,
+                geographicalServerLocationName: "GLOBAL",
             },
             localVue,
+            router,
         });
 
         const cpuEmissions = wrapper.find("#cpu-carbon-emissions").text();
@@ -48,8 +53,12 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 coresAllocated: 1,
                 estimatedServerInstance: testServerInstance,
                 jobRuntimeInSeconds: 1,
+                geographicalServerLocationName: "GLOBAL",
+                powerUsageEffectiveness: worldwidePowerUsageEffectiveness,
+                carbonIntensity: worldwideCarbonIntensity,
             },
             localVue,
+            router,
         });
 
         expect(wrapper.find("#memory-carbon-emissions").exists()).toBe(false);
@@ -65,8 +74,10 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 jobRuntimeInSeconds: 1,
                 memoryAllocatedInMebibyte: 1,
                 powerUsageEffectiveness: 0,
+                geographicalServerLocationName: "GLOBAL",
             },
             localVue,
+            router,
         });
 
         const cpuEmissions = wrapper.find("#cpu-carbon-emissions").text();
@@ -89,8 +100,10 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 jobRuntimeInSeconds: 1,
                 memoryAllocatedInMebibyte: 1,
                 powerUsageEffectiveness: 1,
+                geographicalServerLocationName: "GLOBAL",
             },
             localVue,
+            router,
         });
 
         const cpuEmissions = wrapper.find("#cpu-carbon-emissions").text();
@@ -109,8 +122,10 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 estimatedServerInstance: testServerInstance,
                 jobRuntimeInSeconds: 2,
                 geographicalServerLocationName: "GLOBAL",
+                powerUsageEffectiveness: worldwidePowerUsageEffectiveness,
             },
             localVue,
+            router,
         });
         const locationText = wrapper.find("#location-explanation").element;
         expect(locationText).toHaveTextContent(
@@ -132,6 +147,7 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 geographicalServerLocationName: locationName,
             },
             localVue,
+            router,
         });
 
         const locationElement = wrapper.find("#location-explanation").element;
@@ -150,8 +166,10 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 jobRuntimeInSeconds: 1,
                 memoryAllocatedInMebibyte: 1,
                 powerUsageEffectiveness,
+                geographicalServerLocationName: "GLOBAL",
             },
             localVue,
+            router,
         });
 
         const locationElement = wrapper.find("#pue").element;

client/src/components/Login/LoginForm.test.ts

@@ -1,11 +1,19 @@
+import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
+import flushPromises from "flush-promises";
+
+import { useServerMock } from "@/api/client/__mocks__";
+import { HttpResponse } from "@/api/client/__mocks__/index";
 
 import MountTarget from "./LoginForm.vue";
 
 const localVue = getLocalVue(true);
+const testingPinia = createTestingPinia({ stubActions: false });
+
+const { server, http } = useServerMock();
 
 async function mountLoginForm() {
     const wrapper = mount(MountTarget as object, {
@@ -16,6 +24,7 @@ async function mountLoginForm() {
         stubs: {
             ExternalLogin: true,
         },
+        pinia: testingPinia,
     });
 
     return wrapper;
@@ -26,6 +35,11 @@ describe("LoginForm", () => {
 
     beforeEach(() => {
         axiosMock = new MockAdapter(axios);
+        server.use(
+            http.get("/api/configuration", ({ response }) => {
+                return response.untyped(HttpResponse.json({ oidc: { cilogon: false, custos: false } }));
+            })
+        );
     });
 
     afterEach(() => {
@@ -62,8 +76,6 @@ describe("LoginForm", () => {
     it("props", async () => {
         const wrapper = await mountLoginForm();
 
-        console.log(wrapper.html());
-
         const $register = "#register-toggle";
         expect(wrapper.findAll($register).length).toBe(0);
 
@@ -79,6 +91,7 @@ describe("LoginForm", () => {
 
         const welcomePage = wrapper.find("iframe");
         expect(welcomePage.attributes("src")).toBe("welcome_url");
+        await flushPromises();
     });
 
     it("connect external provider", async () => {
@@ -126,5 +139,6 @@ describe("LoginForm", () => {
 
         const postedURL = axiosMock.history.post?.[0]?.url;
         expect(postedURL).toBe("/user/login");
+        await flushPromises();
     });
 });

client/src/components/Masthead/Masthead.test.js

@@ -5,8 +5,8 @@ import flushPromises from "flush-promises";
 import { WindowManager } from "layout/window-manager";
 import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
-import { useServerMock } from "@/api/client/__mocks__";
 import { useUserStore } from "@/stores/userStore";
 
 import { loadWebhookMenuItems } from "./_webhooks";
@@ -20,10 +20,10 @@ jest.mock("vue-router/composables", () => ({
     useRouter: jest.fn(),
 }));
 
-const { server, http } = useServerMock();
-
 const currentUser = getFakeRegisteredUser();
 
+setupMockConfig({});
+
 describe("Masthead.vue", () => {
     let wrapper;
     let localVue;
@@ -45,12 +45,6 @@ describe("Masthead.vue", () => {
         localVue.use(PiniaVuePlugin);
         testPinia = createTestingPinia();
 
-        server.use(
-            http.get("/api/configuration", ({ response }) => {
-                return response(200).json({});
-            })
-        );
-
         windowManager = new WindowManager({});
         const windowTab = windowManager.getTab();
 
@@ -63,6 +57,9 @@ describe("Masthead.vue", () => {
             },
             localVue,
             pinia: testPinia,
+            stubs: {
+                Icon: true,
+            },
         });
         await flushPromises();
     });

client/src/components/ObjectStore/Instances/CreateForm.test.ts

@@ -154,7 +154,6 @@ describe("CreateForm", () => {
         const emitted = wrapper.emitted("created") || [];
         expect(emitted).toHaveLength(0);
         const errorEl = wrapper.find("[data-description='object-store-creation-error']");
-        console.log(wrapper.html());
         expect(errorEl.exists()).toBe(true);
         expect(errorEl.html()).toContain("Error creating this");
     });

client/src/components/Panels/Buttons/FavoritesButton.test.js

@@ -10,6 +10,9 @@ const localVue = getLocalVue();
 async function createWrapper(component, localVue, userData) {
     const pinia = createPinia();
     const wrapper = shallowMount(component, {
+        propsData: {
+            query: "mock",
+        },
         localVue,
         pinia,
     });

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

@@ -1,10 +1,12 @@
+import "tests/jest/mockHelpPopovers";
+
 import { getFakeRegisteredUser } from "@tests/test-data";
 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 } from "tests/jest/helpers";
+import { getLocalVue, suppressBootstrapVueWarnings } from "tests/jest/helpers";
 
 import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
 import MockCurrentHistory from "@/components/providers/MockCurrentHistory";
@@ -18,13 +20,20 @@ const { server, http } = useServerMock();
 const localVue = getLocalVue();
 const pinia = createPinia();
 
+// the PersonViewer component uses a BPopover that doesn't work with jsdom properly. It would be
+// better to break PersonViewer and OrganizationViewer out into smaller subcomponents and just
+// stub out the Popover piece I think.
+suppressBootstrapVueWarnings();
+
 describe("ToolForm", () => {
     let wrapper;
     let axiosMock;
     let userStore;
     let historyStore;
 
     beforeEach(() => {
+        // I tried using the useConfig mock and this component seems to bypass that, it would be
+        // better if it didn't. We shouldn't have to stub out an API request to get a particular config.
         server.use(
             http.get("/api/configuration", ({ response }) => {
                 return response.untyped(
@@ -43,6 +52,7 @@ describe("ToolForm", () => {
             version: "version",
             inputs: [],
             help: "help_text",
+            help_format: "restructuredtext",
             creator: [{ class: "Person", givenName: "FakeName", familyName: "FakeSurname", email: "fakeEmail" }],
         });
         axiosMock.onGet(`/api/webhooks`).reply(200, []);