diff --git a/packages/tests/tests/prepaginated/index.tsx b/packages/tests/tests/prepaginated/index.tsx index 27f8634f..ab8d252d 100644 --- a/packages/tests/tests/prepaginated/index.tsx +++ b/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() diff --git a/packages/tests/tests/prepaginated/layout-spread.spec.ts b/packages/tests/tests/prepaginated/layout-spread.spec.ts index 73f76a7a..72656481 100644 --- a/packages/tests/tests/prepaginated/layout-spread.spec.ts +++ b/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) + }) }) }) diff --git a/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-chromium-darwin.png b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-chromium-darwin.png new file mode 100644 index 00000000..fa9cf4ae Binary files /dev/null and b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-chromium-darwin.png differ diff --git a/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-firefox-darwin.png b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-firefox-darwin.png new file mode 100644 index 00000000..196fa594 Binary files /dev/null and b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-firefox-darwin.png differ diff --git a/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-webkit-darwin.png b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-webkit-darwin.png new file mode 100644 index 00000000..098ab2ba Binary files /dev/null and b/packages/tests/tests/prepaginated/layout-spread.spec.ts-snapshots/right-navigation-layout-webkit-darwin.png differ