test: e2e infinite scroll (#562)

# Motivation

Given that the `InfiniteScroll` component will need some adjustments for
compatibility with Svelte v5, I thought it would be a good idea to first
add an end-to-end test to verify that the scroll works as expected.

# Notes

Requires #563 configuration to build the showcase app.

# Changes

- Add a `testId` to the component
- Provide some demo and test data within the infinite scroll component
page
- Write e2e tests that assert that data are loaded on scroll

Author: peterpeterparker

e2e/infinite-scroll.e2e.ts

@@ -0,0 +1,59 @@
+import { expect, test } from "@playwright/test";
+
+const testUrl = "/components/infinite-scroll";
+
+test("should render 100 elements by default", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const ul = page.getByTestId("showcase-infinite-scroll");
+
+  const firstLi = ul.locator("li:nth-of-type(1)");
+  await expect(firstLi).toBeVisible();
+
+  const liList = ul.locator("li");
+  expect(await liList.count()).toBe(100);
+});
+
+test("should render 200 elements on scroll", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const ul = page.getByTestId("showcase-infinite-scroll");
+
+  const lastLi = ul.locator("li:nth-of-type(100)");
+  await expect(lastLi).toBeVisible();
+
+  await lastLi.scrollIntoViewIfNeeded();
+
+  const lastLiAfterIntersect = ul.locator("li:nth-of-type(200)");
+  await expect(lastLiAfterIntersect).toBeVisible();
+
+  const liList = ul.locator("li");
+  expect(await liList.count()).toBe(200);
+});
+
+test("should reach end of scroll", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const ul = page.getByTestId("showcase-infinite-scroll");
+
+  const lastLi = ul.locator("li:nth-of-type(100)");
+  await expect(lastLi).toBeVisible();
+
+  await lastLi.scrollIntoViewIfNeeded();
+
+  const lastLiAfterIntersect = ul.locator("li:nth-of-type(200)");
+  await expect(lastLiAfterIntersect).toBeVisible();
+
+  await lastLiAfterIntersect.scrollIntoViewIfNeeded();
+
+  const veryLastLiAfterIntersect = ul.locator("li:nth-of-type(300)");
+  await expect(veryLastLiAfterIntersect).toBeVisible();
+
+  const liList = ul.locator("li");
+  expect(await liList.count()).toBe(300);
+
+  await veryLastLiAfterIntersect.scrollIntoViewIfNeeded();
+
+  const endMessage = ul.getByTestId("infinite-scroll-end");
+  await expect(endMessage).toBeVisible();
+});

src/lib/components/InfiniteScroll.svelte

@@ -9,6 +9,7 @@
 
   export let layout: "list" | "grid" = "list";
   export let disabled = false;
+  export let testId: string | undefined = undefined;
 
   // IntersectionObserverInit is not recognized by the linter
   // eslint-disable-next-line no-undef
@@ -75,7 +76,7 @@
   onDestroy(() => observer.disconnect());
 </script>
 
-<ul bind:this={container} class:card-grid={layout === "grid"}>
+<ul bind:this={container} class:card-grid={layout === "grid"} data-tid={testId}>
   <slot />
 </ul>
 

src/routes/(split)/components/infinite-scroll/+page.md

@@ -1,3 +1,22 @@
+<script lang="ts">
+    import InfiniteScroll from "$lib/components/InfiniteScroll.svelte";
+    import Tag from "$lib/components/Tag.svelte";
+
+    const generate = (index: number): number[] =>  [ ...Array(100).keys().map(i => i + index) ];
+    
+    let scrollDisabled = false;
+    let elements = generate(0);
+
+    const onIntersect = () => {
+        if (elements.length >= 300) {
+            scrollDisabled = true;
+            return;
+        }
+
+        setTimeout(() => elements = [...elements, ...generate(elements.length)], 500);
+    }
+</script>
+
 # Infinite Scroll
 
 The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance of the list presented in the page.
@@ -33,3 +52,22 @@ It sets the reference to the last element of the list after each re-render. **Pa
 | Event          | Description                                                                                                | Detail    |
 | -------------- | ---------------------------------------------------------------------------------------------------------- | --------- |
 | `nnsIntersect` | Triggered each time the next observed item is intersecting. The event that can be use to call your action. | No detail |
+
+## Showcase
+
+<InfiniteScroll on:nnsIntersect={onIntersect} disabled={scrollDisabled} testId="showcase-infinite-scroll">
+    {#each elements as _element, i}
+        <li><Tag>Element {i}</Tag></li>
+    {/each}
+
+    {#if scrollDisabled}
+        <li data-tid="infinite-scroll-end"><Tag intent="success">Maximum pagination reached</Tag></li>
+    {/if}
+
+</InfiniteScroll>
+
+<style lang="scss">
+    li {
+        margin: 0 0 var(--padding);
+    }
+</style>