From b348ca78cc9f0c1afa4393fd5520d8a3db3680bd Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 28 Jul 2025 19:07:38 +0200
Subject: [PATCH] Refactors HistoryView component imports and updates test
 setup for VueRouter

---
 .../components/History/HistoryView.test.js    | 24 ++++++++++---------
 client/src/components/History/HistoryView.vue |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/client/src/components/History/HistoryView.test.js b/client/src/components/History/HistoryView.test.js
index 48a4a06f1c5..def516c0a9a 100644
--- a/client/src/components/History/HistoryView.test.js
+++ b/client/src/components/History/HistoryView.test.js
@@ -4,6 +4,7 @@ import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 import { setupMockConfig } from "tests/jest/mockConfig";
+import VueRouter from "vue-router";
 
 import { useServerMock } from "@/api/client/__mocks__";
 import { useHistoryStore } from "@/stores/historyStore";
@@ -14,15 +15,12 @@ import ContentItem from "./Content/ContentItem.vue";
 import HistoryView from "./HistoryView.vue";
 
 const localVue = getLocalVue();
+localVue.use(VueRouter);
+
 jest.mock("stores/services/history.services");
 
 const { server, http } = useServerMock();
 
-jest.mock("vue-router/composables", () => ({
-    useRoute: jest.fn(() => ({})),
-    useRouter: jest.fn(() => ({})),
-}));
-
 function create_history(historyId, userId, purged = false, archived = false) {
     const historyName = `${userId}'s History ${historyId}`;
     return {
@@ -78,6 +76,9 @@ async function createWrapper(localVue, currentUserId, history) {
         })
     );
 
+    const router = new VueRouter();
+    router.push(`/history/${history.id}`);
+
     const wrapper = mount(HistoryView, {
         propsData: { id: history.id },
         localVue,
@@ -88,6 +89,7 @@ async function createWrapper(localVue, currentUserId, history) {
             },
         },
         pinia,
+        router,
     });
     const userStore = useUserStore();
     userStore.currentUser = getFakeRegisteredUser({ id: currentUserId });
@@ -124,9 +126,9 @@ describe("History center panel View", () => {
         await historyStore.setCurrentHistory(history.id);
 
         // switch/import buttons: current history, should be a disabled switch
-        const switchButton = wrapper.find("[data-description='switch to history button']");
+        const switchButton = wrapper.find("[data-description='switch to history button']").classes();
         const importButton = wrapper.find("[data-description='import history button']");
-        expect(switchButton.attributes("disabled")).toBeTruthy();
+        expect(switchButton.includes("g-disabled")).toBeTruthy();
         expect(importButton.exists()).toBe(false);
 
         // parts of the layout that should be similar for all cases
@@ -169,9 +171,9 @@ describe("History center panel View", () => {
         expect(wrapper.vm.history).toEqual(history);
 
         // switch/import buttons: not current history, switchable
-        const switchButton = wrapper.find("[data-description='switch to history button']");
+        const switchButton = wrapper.find("[data-description='switch to history button']").classes();
         const importButton = wrapper.find("[data-description='import history button']");
-        expect(switchButton.attributes("disabled")).toBeFalsy();
+        expect(switchButton.includes("g-disabled")).toBeFalsy();
         expect(importButton.exists()).toBe(false);
 
         // storage dashboard button should be enabled
@@ -187,9 +189,9 @@ describe("History center panel View", () => {
         expect(wrapper.vm.history).toEqual(history);
 
         // history purged, is switchable but not importable
-        const switchButton = wrapper.find("[data-description='switch to history button']");
+        const switchButton = wrapper.find("[data-description='switch to history button']").classes();
         const importButton = wrapper.find("[data-description='import history button']");
-        expect(switchButton.attributes("disabled")).toBeFalsy();
+        expect(switchButton.includes("g-disabled")).toBeFalsy();
         expect(importButton.exists()).toBe(false);
 
         // storage dashboard button can be accessed
diff --git a/client/src/components/History/HistoryView.vue b/client/src/components/History/HistoryView.vue
index e7b05d2f538..dafa631c435 100644
--- a/client/src/components/History/HistoryView.vue
+++ b/client/src/components/History/HistoryView.vue
@@ -44,7 +44,7 @@
 
 <script>
 import { faFileImport } from "@fortawesome/free-solid-svg-icons";
-import FontAwesomeIcon from "@fortawesome/vue-fontawesome";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { mapActions, mapState } from "pinia";
 
 import { isAnonymousUser } from "@/api";