diff --git a/test/fs-router.test.ts b/test/fs-router.test.ts
index 6b927395..24814586 100644
--- a/test/fs-router.test.ts
+++ b/test/fs-router.test.ts
@@ -57,9 +57,18 @@ testDevAndProd("fs-router", ({ createFixture }) => {
);
});
+ const ready = (app: PlaywrightFixture) => app.page.locator('[data-ready]').waitFor({ state: "attached" });;
+
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(`Vinxi Home
`),
@@ -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(``),
- );
+ 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(`Hello from Vinxi
`),
);
- expect(await app.getHtml("[data-test-id=counter]")).toBe(
- prettyHtml(``),
- );
+ 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(`Vinxi Home
`),
);
- expect(await app.getHtml("[data-test-id=counter]")).toBe(
- prettyHtml(``),
- );
+ expect(app.page.locator("[data-test-id=counter]")).toContainText("1");
});
});
diff --git a/test/helpers/playwright-fixture.ts b/test/helpers/playwright-fixture.ts
index d6bbc95a..1c388bb3 100644
--- a/test/helpers/playwright-fixture.ts
+++ b/test/helpers/playwright-fixture.ts
@@ -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()
+ });
}
/**
diff --git a/test/templates/react-ssr-fs/app/app.tsx b/test/templates/react-ssr-fs/app/app.tsx
index 0bf0c666..c9c4d33a 100644
--- a/test/templates/react-ssr-fs/app/app.tsx
+++ b/test/templates/react-ssr-fs/app/app.tsx
@@ -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 (
@@ -12,6 +24,7 @@ export default function App({ assets, children }) {
{assets}
+
{children}