feat: added tests for RTL navigation

mbret · mbret · commit 0ab13931aa76 · 2025-03-08T20:58:28.000+01:00
diff --git a/packages/tests/tests/navigation/manual/rtl-haruko/index.html b/packages/tests/tests/navigation/manual/rtl-haruko/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>foo</title>
+
+    <style>
+      body,
+      html,
+      #app {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="bookmarks"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/tests/tests/navigation/manual/rtl-haruko/index.tsx b/packages/tests/tests/navigation/manual/rtl-haruko/index.tsx
@@ -0,0 +1,52 @@
+import { createReader } from "@prose-reader/core"
+import { Streamer, createArchiveFromJszip } from "@prose-reader/streamer"
+import { loadAsync } from "jszip"
+import { from } from "rxjs"
+
+async function createStreamer() {
+  const streamer = new Streamer({
+    getArchive: async () => {
+      const epubResponse = await fetch(
+        "http://localhost:3333/epubs/haruko-html-jpeg.epub",
+      )
+      const epubBlob = await epubResponse.blob()
+      const epubJszip = await loadAsync(epubBlob)
+      const archive = await createArchiveFromJszip(epubJszip)
+
+      return archive
+    },
+  })
+
+  return streamer
+}
+
+async function run() {
+  const streamer = await createStreamer()
+  const manifestResponse = await streamer.fetchManifest({
+    key: `_`,
+  })
+  const manifest = await manifestResponse.json()
+
+  const reader = createReader({
+    pageTurnAnimation: "none",
+    layoutLayerTransition: false,
+    getResource: (item) => {
+      return from(streamer.fetchResource({ key: `_`, resourcePath: item.href }))
+    },
+  })
+
+  const query = new URLSearchParams(window.location.search)
+  const cfi = query.get("cfi") || undefined
+
+  reader.load({
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
+    containerElement: document.getElementById(`app`)!,
+    manifest,
+    cfi,
+  })
+
+  // @ts-expect-error export for debug
+  window.reader = reader
+}
+
+run()
diff --git a/packages/tests/tests/navigation/manual/rtl-haruko/turn.spec.ts b/packages/tests/tests/navigation/manual/rtl-haruko/turn.spec.ts
@@ -0,0 +1,38 @@
+import { test } from "@playwright/test"
+import {
+  expectSpineItemsInViewport,
+  turnLeft,
+  waitForSpineItemReady,
+} from "../../../utils"
+
+const parameters = [
+  ["odd", { width: 323, height: 671 }],
+  ["even", { width: 322, height: 671 }],
+] as const
+
+parameters.forEach(([type, { width, height }]) => {
+  test.describe(`Given single page book with an ${type} width for the page`, () => {
+    test.describe("When the user turns left", () => {
+      test("should navigate to the left page", async ({ page }) => {
+        await page.setViewportSize({
+          width,
+          height,
+        })
+
+        await page.goto(
+          `http://localhost:3333/tests/navigation/manual/rtl-haruko/index.html`,
+        )
+
+        // Wait for both spine items to be ready
+        await waitForSpineItemReady(page, [0])
+
+        await turnLeft({ page })
+
+        await expectSpineItemsInViewport({
+          page,
+          indexes: [1],
+        })
+      })
+    })
+  })
+})
diff --git a/packages/tests/tests/utils.ts b/packages/tests/tests/utils.ts
@@ -61,3 +61,7 @@ export const expectSpineItemsInViewport = async ({
 export const turnRight = async ({ page }: { page: Page }) => {
   await page.keyboard.press("ArrowRight")
 }
+
+export const turnLeft = async ({ page }: { page: Page }) => {
+  await page.keyboard.press("ArrowLeft")
+}

Original file line number	Diff line number	Diff line change
`@@ -61,3 +61,7 @@ export const expectSpineItemsInViewport = async ({`
`61`	`61`	`export const turnRight = async ({ page }: { page: Page }) => {`
`62`	`62`	`await page.keyboard.press("ArrowRight")`
`63`	`63`	`}`
	`64`	`+`
	`65`	`+export const turnLeft = async ({ page }: { page: Page }) => {`
	`66`	`+ await page.keyboard.press("ArrowLeft")`
	`67`	`+}`