Skip to content

Commit

Permalink
ssr and hydration test
Browse files Browse the repository at this point in the history
  • Loading branch information
@nksaraf
nksaraf committed Jul 2, 2023
1 parent d7af6aa commit 97145e1
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 123 deletions.
159 changes: 41 additions & 118 deletions test/basic.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,45 +16,29 @@ test.describe("rendering", () => {
test.beforeAll(async () => {
fixture = await createFixture({
files: {
"src/root.tsx": js`
import { A, Meta, FileRoutes, Scripts, Body, Head, Html, Routes } from "solid-start";
import { Suspense } from "solid-js";
export default function Root() {
return (
<Html lang="en">
<Head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<nav>
<A href="/">Home</A>
<A href="/about">About</A>
</nav>
<div id="content">
<h1>Root</h1>
<Suspense>
<Routes>
<FileRoutes />
</Routes>
</Suspense>
</div>
<Scripts />
</Body>
</Html>
);
}
`,
"src/routes/index.tsx": js`
export default function Index() {
return <h2>Index</h2>;
}
`,
"src/routes/about.tsx": js`
export default function Index() {
return <h2>About</h2>;
}
"app/root.tsx": js`
import { useState } from "react";
export default function App({ assets }) {
const [count, setCount] = useState(0);
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<section>
<h1 data-test-id="content">Hello from Vinxi</h1>
<button data-test-id="button" onClick={() => setCount(count + 1)}>
Click me
</button>
<span data-test-id="count">{count}</span>
</section>
</body>
</html>
);
}
`,
},
});
Expand All @@ -74,91 +58,30 @@ test.describe("rendering", () => {
});
});

test("server renders matching routes", async () => {
test("ssr", async () => {
let res = await fixture.requestDocument("/");
expect(res.status).toBe(200);
expect(res.headers.get("Content-Type")).toBe("text/html");
console.log(await res.text());
expect(selectHtml(await res.text(), "[data-test-id=content]")).toBe(
prettyHtml(`<h1 data-test-id="content">Hello from Vinxi</h1>`),
);
});

// test("server renders matching routes", async () => {
// let res = await fixture.requestDocument("/");
// expect(res.status).toBe(200);
// expect(res.headers.get("Content-Type")).toBe("text/html");
// expect(selectHtml(await res.text(), "#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2 data-hk="0-0-0-0-0-0-0-0-0-1-4-0-0-1-0-0-0">Index</h2>
// <!--/-->
// </div>`)
// );

// res = await fixture.requestDocument("/about");
// expect(res.status).toBe(200);
// expect(res.headers.get("Content-Type")).toBe("text/html");
// expect(selectHtml(await res.text(), "#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2 data-hk="0-0-0-0-0-0-0-0-0-1-4-0-0-1-0-0-0">About</h2>
// <!--/-->
// </div>`)
// );
// });
test("hydrates", async ({ page }) => {
let app = new PlaywrightFixture(appFixture, page);
await app.goto("/", true);

// test("hydrates", async ({ page }) => {
// let app = new PlaywrightFixture(appFixture, page);
// await app.goto("/", true);
// expect(await app.getHtml("#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2 data-hk="0-0-0-0-0-0-0-0-0-1-4-0-0-1-0-0-0">Index</h2>
// <!--/-->
// </div>`)
// );
expect(await app.getHtml("[data-test-id=content]")).toBe(
prettyHtml(`<h1 data-test-id="content">Hello from Vinxi</h1>`),
);
expect(await app.getHtml("[data-test-id=count]")).toBe(
prettyHtml(`<span data-test-id="count">0</span>`),
);

// await app.goto("/about", true);
await app.clickElement("[data-test-id=button]");

// expect(await app.getHtml("#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2 data-hk="0-0-0-0-0-0-0-0-0-1-4-0-0-1-0-0-0">About</h2>
// <!--/-->
// </div>`)
// );
// });

// test("navigates", async ({ page }) => {
// let app = new PlaywrightFixture(appFixture, page);
// await app.goto("/", true);
// expect(await app.getHtml("#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2 data-hk="0-0-0-0-0-0-0-0-0-1-4-0-0-1-0-0-0">Index</h2>
// <!--/-->
// </div>`)
// );

// await app.page.click("a[href='/about']");
// await page.waitForSelector(`h2:has-text("About")`);

// expect(await app.getHtml("#content")).toBe(
// prettyHtml(`
// <div data-hk="0-0-0-0-0-0-0-0-0-1-3" id="content">
// <h1>Root</h1>
// <!--#-->
// <h2>About</h2>
// <!--/-->
// </div>`)
// );
// });
expect(await app.getHtml("[data-test-id=count]")).toBe(
prettyHtml(`<span data-test-id="count">1</span>`),
);
});
});
4 changes: 2 additions & 2 deletions test/templates/react/app/entry-client.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="vinxi/client" />
import React, { Suspense } from "react";
import { Root, hydrateRoot } from "react-dom/client";
import { Suspense } from "react";
import { hydrateRoot } from "react-dom/client";
import "vinxi/runtime/client";

import { createAssets } from "./Assets";
Expand Down
4 changes: 2 additions & 2 deletions test/templates/react/app/entry-server.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import App from "./root";

export default eventHandler(async (event) => {
const clientManifest = import.meta.env.MANIFEST["client"];
console.log(clientManifest.handler);
const assets = await clientManifest.inputs[clientManifest.handler].assets();
const events = {};

function Assets() {
return <>{assets.map((asset) => renderAsset(asset))}</>;
}

const events = {};
const stream = renderToPipeableStream(
<App
assets={
Expand Down
2 changes: 1 addition & 1 deletion test/templates/react/app/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function App({ assets }) {
</head>
<body>
<section>
<h1>Hello AgentConf with ya asdo!!!</h1>
<h1 data-test-id="content">Hello from Vinxi</h1>
<button onClick={() => setCount(count + 1)}>
Click me: {count}!
</button>
Expand Down

0 comments on commit 97145e1

Please sign in to comment.