Merge pull request #19178 from jmchilton/testing_24.2_3

Cleanup Jest Test Output (part 2)

client/src/app/app.test.js

@@ -1,6 +1,7 @@
 import galaxyOptions from "@tests/test-data/bootstrapped";
 import { getGalaxyInstance, setGalaxyInstance } from "app";
 import Backbone from "backbone";
+import { suppressDebugConsole } from "tests/jest/helpers";
 
 export function setupTestGalaxy(galaxyOptions_ = null) {
     galaxyOptions_ = galaxyOptions_ || galaxyOptions;
@@ -13,6 +14,10 @@ export function setupTestGalaxy(galaxyOptions_ = null) {
     });
 }
 
+// the app console debugs make sense but we just don't want to see them in test
+// output.
+suppressDebugConsole();
+
 describe("App base construction/initializiation defaults", () => {
     beforeEach(() => {
         setupTestGalaxy(galaxyOptions);

client/src/components/ConfigTemplates/formUtil.ts

@@ -218,9 +218,7 @@ export function upgradeForm(template: TemplateSummary, instance: Instance): Form
     }
     for (const secret of secrets) {
         const secretName = secret.name;
-        if (secretsSet.indexOf(secretName) >= 0) {
-            console.log("skipping...");
-        } else {
+        if (secretsSet.indexOf(secretName) < 0) {
             form.push(templateSecretFormEntry(secret));
         }
     }

client/src/components/Dataset/DatasetStorage/DatasetStorage.test.ts

@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue, suppressDebugConsole } from "tests/jest/helpers";
 
 import { type DatasetStorageDetails } from "@/api";
 import { useServerMock } from "@/api/client/__mocks__";
@@ -58,6 +58,7 @@ describe("DatasetStorage.vue", () => {
     });
 
     it("test error rendering...", async () => {
+        suppressDebugConsole();
         mount({ simulateError: true });
         await flushPromises();
         expect(wrapper.findAll(".error").length).toBe(1);

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

@@ -1,3 +1,5 @@
+import "tests/jest/mockHelpPopovers";
+
 import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { PiniaVuePlugin } from "pinia";

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

@@ -3,24 +3,17 @@ import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
-import { useConfig } from "@/composables/config";
 import Filtering from "@/utils/filtering";
 
 import MountTarget from "./GridList.vue";
 
 jest.useFakeTimers();
 
 jest.mock("composables/config");
-useConfig.mockReturnValue({
-    config: {
-        value: {
-            disabled: false,
-            enabled: true,
-        },
-    },
-    isConfigLoaded: true,
-});
+
+setupMockConfig({ disabled: false, enabled: true });
 
 jest.mock("vue-router/composables");
 

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

@@ -3,6 +3,7 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
+import { h } from "vue";
 
 import { useServerMock } from "@/api/client/__mocks__";
 import { ROOT_COMPONENT } from "@/utils/navigation/schema";
@@ -42,6 +43,13 @@ async function mountComponent() {
 
 const PREFERENCES = ROOT_COMPONENT.preferences;
 
+// bootstrap vue will try to match targets to actual HTML elements in DOM but there
+// may be no DOM for jest tests, just stub out an alternative minimal implementation.
+jest.mock("@/components/ObjectStore/ObjectStoreSelectButtonPopover.vue", () => ({
+    name: "ObjectStoreSelectButtonPopover",
+    render: () => h("div", "Mocked Popover"),
+}));
+
 describe("SelectPreferredStore.vue", () => {
     let axiosMock: MockAdapter;
 

client/src/components/History/Multiple/MultipleView.test.js

@@ -3,6 +3,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 { useHistoryStore } from "@/stores/historyStore";
@@ -13,6 +14,8 @@ import MultipleView from "./MultipleView.vue";
 const USER_ID = "test-user-id";
 const FIRST_HISTORY_ID = "test-history-id-0";
 
+setupMockConfig({});
+
 const { server, http } = useServerMock();
 
 const getFakeHistorySummaries = (num) => {
@@ -29,10 +32,6 @@ describe("MultipleView", () => {
         const fakeSummaries = getFakeHistorySummaries(count);
 
         server.use(
-            http.get("/api/configuration", ({ response }) => {
-                return response(200).json({});
-            }),
-
             http.get("/api/histories/{history_id}", ({ response, params }) => {
                 const { history_id } = params;
                 const summary = fakeSummaries.find((s) => s.id === history_id);

client/src/components/JobInformation/JobInformation.test.js

@@ -1,3 +1,5 @@
+import "tests/jest/mockHelpPopovers";
+
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";

client/src/components/Masthead/QuotaMeter.test.ts

@@ -3,6 +3,7 @@ import { getFakeRegisteredUser } from "@tests/test-data";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
 import { type RegisteredUser } from "@/api";
 import { useUserStore } from "@/stores/userStore";
@@ -11,19 +12,10 @@ import QuotaMeter from "./QuotaMeter.vue";
 
 jest.mock("@/api/schema");
 
-let configValues = { enable_quotas: true };
-
-jest.mock("@/composables/config", () => ({
-    useConfig: jest.fn(() => ({
-        config: { value: { ...configValues } },
-        isConfigLoaded: true,
-    })),
-}));
-
 const localVue = getLocalVue();
 
 async function createQuotaMeterWrapper(config: any, user: RegisteredUser) {
-    configValues = { ...config };
+    setupMockConfig(config);
     const pinia = createTestingPinia();
     const userStore = useUserStore();
     userStore.currentUser = user;

client/src/components/StsDownloadButton.test.js

@@ -6,8 +6,7 @@ import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
-
-import { useServerMock } from "@/api/client/__mocks__";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
 import StsDownloadButton from "./StsDownloadButton.vue";
 
@@ -22,14 +21,8 @@ const FALLBACK_URL = "http://cow.com/direct_download";
 const DOWNLOAD_ENDPOINT = "http://cow.com/prepare_download";
 const STORAGE_REQUEST_ID = "moocow1235";
 
-const { server, http } = useServerMock();
-
 async function mountStsDownloadButtonWrapper(config) {
-    server.use(
-        http.get("/api/configuration", ({ response }) => {
-            return response(200).json(config);
-        })
-    );
+    setupMockConfig(config);
 
     const pinia = createPinia();
     const wrapper = mount(StsDownloadButton, {

client/src/components/TagsMultiselect/StatelessTags.test.js

@@ -1,7 +1,6 @@
 import { mount } from "@vue/test-utils";
 import { useToast } from "composables/toast";
-import { getLocalVue } from "tests/jest/helpers";
-import { computed } from "vue";
+import { getLocalVue, suppressBootstrapVueWarnings } from "tests/jest/helpers";
 
 import { normalizeTag, useUserTagsStore } from "@/stores/userTagsStore";
 
@@ -19,10 +18,12 @@ const mountWithProps = (props) => {
     });
 };
 
+suppressBootstrapVueWarnings();
+
 jest.mock("@/stores/userTagsStore");
 const onNewTagSeenMock = jest.fn((tag) => tag);
 useUserTagsStore.mockReturnValue({
-    userTags: computed(() => autocompleteTags),
+    userTags: autocompleteTags,
     onNewTagSeen: onNewTagSeenMock,
     onTagUsed: jest.fn(),
     onMultipleNewTagsSeen: jest.fn(),

client/src/components/TagsMultiselect/StatelessTags.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
 import { useToast } from "@/composables/toast";
@@ -36,7 +35,6 @@ const emit = defineEmits<{
 }>();
 
 const userTagsStore = useUserTagsStore();
-const { userTags } = storeToRefs(userTagsStore);
 const { warning } = useToast();
 
 onMounted(() => {
@@ -110,7 +108,7 @@ function onTagClicked(tag: string) {
             </div>
 
             <HeadlessMultiselect
-                :options="userTags"
+                :options="userTagsStore.userTags"
                 :selected="props.value"
                 :placeholder="props.placeholder"
                 :validator="isValid"

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

@@ -1,20 +1,22 @@
 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 { useUserStore } from "stores/userStore";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
+
+import { useServerMock } from "@/api/client/__mocks__";
 
 import ToolCard from "./ToolCard";
 
+const { server, http } = useServerMock();
+
 jest.mock("@/api/schema");
 
-jest.mock("@/composables/config", () => ({
-    useConfig: jest.fn(() => ({
-        config: { enable_tool_source_display: false },
-        isConfigLoaded: true,
-    })),
-}));
+const config = { enable_tool_source_display: false };
+setupMockConfig(config);
 
 const localVue = getLocalVue();
 
@@ -23,7 +25,15 @@ describe("ToolCard", () => {
     let axiosMock;
     let userStore;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+        // some child component must be bypassing useConfig - so we need to explicitly
+        // stup the API endpoint also. If you can drop this without request problems in log,
+        // this hack can be removed.
+        server.use(
+            http.get("/api/configuration", ({ response }) => {
+                return response(200).json(config);
+            })
+        );
         axiosMock = new MockAdapter(axios);
         axiosMock.onGet(`/api/webhooks`).reply(200, []);
 
@@ -38,9 +48,12 @@ describe("ToolCard", () => {
                 sustainVersion: false,
                 options: {
                     id: "options.id",
+                    name: "options.name",
+                    version: "options.version",
                     versions: [],
                     sharable_url: "options.sharable_url",
                     help: "options.help",
+                    help_format: "restructuredtext",
                     citations: false,
                 },
                 messageText: "messageText",
@@ -60,6 +73,7 @@ describe("ToolCard", () => {
             is_admin: true,
             preferences: {},
         };
+        await flushPromises();
     });
 
     it("shows props", async () => {
@@ -81,5 +95,6 @@ describe("ToolCard", () => {
         await wrapper.setProps({ disabled: true });
         const backdropActive = wrapper.findAll(".portlet-backdrop");
         expect(backdropActive.length).toBe(1);
+        await flushPromises();
     });
 });

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

@@ -1,8 +1,10 @@
+import "tests/jest/mockHelpPopovers";
+
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
+import { setupMockConfig } from "tests/jest/mockConfig";
 
-import { useServerMock } from "@/api/client/__mocks__";
 import { setupSelectableMock } from "@/components/ObjectStore/mockServices";
 import { ROOT_COMPONENT } from "@/utils/navigation";
 
@@ -12,15 +14,9 @@ setupSelectableMock();
 
 const localVue = getLocalVue(true);
 
-const { server, http } = useServerMock();
+setupMockConfig({});
 
 function mountComponent() {
-    server.use(
-        http.get("/api/configuration", ({ response }) => {
-            return response(200).json({});
-        })
-    );
-
     const wrapper = mount(ToolSelectPreferredObjectStore, {
         propsData: { toolPreferredObjectStoreId: null },
         localVue,

client/src/components/Toolshed/InstalledList/Details.vue

@@ -3,9 +3,9 @@
         <div v-if="error" class="alert alert-danger" show>{{ error }}</div>
         <div v-else>
             <span v-if="loading">
-                <b-card>
+                <BCard>
                     <LoadingSpan message="Loading installed repository details" />
-                </b-card>
+                </BCard>
             </span>
             <div v-else>
                 <RepositoryDetails :repo="toolshedRepository" :toolshed-url="repo.tool_shed_url" />
@@ -14,6 +14,7 @@
     </div>
 </template>
 <script>
+import { BCard } from "bootstrap-vue";
 import LoadingSpan from "components/LoadingSpan";
 import { getAppRoot } from "onload/loadConfig";
 
@@ -23,6 +24,7 @@ import RepositoryDetails from "../RepositoryDetails/Index.vue";
 
 export default {
     components: {
+        BCard,
         LoadingSpan,
         RepositoryDetails,
     },

client/src/components/Toolshed/RepositoryDetails/Index.test.ts

@@ -1,7 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
-import { getLocalVue } from "tests/jest/helpers";
+import { getLocalVue, suppressDebugConsole } from "tests/jest/helpers";
 
 import { HttpResponse, useServerMock } from "@/api/client/__mocks__";
 
@@ -10,6 +10,8 @@ import Index from "./Index.vue";
 const { server, http } = useServerMock();
 
 describe("RepositoryDetails", () => {
+    suppressDebugConsole(); // we issue a debug warning when a repo has no revisions
+
     it("test repository details index", async () => {
         server.use(
             http.get("/api/configuration", ({ response }) => {