Scroll search results into view

RISDEV-6211
digitalservicebund · Jan 16, 2025 · 682e034 · 682e034
1 parent 67d3acc
commit 682e034
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 41 deletions.
diff --git a/frontend/src/components/SearchResultList.vue b/frontend/src/components/SearchResultList.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import { watch } from "vue"
 import DecisionSummary from "@/components/DecisionSummary.vue"
 import { DisplayMode } from "@/components/enumDisplayMode"
 import FlexContainer from "@/components/FlexContainer.vue"
 import IconBadge from "@/components/IconBadge.vue"
 import TextButton from "@/components/input/TextButton.vue"
 import LoadingSpinner from "@/components/LoadingSpinner.vue"
+import values from "@/data/values.json"
 import RelatedDocumentation from "@/domain/relatedDocumentation"
 import errorMessages from "@/i18n/errors.json"
 import IconAdd from "~icons/ic/baseline-add"
 
-const { allowMultipleLinks = false } = defineProps<{
+const props = defineProps<{
   searchResults?: SearchResults<RelatedDocumentation>
   isLoading: boolean
   allowMultipleLinks?: boolean
@@ -18,6 +20,28 @@ const { allowMultipleLinks = false } = defineProps<{
 
 const emits =
   defineEmits<(event: "linkDecision", decision: RelatedDocumentation) => void>()
+
+watch(
+  () => props.searchResults,
+  async () => {
+    if (props.searchResults) {
+      setTimeout(() => {
+        const element = document.getElementById("searchResults")
+        if (element) {
+          const headerOffset = values.headerOffset
+          const elementPosition = element?.getBoundingClientRect().top
+          const offsetPosition = elementPosition + window.scrollY - headerOffset
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          })
+        }
+      })
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <script lang="ts">
@@ -28,7 +52,7 @@ export type SearchResults<Type extends RelatedDocumentation> = {
 </script>
 
 <template>
-  <div>
+  <div id="searchResults">
     <FlexContainer
       v-if="isLoading"
       class="m-24"

diff --git a/frontend/test/components/searchResultList.spec.ts b/frontend/test/components/searchResultList.spec.ts
@@ -66,6 +66,12 @@ function renderSearchResults(
 }
 
 describe("Search result list", () => {
+  beforeEach(() => {
+    vi.spyOn(window, "scrollTo").mockImplementation(() => vi.fn())
+  })
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
   it("renders correctly", async () => {
     renderSearchResults()
 

diff --git a/frontend/test/e2e/caselaw/periodical-evaluation/editing-evaluation-references.spec.ts b/frontend/test/e2e/caselaw/periodical-evaluation/editing-evaluation-references.spec.ts
@@ -647,47 +647,45 @@ test.describe(
       },
     )
 
-    test("Click on 'Weitere Angabe' on top of references list, scrolls to the bottom and adds new entry", async ({
-      page,
-      editionWithManyReferences,
-    }) => {
-      await test.step("Click on 'Weitere Angabe' on top of references list", async () => {
-        await navigateToPeriodicalReferences(
-          page,
-          editionWithManyReferences.id || "",
-        )
-        await expect(page.getByLabel("Listen Eintrag")).toHaveCount(5)
-        await page.getByLabel("Weitere Angabe Top").click()
-      })
-
-      await test.step("adds new entry, scrolls to new entry", async () => {
-        await expect(page.getByLabel("Listen Eintrag")).toHaveCount(6)
-        await expect(
-          page.getByRole("heading", { name: "Fundstelle hinzufügen" }),
-        ).toBeInViewport()
-      })
-    })
+    test(
+      "Scrolling behaviour in long lists",
+      { tag: "@RISDEV-6030" },
+      async ({ page, editionWithManyReferences }) => {
+        await test.step("Click on 'Weitere Angabe' on top of references list, scrolls new entry at the bottom into viewport", async () => {
+          await navigateToPeriodicalReferences(
+            page,
+            editionWithManyReferences.id || "",
+          )
+          await expect(page.getByLabel("Listen Eintrag")).toHaveCount(5)
+          await page.getByLabel("Weitere Angabe Top").click()
+          await expect(page.getByLabel("Listen Eintrag")).toHaveCount(6)
+          await expect(
+            page.getByRole("heading", { name: "Fundstelle hinzufügen" }),
+          ).toBeInViewport()
+        })
 
-    test("New list entry is scrolled into viewport, when list is long", async ({
-      page,
-      editionWithManyReferences,
-    }) => {
-      await test.step("Click on 'Weitere Angabe' on top of references list", async () => {
-        await navigateToPeriodicalReferences(
-          page,
-          editionWithManyReferences.id || "",
-        )
-        await expect(page.getByLabel("Listen Eintrag")).toHaveCount(5)
-        await page.getByLabel("Weitere Angabe", { exact: true }).click()
-      })
+        await test.step("Click on 'Weitere Angabe' at the bottom also scrolls new entry into viewport", async () => {
+          await page.reload()
+          await navigateToPeriodicalReferences(
+            page,
+            editionWithManyReferences.id || "",
+          )
+          await expect(page.getByLabel("Listen Eintrag")).toHaveCount(5)
+          await page.getByLabel("Weitere Angabe", { exact: true }).click()
+          await expect(page.getByLabel("Listen Eintrag")).toHaveCount(6)
+          await expect(
+            page.getByLabel("Nach Entscheidung suchen"),
+          ).toBeInViewport()
+        })
 
-      await test.step("adds new entry, scrolls to new entry", async () => {
-        await expect(page.getByLabel("Listen Eintrag")).toHaveCount(6)
-        await expect(
-          page.getByLabel("Nach Entscheidung suchen"),
-        ).toBeInViewport()
-      })
-    })
+        await test.step("Click on 'Suche' scrolls search results into viewport", async () => {
+          await page.getByLabel("Nach Entscheidung suchen").click()
+          await expect(
+            page.getByText("Passende Suchergebnisse:"),
+          ).toBeInViewport()
+        })
+      },
+    )
 
     async function openDocumentationUnitEditModeTabThroughSidePanel(
       page: Page,