Merge pull request #686 from digitalservicebund/router-init-refactor

Refactor router initialization

.talismanrc

@@ -20,7 +20,7 @@ fileignoreconfig:
   - filename: doc/adr/0009-renovate.md
     checksum: 172f8d22a6c8114b91ba4e430349c40599d1afa59fb96f49a651c1eac1e551dc
   - filename: frontend/src/main.ts
-    checksum: 837828b28bdbd4b3ab2dd446da9e11dc472aef7f29474a6d686fcdee9404fd6e
+    checksum: c7bf1cf4779f88563975f13217a367a4be2100cb52709f38ddb4c6f1c6e3a857
   - filename: LegalDocML.de/1.6/README.md
     checksum: 31ca5ac82d9becf89c8045fc58983b026719a20ab521e76b7ecc69ad49c0188a
   - filename: LegalDocML.de/*/fixtures/*.xml

frontend/src/components/controls/RisInfoModal.spec.ts

@@ -9,6 +9,7 @@ describe("RisInfoModal", () => {
 
     render(RisInfoModal, {
       props: { title, description },
+      global: { stubs: { RouterLink: true }, renderStubDefaultSlot: true },
     })
 
     expect(screen.getByText(title)).toBeInTheDocument()
@@ -21,6 +22,7 @@ describe("RisInfoModal", () => {
 
     render(RisInfoModal, {
       props: { iconText, title },
+      global: { stubs: { RouterLink: true }, renderStubDefaultSlot: true },
     })
 
     const button = screen.getByText(iconText)

frontend/src/components/references/RisModRefsEditor.spec.ts

@@ -36,6 +36,15 @@ describe("RisModRefsEditor", () => {
   })
 
   it("Should not render component if no mod was selected", async () => {
+    vi.doMock("vue-router", () => ({
+      useRoute: vi.fn().mockReturnValue({
+        params: {
+          refEid: undefined,
+        },
+      }),
+      useRouter: vi.fn(),
+    }))
+
     const { default: RisModRefsEditor } = await import(
       "@/components/references/RisModRefsEditor.vue"
     )

frontend/src/main.ts

@@ -3,16 +3,13 @@ import { RisUiLocale, RisUiTheme } from "@digitalservicebund/ris-ui/primevue"
 import "@digitalservicebund/ris-ui/primevue/style.css"
 import * as Sentry from "@sentry/vue"
 import PrimeVue from "primevue/config"
-import ToastService from "primevue/toastservice"
 import ConfirmationService from "primevue/confirmationservice"
+import ToastService from "primevue/toastservice"
 import { createApp } from "vue"
 import App from "./App.vue"
 import router from "./router"
-import { initializeApiService } from "./services/apiService"
 import "./style.css"
 
-initializeApiService(router)
-
 const app = createApp(App)
 
 app.use(PrimeVue, {

frontend/src/services/apiService.spec.ts

@@ -1,7 +1,6 @@
 import { INVALID_URL } from "@/services/apiService"
 import { flushPromises } from "@vue/test-utils"
 import { beforeEach, describe, expect, test, vi } from "vitest"
-import { Router } from "vue-router"
 
 describe("useApiFetch", () => {
   beforeEach(() => {
@@ -66,20 +65,18 @@ describe("useApiFetch", () => {
       new Response("{}", { status: 404 }),
     )
 
-    const { useApiFetch, initializeApiService } = await import(
-      "@/services/apiService"
-    )
+    const mockPush = vi.fn().mockResolvedValue({})
+    vi.doMock("@/router", () => ({ default: { push: mockPush } }))
 
-    const mockRouter: Partial<Router> = {
-      push: vi.fn().mockResolvedValue(new Promise(() => {})),
-    }
-    initializeApiService(mockRouter as Router)
+    const { useApiFetch } = await import("@/services/apiService")
 
     useApiFetch("foo/bar")
 
     await vi.waitFor(() =>
-      expect(mockRouter.push).toHaveBeenCalledWith({ name: "NotFound" }),
+      expect(mockPush).toHaveBeenCalledWith({ name: "NotFound" }),
     )
+
+    vi.doUnmock("@/router")
   })
 
   test("aborts the request if the URL is marked as invalid", async () => {

frontend/src/services/apiService.ts

@@ -1,6 +1,6 @@
 import { getFallbackError } from "@/lib/errorResponseMapper"
+import routerInstance from "@/router"
 import { createFetch, UseFetchReturn } from "@vueuse/core"
-import type { Router } from "vue-router"
 
 /**
  * The same as UseFetchReturn, but without the methods to get more specific useFetch instances.
@@ -21,12 +21,6 @@ export type SimpleUseFetchReturn<T> = Omit<
   | "formData"
 >
 
-let routerInstance: Router | null = null
-
-export const initializeApiService = (router: Router) => {
-  routerInstance = router
-}
-
 /* -------------------------------------------------- *
  * Reactive API fetch                                 *
  * -------------------------------------------------- */