Refactor MultipleView.test.js to improve test setup

galaxyproject · Mar 25, 2024 · cd25d16 · cd25d16
1 parent ee5f8df
commit cd25d16
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/client/src/components/History/Multiple/MultipleView.test.js b/client/src/components/History/Multiple/MultipleView.test.js
@@ -1,7 +1,6 @@
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import MockUserHistories from "components/providers/MockUserHistories";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { useHistoryStore } from "stores/historyStore";
@@ -24,13 +23,24 @@ const getFakeHistorySummaries = (num, selectedIndex) => {
 const currentUser = { id: USER_ID };
 
 describe("MultipleView", () => {
-    async function setUpWrapper(UserHistoriesMock, count, currentHistoryId) {
-        const axiosMock = new MockAdapter(axios);
-        axiosMock.onGet(`api/histories/${FIRST_HISTORY_ID}`).reply(200, {});
+    let axiosMock;
+
+    beforeEach(() => {
+        axiosMock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+        axiosMock.reset();
+    });
+
+    async function setUpWrapper(count, currentHistoryId) {
+        const fakeSummaries = getFakeHistorySummaries(count, 0);
+        for (const summary of fakeSummaries) {
+            axiosMock.onGet(`api/histories/${summary.id}`).reply(200, summary);
+        }
         const wrapper = mount(MultipleView, {
             pinia: createPinia(),
             stubs: {
-                UserHistories: UserHistoriesMock,
                 HistoryPanel: true,
                 icon: { template: "<div></div>" },
             },
@@ -41,21 +51,22 @@ describe("MultipleView", () => {
         userStore.currentUser = currentUser;
 
         const historyStore = useHistoryStore();
-        historyStore.setHistories(getFakeHistorySummaries(count, 0));
+        historyStore.setHistories(fakeSummaries);
         historyStore.setCurrentHistoryId(currentHistoryId);
 
         await flushPromises();
 
-        return { wrapper, axiosMock };
+        return wrapper;
     }
 
     it("more than 4 histories should not show the current history", async () => {
         const count = 8;
         const currentHistoryId = FIRST_HISTORY_ID;
 
         // Set up UserHistories and wrapper
-        const UserHistoriesMock = MockUserHistories({ id: currentHistoryId }, getFakeHistorySummaries(count, 0), false);
-        const { wrapper, axiosMock } = await setUpWrapper(UserHistoriesMock, count, currentHistoryId);
+        const wrapper = await setUpWrapper(count, currentHistoryId);
+
+        console.log(wrapper.html());
 
         // Test: current (first) history should not be shown because only 4 latest are shown by default
         expect(wrapper.find("button[title='Current History']").exists()).toBeFalsy();
@@ -65,21 +76,16 @@ describe("MultipleView", () => {
         expect(wrapper.find("div[title='Currently showing 4 most recently updated histories']").exists()).toBeTruthy();
 
         expect(wrapper.find("[data-description='open select histories modal']").exists()).toBeTruthy();
-
-        axiosMock.reset();
     });
 
-    it("less than or equal to 4 histories should not show the current history", async () => {
+    it("less than 4 histories should show the current history", async () => {
         const count = 3;
         const currentHistoryId = FIRST_HISTORY_ID;
 
         // Set up UserHistories and wrapper
-        const UserHistoriesMock = MockUserHistories({ id: currentHistoryId }, getFakeHistorySummaries(count, 0), false);
-        const { wrapper, axiosMock } = await setUpWrapper(UserHistoriesMock, count, currentHistoryId);
+        const wrapper = await setUpWrapper(count, currentHistoryId);
 
         // Test: current (first) history should be shown because only 4 latest are shown by default, and count = 3
         expect(wrapper.find("button[title='Current History']").exists()).toBeTruthy();
-
-        axiosMock.reset();
     });
 });