Skip to content

Commit

Permalink
fix: wait for hydration via react effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@katywings
katywings committed Jun 30, 2024
1 parent 8600f15 commit fd59651
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 12 deletions.
24 changes: 14 additions & 10 deletions test/fs-router.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,18 @@ testDevAndProd("fs-router", ({ createFixture }) => {
);
});

const ready = (app: PlaywrightFixture) => app.page.locator('[data-ready]').waitFor({ state: "attached" });;

Check failure on line 60 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: locator.waitFor: Page closed
    =========================== logs ===========================
    waiting for locator('[data-ready]')
    ============================================================

      58 | 	});
      59 |
    > 60 | 	const ready = (app: PlaywrightFixture) => app.page.locator('[data-ready]').waitFor({ state: "attached" });;
         | 	                                                                           ^
      61 |
      62 | 	test("hydrates", async ({ page }) => {
      63 | 		let app = new PlaywrightFixture(appFixture, page);

        at ready (/Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:60:77)
        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:71:9

Check failure on line 60 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: locator.waitFor: Page closed
    =========================== logs ===========================
    waiting for locator('[data-ready]')
    ============================================================

      58 | 	});
      59 |
    > 60 | 	const ready = (app: PlaywrightFixture) => app.page.locator('[data-ready]').waitFor({ state: "attached" });;
         | 	                                                                           ^
      61 |
      62 | 	test("hydrates", async ({ page }) => {
      63 | 		let app = new PlaywrightFixture(appFixture, page);

        at ready (/Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:60:77)
        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:71:9

test("hydrates", async ({ page }) => {
let app = new PlaywrightFixture(appFixture, page);
app.page.on('console', (e) => {
console.log('console', e)
});
app.page.on('pageerror', (e) => {
console.log('pagerror', e)
});
await app.goto("/", true);
await ready(app);

expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
Expand All @@ -69,31 +78,26 @@ testDevAndProd("fs-router", ({ createFixture }) => {
);

await app.clickElement("[data-test-id=counter]");

expect(await app.getHtml("[data-test-id=counter]")).toBe(
prettyHtml(`<button data-test-id="counter">1</button>`),
);
expect(app.page.locator("[data-test-id=counter]")).toContainText("1");

await app.clickElement("a[href='/hello']");
await app.waitForURL("/hello");
await ready(app);
await new Promise((r) => setTimeout(r, 1000));

expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`<h1 data-test-id="title">Hello from Vinxi</h1>`),
);
expect(await app.getHtml("[data-test-id=counter]")).toBe(
prettyHtml(`<button data-test-id="counter">1</button>`),
);
expect(app.page.locator("[data-test-id=counter]")).toContainText("1");

await app.clickElement("a[href='/']");
await app.waitForURL("/");
await ready(app);
await new Promise((r) => setTimeout(r, 2000));

expect(await app.getHtml("[data-test-id=title]")).toBe(
prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
);
expect(await app.getHtml("[data-test-id=counter]")).toBe(
prettyHtml(`<button data-test-id="counter">1</button>`),
);
expect(app.page.locator("[data-test-id=counter]")).toContainText("1");

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: ubuntu-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /home/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates 

  1) [chromium] › fs-router.test.ts:62:2 › fs-router-dev › hydrates ────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54

Check failure on line 101 in test/fs-router.test.ts

View workflow job for this annotation

GitHub Actions / 👀 (os: macos-latest, node: 18)

[chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates 

  2) [chromium] › fs-router.test.ts:62:2 › fs-router-prod › hydrates ───────────────────────────────

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: expect(locator).toContainText(expected)

    Locator: locator('[data-test-id=counter]')
    Expected string: "1"
    Received string: ""
    Call log:
      - expect.toContainText with timeout 5000ms
      - waiting for locator('[data-test-id=counter]')


       99 | 			prettyHtml(`<h1 data-test-id="title">Vinxi Home</h1>`),
      100 | 		);
    > 101 | 		expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
          | 		                                                   ^
      102 | 	});
      103 | });
      104 |

        at /Users/runner/work/vinxi/vinxi/test/fs-router.test.ts:101:54
});
});
5 changes: 4 additions & 1 deletion test/helpers/playwright-fixture.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,10 @@ export class PlaywrightFixture {
if (!el) {
throw new Error(`Can't find element for: ${selector}`);
}
await doAndWait(this.page, () => el.click());
await doAndWait(this.page, async () => {
console.log(await el.innerHTML())
return await el.click()
});
}

/**
Expand Down
15 changes: 14 additions & 1 deletion test/templates/react-ssr-fs/app/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import React from "react";
import React, { useEffect } from "react";

import { Counter } from "./Counter";
import "./style.css";

const Ready = () => {
useEffect(() => {
console.log('READY')
document.body.dataset.ready = "";
return () => {
console.log('UNREADY')
document.body.dataset.ready = null;
}
});
return <></>;
}

export default function App({ assets, children }) {
const [count, setCount] = React.useState(0);
return (
Expand All @@ -12,6 +24,7 @@ export default function App({ assets, children }) {
{assets}
</head>
<body>
<Ready />
<section>App</section>
<Counter />
{children}
Expand Down

0 comments on commit fd59651

Please sign in to comment.