add tests

nksaraf · Jul 31, 2023 · 7b40280 · 7b40280
1 parent 26f2f10
commit 7b40280
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 2 deletions.
diff --git a/packages/vinxi/bin/cli.mjs b/packages/vinxi/bin/cli.mjs
@@ -17,7 +17,7 @@ async function main() {
 		const { createDevServer } = await import("../lib/dev-server.js");
 		await createDevServer(config, {
 			dev: true,
-			port: 3000,
+			port: Number(process.env.PORT ?? 3000),
 		});
 	} else if (command === "build") {
 		process.env.NODE_ENV = "production";

diff --git a/test/basic-dev.test.ts b/test/basic-dev.test.ts
@@ -0,0 +1,91 @@
+import { expect, test } from "@playwright/test";
+
+import type { AppFixture, Fixture } from "./helpers/create-fixture.js";
+import {
+	createDevFixture,
+	createFixture,
+	js,
+} from "./helpers/create-fixture.js";
+import {
+	PlaywrightFixture,
+	prettyHtml,
+	selectHtml,
+} from "./helpers/playwright-fixture.js";
+
+test.describe("rendering", () => {
+	let fixture: Fixture;
+	let appFixture: AppFixture;
+	// test.skip(process.env.START_ADAPTER !== "solid-start-node");
+
+	test.beforeAll(async () => {
+		fixture = await createDevFixture({
+			files: {
+				"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>
+							);
+						}
+        `,
+			},
+		});
+
+		appFixture = await fixture.createServer();
+	});
+
+	test.afterAll(async () => {
+		await appFixture.close();
+	});
+
+	let logs: string[] = [];
+
+	test.beforeEach(({ page }) => {
+		page.on("console", (msg) => {
+			logs.push(msg.text());
+		});
+	});
+
+	test("ssr", 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(), "[data-test-id=content]")).toBe(
+			prettyHtml(`<h1 data-test-id="content">Hello from Vinxi</h1>`),
+		);
+	});
+
+	test("hydrates", async ({ page }) => {
+		let app = new PlaywrightFixture(appFixture, page);
+		await app.goto("/", true);
+
+		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.clickElement("[data-test-id=button]");
+
+		expect(await app.getHtml("[data-test-id=count]")).toBe(
+			prettyHtml(`<span data-test-id="count">1</span>`),
+		);
+	});
+});
diff --git a/test/helpers/create-fixture.ts b/test/helpers/create-fixture.ts
@@ -33,8 +33,97 @@ export function json(value: object) {
 	return JSON.stringify(value, null, 2);
 }
 
+export async function createDevFixture(init: FixtureInit) {
+	let projectDir = await createFixtureProject(init);
+
+	let ip = "localhost";
+	let port = await getPort();
+	let proc = spawn("npm", ["run", "dev"], {
+		cwd: projectDir,
+		env: {
+			...process.env,
+			PORT: `${port}`,
+			IP: ip,
+		},
+	});
+
+	proc.stdout?.pipe(process.stdout);
+	proc.stderr?.pipe(process.stderr);
+
+	await waitOn(
+		{
+			resources: [`http://${ip}:${port}/favicon.ico`],
+			validateStatus: function (status) {
+				return status >= 200 && status < 310; // default if not provided
+			},
+		},
+		undefined,
+	);
+
+	let getStaticHTML = async () => {
+		let text = await readFile(
+			path.join(projectDir, "dist", "client", "index.html"),
+			"utf8",
+		);
+		return new Response(text, {
+			headers: {
+				"content-type": "text/html",
+			},
+		});
+	};
+
+	let requestDocument = async (href: string, init?: RequestInit) => {
+		let url = new URL(href, `http://${ip}:${port}`);
+		let request = new Request(url, init);
+		try {
+			return await fetch(request);
+		} catch (err) {
+			console.error(err);
+			return new Response(err.message, {
+				status: 500,
+			});
+		}
+	};
+
+	let postDocument = async (href: string, data: URLSearchParams | FormData) => {
+		return await requestDocument(href, {
+			method: "POST",
+			body: data,
+			headers: {
+				"Content-Type":
+					data instanceof URLSearchParams
+						? "application/x-www-form-urlencoded"
+						: "multipart/form-data",
+			},
+		});
+	};
+
+	let getBrowserAsset = async (asset: string) => {
+		return await fse.readFile(
+			path.join(projectDir, "public", asset.replace(/^\//, "")),
+			"utf8",
+		);
+	};
+
+	return {
+		projectDir,
+		requestDocument,
+		postDocument,
+		getBrowserAsset,
+		createServer: async () => {
+			return {
+				serverUrl: `http://${ip}:${port}`,
+				close: async () => {
+					proc.kill();
+				},
+			};
+		},
+	};
+}
+
 export async function createFixture(init: FixtureInit) {
 	let projectDir = await createFixtureProject(init);
+	await build(projectDir, init.buildStdio);
 	let buildPath = path.resolve(projectDir, ".output", "server", "index.mjs");
 	if (!fse.existsSync(buildPath)) {
 		throw new Error(
@@ -151,7 +240,6 @@ export async function createFixtureProject(init: FixtureInit): Promise<string> {
 	await fse.copy(integrationTemplateDir, projectDir);
 
 	await writeTestFiles(init, projectDir);
-	await build(projectDir, init.buildStdio);
 
 	return projectDir;
 }