From 15d7da0f7f296b15b7ad2487fa511bf832f4b6b7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 7 Nov 2023 16:06:46 -0600
Subject: [PATCH] fix jest fails caused by `DatasetDetails` id is `undefined`

---
 .../components/History/Content/ContentItem.test.js |  4 ++++
 .../src/components/History/Content/ContentItem.vue |  2 +-
 .../History/Content/GenericElement.test.js         |  6 ++++++
 client/src/components/History/HistoryView.test.js  | 10 +++++-----
 .../components/JobParameters/JobParameters.test.ts | 14 +++++++++++---
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/client/src/components/History/Content/ContentItem.test.js b/client/src/components/History/Content/ContentItem.test.js
index e7c0748fcb48..fba74e873824 100644
--- a/client/src/components/History/Content/ContentItem.test.js
+++ b/client/src/components/History/Content/ContentItem.test.js
@@ -3,13 +3,16 @@ import { mount } from "@vue/test-utils";
 import { updateContentFields } from "components/History/model/queries";
 import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import VueRouter from "vue-router";
 
 import ContentItem from "./ContentItem";
 
 jest.mock("components/History/model/queries");
 
 const localVue = getLocalVue();
+localVue.use(VueRouter);
 localVue.use(PiniaVuePlugin);
+const router = new VueRouter();
 
 // mock queries
 updateContentFields.mockImplementation(async () => {});
@@ -48,6 +51,7 @@ describe("ContentItem", () => {
                 },
             },
             pinia: createTestingPinia(),
+            router,
         });
     });
 
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index b8022e68da8d..2fb25d0abd72 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -89,7 +89,7 @@
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
         <b-collapse :visible="expandDataset">
             <DatasetDetails
-                v-if="expandDataset"
+                v-if="expandDataset && item.id"
                 :id="item.id"
                 :writable="writable"
                 :show-highlight="(isHistoryItem && filterable) || addHighlightBtn"
diff --git a/client/src/components/History/Content/GenericElement.test.js b/client/src/components/History/Content/GenericElement.test.js
index 5fde0bf35b62..ba298ee4e3b0 100644
--- a/client/src/components/History/Content/GenericElement.test.js
+++ b/client/src/components/History/Content/GenericElement.test.js
@@ -1,9 +1,14 @@
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
+import VueRouter from "vue-router";
 
 import GenericElement from "./GenericElement";
 
+jest.mock("components/History/model/queries");
+
 const localVue = getLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 describe("GenericElement", () => {
     let wrapper;
@@ -54,6 +59,7 @@ describe("GenericElement", () => {
                 },
             },
             localVue,
+            router,
         });
     });
 
diff --git a/client/src/components/History/HistoryView.test.js b/client/src/components/History/HistoryView.test.js
index ad880b5792ca..7a0ef49a8fe5 100644
--- a/client/src/components/History/HistoryView.test.js
+++ b/client/src/components/History/HistoryView.test.js
@@ -67,6 +67,7 @@ async function createWrapper(localVue, currentUserId, history) {
         localVue,
         stubs: {
             icon: { template: "<div></div>" },
+            ContentItem: true,
         },
         provide: {
             store: {
@@ -119,14 +120,13 @@ describe("History center panel View", () => {
         // parts of the layout that should be similar for all cases
         expectCorrectLayout(wrapper);
 
-        // all history items, make sure all show up with hids and names
-        const historyItems = wrapper.findAll(".content-item");
+        // make sure all history items show up
+        const historyItems = wrapper.findAll("contentitem-stub");
         expect(historyItems.length).toBe(10);
         for (let i = 0; i < historyItems.length; i++) {
             const hid = historyItems.length - i;
-            const itemHeader = historyItems.at(i).find("[data-description='content item header info']");
-            const headerText = `${hid}: Dataset ${hid}`;
-            expect(itemHeader.text()).toBe(headerText);
+            expect(historyItems.at(i).attributes("id")).toBe(`${hid}`);
+            expect(historyItems.at(i).attributes("name")).toBe(`Dataset ${hid}`);
         }
     });
 
diff --git a/client/src/components/JobParameters/JobParameters.test.ts b/client/src/components/JobParameters/JobParameters.test.ts
index e0f6c04e669b..5a1887356e1a 100644
--- a/client/src/components/JobParameters/JobParameters.test.ts
+++ b/client/src/components/JobParameters/JobParameters.test.ts
@@ -46,6 +46,7 @@ describe("JobParameters/JobParameters.vue", () => {
             propsData,
             stubs: {
                 DatasetProvider: DatasetProvider,
+                ContentItem: true,
             },
             pinia,
         });
@@ -54,12 +55,18 @@ describe("JobParameters/JobParameters.vue", () => {
         const checkTableParameter = (
             element: Wrapper<any>,
             expectedTitle: string,
-            expectedValue: string,
+            expectedValue: string | { hid: number; name: string },
             link?: string
         ) => {
             const tds = element.findAll("td");
             expect(tds.at(0).text()).toBe(expectedTitle);
-            expect(tds.at(1).text()).toContain(expectedValue);
+            if (typeof expectedValue === "string") {
+                expect(tds.at(1).text()).toContain(expectedValue);
+            } else {
+                const contentItem = tds.at(1).find("contentitem-stub");
+                expect(contentItem.attributes("id")).toBe(`${expectedValue.hid}`);
+                expect(contentItem.attributes("name")).toBe(expectedValue.name);
+            }
             if (link) {
                 const a_element = tds.at(1).find("a");
                 expect(a_element.attributes("href")).toBe(link);
@@ -74,7 +81,7 @@ describe("JobParameters/JobParameters.vue", () => {
         expect(elements.length).toBe(3);
 
         checkTableParameter(elements.at(0), "Add this value", "22", undefined);
-        checkTableParameter(elements.at(1), linkParam.text, `${raw.hid}: ${raw.name}`, undefined);
+        checkTableParameter(elements.at(1), linkParam.text, { hid: raw.hid, name: raw.name }, undefined);
         checkTableParameter(elements.at(2), "Iterate?", "NO", undefined);
     });
 
@@ -89,6 +96,7 @@ describe("JobParameters/JobParameters.vue", () => {
                 propsData,
                 stubs: {
                     DatasetProvider: DatasetProvider,
+                    ContentItem: true,
                 },
                 pinia,
             });