feat: added more tests

packages/tests/tests/prepaginated/index.tsx

@@ -3,6 +3,8 @@ import { createArchiveFromJszip, Streamer } from "@prose-reader/streamer"
 import { from } from "rxjs"
 import { loadAsync } from "jszip"
 
+window.__PROSE_READER_DEBUG = true
+
 async function createStreamer() {
   const streamer = new Streamer({
     getArchive: async () => {
@@ -29,8 +31,10 @@ async function run() {
   const manifest = await manifestResponse.json()
 
   console.log(manifest)
-  
+
   const reader = createReader({
+    numberOfAdjacentSpineItemToPreLoad: 0,
+    pageTurnAnimation: "none",
     layoutLayerTransition: false,
     getResource: (item) => {
       return from(streamer.fetchResource({ key: `_`, resourcePath: item.href }))
@@ -44,6 +48,16 @@ async function run() {
     containerElement: document.getElementById(`app`)!,
     manifest,
   })
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.reader = reader
+
+  reader.layout$.subscribe(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.layoutNumber = (window.layoutNumber ?? 0) + 1
+  })
 }
 
 run()

packages/tests/tests/prepaginated/layout-spread.spec.ts

@@ -1,16 +1,59 @@
 import { test, expect } from "@playwright/test"
+import { waitForSpineItemReady } from "../utils"
 
 test.describe("Given a prepaginated book with first page on spread right", () => {
-  test("should render first document on right page", async ({ page }) => {
-    await page.setViewportSize({
-      width: 400,
-      height: 300,
+  test.describe("and numberOfAdjacentSpineItemToPreLoad as 0", () => {
+    test("should render first document on right page", async ({ page }) => {
+      await page.setViewportSize({
+        width: 400,
+        height: 300,
+      })
+
+      await page.goto("http://localhost:3333/tests/prepaginated/index.html")
+
+      await page.waitForSelector(".prose-spineItem-ready")
+
+      expect(await page.screenshot()).toMatchSnapshot(`page-spread-right.png`)
     })
 
-    await page.goto("http://localhost:3333/tests/prepaginated/index.html")
+    /**
+     * - Make sure layout is correct
+     * - Make sure layout are not infinite and looping.
+     */
+    test("should have a stable layout after navigating right", async ({ page }) => {
+      await page.setViewportSize({
+        width: 400,
+        height: 300,
+      })
+
+      await page.goto("http://localhost:3333/tests/prepaginated/index.html")
+
+      await page.waitForSelector(".prose-spineItem-ready")
+
+      await page.keyboard.press("ArrowRight")
 
-    await page.waitForSelector(".prose-spineItem-ready")
+      await waitForSpineItemReady(page, [1, 2])
 
-    expect(await page.screenshot()).toMatchSnapshot(`page-spread-right.png`)
+      expect(await page.screenshot()).toMatchSnapshot(`right-navigation-layout.png`)
+
+      const numberOfLayout = await page.evaluate(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (window as any).layoutNumber as number
+      })
+
+      // that's a long timeout but layout are being debounced a bit.
+      await page.waitForTimeout(1000)
+
+      const numberOfLayoutAfterAWhile = await page.evaluate(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (window as any).layoutNumber as number
+      })
+
+      // make sure the value is correctly set on app side
+      expect(numberOfLayout).toBeGreaterThan(1)
+
+      // we make sure we don't have yolo renders
+      expect(numberOfLayoutAfterAWhile).toBe(numberOfLayout)
+    })
   })
 })