Add tests

docs/src/pages/index.astro

@@ -3,7 +3,6 @@ import Layout from "../layouts/Layout.astro";
 import VerticalExample from "../components/examples/Vertical.astro";
 import HorizontalExample from "../components/examples/Horizontal.astro";
 import BothDirectionsExample from "../components/examples/BothDirections.astro";
-import WindowExample from "../components/examples/WindowExample.astro";
 import { ArrowRightIcon } from "astro-feather";
 ---
 
@@ -46,13 +45,25 @@ import { ArrowRightIcon } from "astro-feather";
 
 <script>
   import ScrollMirror from "../../../src/index.js";
+import Horizontal from "../components/examples/Horizontal.astro";
 
   import { $$ } from "../js/helpers";
-  /** Vertical mirroring */
-  new ScrollMirror($$(".scroller.--vertical"));
-  /** Horizontal mirroring */
-  new ScrollMirror($$(".scroller.--horizontal"));
-  /** Mirroring in both directions */
-  new ScrollMirror($$(".scroller.--both"));
+
+  declare global {
+    interface Window {
+      mirrors: {
+        vertical: ScrollMirror,
+        horizontal: ScrollMirror,
+        both: ScrollMirror
+      };
+    }
+  }
+
+  /** Setup mirrors */
+  window.mirrors = {
+    vertical: new ScrollMirror($$(".scroller.--vertical")),
+    horizontal: new ScrollMirror($$(".scroller.--horizontal")),
+    both: new ScrollMirror($$(".scroller.--both"))
+  }
 
 </script>

package.json

@@ -44,8 +44,8 @@
     "docs:build": "astro build --root docs",
     "docs:serve": "astro build --root docs && astro preview --root docs",
     "test": "pnpm run test:e2e",
-    "test:e2e": "pnpm playwright test --config ./tests/e2e/config.playwright.ts",
-    "test:e2e:dev": "PLAYWRIGHT_ENV=dev pnpm run test:e2e -- --ui",
+    "test:e2e": "pnpm exec playwright test --config ./tests/e2e/config.playwright.ts",
+    "test:e2e:dev": "PLAYWRIGHT_ENV=dev pnpm run test:e2e --ui",
     "test:e2e:install": "pnpm exec playwright install --with-deps"
   },
   "devDependencies": {

src/index.ts

@@ -7,7 +7,7 @@ export type Options = {
   horizontal: boolean;
 };
 
-type Progress = {
+export type Progress = {
   x: number;
   y: number;
 };

tests/e2e/tests/api.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from "@playwright/test";
+import {
+  scrollTo,
+  scrollToEnd,
+  expectScrollPosition,
+  sleep,
+  expectProgress,
+  setProgress,
+} from "./support";
+
+test.describe("API", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("gets the current progress after mirroring", async ({ page }) => {
+    await scrollToEnd(page, "first-vertical");
+    await sleep(1000);
+    await expectProgress(page, "vertical", { x: 0, y: 1 });
+  });
+
+  test("sets the progress vertically", async ({ page }) => {
+    await setProgress(page, "vertical", { y: 0.5 });
+    await expectProgress(page, "vertical", { x: 0, y: 0.5 });
+  });
+
+  test("sets the progress horizontally", async ({ page }) => {
+    await setProgress(page, "horizontal", { x: 0.5 });
+    await expectProgress(page, "horizontal", { x: 0.5, y: 0 });
+  });
+
+  test("sets the progress in both directions", async ({ page }) => {
+    // two values (x, y)
+    await setProgress(page, "both", { x: 0.25, y: 0.75 });
+    await expectProgress(page, "both", { x: 0.25, y: 0.75 });
+
+    // And one value for both directions
+    await setProgress(page, "both", 0.5);
+    await expectProgress(page, "both", { x: 0.5, y: 0.5 });
+  });
+});

tests/e2e/tests/features.spec.ts → tests/e2e/tests/mirroring.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 import { scrollTo, scrollToEnd, expectScrollPosition, sleep } from "./support";
 
-test.describe("Features", () => {
+test.describe("Mirroring", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
   });

tests/e2e/tests/support.ts

@@ -6,6 +6,19 @@ type ScrollPosition = {
   y: number;
 };
 
+import ScrollMirror from "../../../src/index.js";
+import type { Progress } from "../../../src/index.js";
+
+declare global {
+  interface Window {
+    mirrors: {
+      vertical: ScrollMirror,
+      horizontal: ScrollMirror,
+      both: ScrollMirror
+    };
+  }
+}
+
 export function scrollTo(
   page: Page,
   position: Partial<ScrollPosition>,
@@ -71,3 +84,33 @@ export async function expectScrollPosition(
   }, testId);
   expect(scrollY).toEqual(expected);
 }
+
+export async function setProgress(
+  page: Page,
+  instance: string,
+  progress: Partial<Progress> | number
+) {
+  await page.evaluate(
+    ({ instance, progress }): Progress => {
+      return (window.mirrors[instance].progress = progress);
+    },
+    { instance, progress }
+  );
+}
+
+function roundTwoDecimals(value: number) {
+  return Math.round(value * 100) / 100;
+}
+
+export async function expectProgress(
+  page: Page,
+  instance: string,
+  expected: Progress
+) {
+  const progress = await page.evaluate((instance): Progress => {
+    return window.mirrors[instance].progress;
+  }, instance);
+
+  expect(roundTwoDecimals(progress.x)).toEqual(expected.x);
+  expect(roundTwoDecimals(progress.y)).toEqual(expected.y);
+}