Test query composable

Addresses RISDEV-2310

frontend/src/components/DocumentUnitSearchEntryForm.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Ref, computed, onMounted, ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import useQuery, { Query } from "@/composables/useQueryFromRoute"
 import { useValidationStore } from "@/composables/useValidationStore"
 import { PublicationState } from "@/domain/documentUnit"
@@ -23,11 +23,10 @@ const emit = defineEmits<{
 }>()
 
 const validationStore = useValidationStore<DocumentUnitSearchParameter>()
-const { route, getQueriesFromRoute, pushQueriesToRoute } =
+const { route, getQueryFromRoute, pushQueryToRoute } =
   useQuery<DocumentUnitSearchParameter>()
-const query = ref(getQueriesFromRoute()) as Ref<
-  Query<DocumentUnitSearchParameter>
->
+const query = ref(getQueryFromRoute())
+
 const searchEntryEmpty = computed(() => {
   return Object.keys(query.value).length === 0
 })
@@ -71,7 +70,7 @@ function resetSearch() {
   validationStore.reset()
   submitButtonError.value = undefined
   query.value = {}
-  pushQueriesToRoute(query.value)
+  pushQueryToRoute(query.value)
   emit("resetSearchResults")
 }
 
@@ -131,15 +130,15 @@ function handleSearchButtonClicked() {
   } else if (validationStore.getAll().length > 0) {
     submitButtonError.value = "Fehler in Suchkriterien"
   } else {
-    pushQueriesToRoute(query.value)
+    pushQueryToRoute(query.value)
   }
 }
 
 watch(
   route,
   () => {
-    query.value = getQueriesFromRoute()
-    if (!searchEntryEmpty.value) emit("search", getQueriesFromRoute())
+    query.value = getQueryFromRoute()
+    if (!searchEntryEmpty.value) emit("search", getQueryFromRoute())
     else resetSearch()
   },
   { deep: true },
@@ -154,7 +153,7 @@ watch(
 )
 
 onMounted(async () => {
-  if (!searchEntryEmpty.value) emit("search", getQueriesFromRoute())
+  if (!searchEntryEmpty.value) emit("search", getQueryFromRoute())
 })
 </script>
 

frontend/src/components/procedures/ProcedureList.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Ref, ref, onMounted, watch } from "vue"
+import { ref, onMounted, watch } from "vue"
 import ProcedureDetail from "./ProcedureDetail.vue"
 import ExpandableContent from "@/components/ExpandableContent.vue"
 import useQuery, { Query } from "@/composables/useQueryFromRoute"
@@ -27,20 +27,8 @@ async function updateProcedures(page: number, queries?: Query<string>) {
   }
 }
 
-const { getQueriesFromRoute, pushQueriesToRoute, route } = useQuery<"q">()
-
-const query = ref(getQueriesFromRoute()) as Ref<Query<"q">>
-
-watch(route, () => (query.value = getQueriesFromRoute()))
-
-watch(
-  query,
-  async () => {
-    await updateProcedures(0, query.value)
-    pushQueriesToRoute(query.value)
-  },
-  { deep: true },
-)
+const { getQueryFromRoute, pushQueryToRoute, route } = useQuery<"q">()
+const query = ref(getQueryFromRoute())
 
 async function loadDocumentUnits(loadingProcedure: Procedure) {
   if (!procedures.value) return
@@ -71,6 +59,17 @@ function copyDocumentUnits(
 onMounted(() => {
   updateProcedures(0, query.value)
 })
+
+watch(route, () => (query.value = getQueryFromRoute()))
+
+watch(
+  query,
+  async () => {
+    await updateProcedures(0, query.value)
+    pushQueryToRoute(query.value)
+  },
+  { deep: true },
+)
 </script>
 
 <template>

frontend/src/composables/useQueryFromRoute.ts

@@ -15,7 +15,7 @@ export default function useQuery<T extends string>() {
   const route = useRoute()
   const router = useRouter()
 
-  function getQueriesFromRoute(): Query<T> {
+  function getQueryFromRoute(): Query<T> {
     const query: Query<T> = {}
 
     for (const parameter in route.query) {
@@ -25,8 +25,9 @@ export default function useQuery<T extends string>() {
     return query
   }
 
-  const pushQueriesToRoute = (currentQuerry: Query<T>) =>
+  function pushQueryToRoute(currentQuerry: Query<T>) {
     void router.push({ query: truncateQuery(currentQuerry) })
+  }
 
-  return { getQueriesFromRoute, pushQueriesToRoute, route }
+  return { getQueryFromRoute, pushQueryToRoute, route }
 }

frontend/test/composables/useQueryFromRoute.spec.ts

@@ -0,0 +1,56 @@
+import { ref } from "vue"
+import { Router } from "vue-router"
+import useQuery from "@/composables/useQueryFromRoute"
+
+describe("useQuery composable", () => {
+  const mocks = vi.hoisted(() => ({
+    mockedPush: vi.fn(),
+  }))
+
+  vi.mock("vue-router", async () => {
+    const actual = await vi.importActual<Router>("vue-router")
+    return {
+      ...actual,
+      useRouter: vi.fn().mockReturnValue({ push: mocks.mockedPush }),
+      useRoute: vi.fn().mockReturnValue({ query: { foo: "initialFoo" } }),
+    }
+  })
+
+  afterEach(() => {
+    mocks.mockedPush.mockClear()
+  })
+
+  it("instantiates with correct keys", async () => {
+    const { getQueryFromRoute } = useQuery<"foo" | "bar" | "baz">()
+    const query = ref(getQueryFromRoute())
+
+    expect(query.value).toEqual({ foo: "initialFoo" })
+  })
+
+  it("adds new query to route", async () => {
+    const { pushQueryToRoute } = useQuery<"foo" | "bar" | "baz">()
+    pushQueryToRoute({ bar: "barValue", baz: "bazValue" })
+
+    expect(mocks.mockedPush).toHaveBeenCalledWith({
+      query: { bar: "barValue", baz: "bazValue" },
+    })
+  })
+
+  it("does not add empty query parameters", async () => {
+    const { pushQueryToRoute } = useQuery<"foo" | "bar" | "baz">()
+    pushQueryToRoute({ bar: "barValue", baz: "" })
+
+    expect(mocks.mockedPush).toHaveBeenCalledWith({
+      query: { bar: "barValue" },
+    })
+  })
+
+  it("does not any query if empty", async () => {
+    const { pushQueryToRoute } = useQuery<"foo" | "bar" | "baz">()
+    pushQueryToRoute({ bar: "", baz: "" })
+
+    expect(mocks.mockedPush).toHaveBeenCalledWith({
+      query: {},
+    })
+  })
+})