Add test for mirroring between the root and elements

hirasso · Dec 26, 2023 · fce5d28 · fce5d28
1 parent d652313
commit fce5d28
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/docs/src/pages/root.astro b/docs/src/pages/root.astro
@@ -9,9 +9,9 @@ import Tiles from "../components/examples/Tiles.astro";
     elements on your page
   </p>
   <section>
-    <Tiles amount={150} direction="vertical" uniqueid="first-vertical" />
-    <aside class="scroller scrollbars:hide" data-testid="sidebar">
-      <Tiles amount={70} direction="vertical" uniqueid="sidebar" />
+    <Tiles amount={150} direction="vertical" uniqueid="root" />
+    <aside class="scroller scrollbars:hide" data-testid="scroller">
+      <Tiles amount={70} direction="vertical" uniqueid="scroller" />
     </aside>
   </section>
 </Layout>

diff --git a/tests/e2e/tests/features.spec.ts b/tests/e2e/tests/features.spec.ts
@@ -6,23 +6,25 @@ test.describe("Features", () => {
     await page.goto("/");
   });
 
-  test("should mirror vertical scroll positions", async ({ page }) => {
+  test("mirrors vertical scroll positions", async ({ page }) => {
     page.setViewportSize({ width: 1000, height: 1000 });
     await page.getByTestId("first-vertical").scrollIntoViewIfNeeded();
     await scrollToEnd(page, "first-vertical");
     await sleep(1000);
     expect(page.getByTestId("third-vertical_tile--last")).toBeInViewport();
   });
 
-  test("should mirror horizontal scroll positions", async ({ page }) => {
+  test("mirrors horizontal scroll positions", async ({ page }) => {
     page.setViewportSize({ width: 1000, height: 1000 });
     await page.getByTestId("third-horizontal").scrollIntoViewIfNeeded();
     await scrollToEnd(page, "first-horizontal");
     await sleep(1000);
-    await expect(page.getByTestId("third-horizontal_tile--last")).toBeInViewport();
+    await expect(
+      page.getByTestId("third-horizontal_tile--last")
+    ).toBeInViewport();
   });
 
-  test("should mirror positions in both directions", async ({
+  test("mirrors positions in both directions", async ({
     page,
     browserName,
   }) => {
@@ -33,17 +35,18 @@ test.describe("Features", () => {
     await expect(page.getByTestId("third-both_tile--last")).toBeInViewport();
   });
 
-  // test("should mirror scroll positions between the window and elements", async ({
-  //   page,
-  // }) => {
-  //   // window > element
-  //   page.setViewportSize({ width: 1400, height: 1000 });
-  //   await scrollToEnd(page);
-  //   await sleep(1000);
-  //   await expect(page.getByTestId("scroller-fixed-end")).toBeInViewport();
-  //   // element > window
-  //   await scrollTo(page, { y: 0 }, "scroller-fixed");
-  //   await sleep(1000);
-  //   await expectScrollPosition(page, { x: 0, y: 0 });
-  // });
+  test("mirrors scroll positions between the root and elements", async ({
+    page,
+  }) => {
+    await page.goto("/root");
+    // root > element
+    page.setViewportSize({ width: 1400, height: 1000 });
+    await scrollToEnd(page);
+    await sleep(1000);
+    await expect(page.getByTestId("scroller_tile--last")).toBeInViewport();
+    // element > root
+    await scrollTo(page, { y: 0 }, "scroller");
+    await sleep(1000);
+    await expectScrollPosition(page, { x: 0, y: 0 });
+  });
 });