test(playground): expand bundlePreview, codemirror, and state tests

Author: alexgrozav

apps/playground/src/pipeline/bundlePreview.ts

@@ -198,15 +198,18 @@ try {
 		},
 		bundle: true,
 		write: false,
+		// An out dir is required for esbuild to emit CSS from user
+		// `import './styles.css'`; without it such imports fail to build.
+		outdir: "/",
 		format: "esm",
 		jsx: "automatic",
 		jsxDev: false,
 		target: "es2022",
 		plugins: [createVirtualFsPlugin(input, reactVendor, runtimeSrc)],
 	});
 
-	// esbuild names the stdin JS output `<stdout>`; CSS from user imports lands
-	// in a sibling `.css` file.
+	// The JS bundle and any CSS from user imports are emitted as sibling
+	// outputs; the CSS file is the one whose path ends in `.css`.
 	const bundleJs =
 		result.outputFiles.find((file) => !file.path.endsWith(".css"))?.text ?? "";
 	const css = result.outputFiles

apps/playground/test/bundlePreview.test.ts

@@ -47,6 +47,56 @@ describe("bundlePreview", () => {
 		expect(result.reactIife).toBe("globalThis.PGReactVendor = {};");
 	});
 
+	it("loads every source extension and extracts user CSS", async () => {
+		const { bundlePreview } = await import("@/pipeline/bundlePreview");
+
+		const result = await bundlePreview({
+			files: {
+				"styleframe.config.ts": "export default {};",
+				"App.tsx": [
+					'import "./styles.css";',
+					'import "virtual:styleframe.css";',
+					'import { tsHelper } from "./helper";',
+					'import { jsUtil } from "./util";',
+					'import Widget from "./widget";',
+					"export default function App(){ return <div>{tsHelper}{jsUtil}<Widget/></div>; }",
+				].join("\n"),
+				"helper.ts": 'export const tsHelper = "PG_TS_VALUE";',
+				"util.js": 'export const jsUtil = "PG_JS_VALUE";',
+				"widget.jsx":
+					"export default function Widget(){ return <span>w</span>; }",
+				"styles.css": ".pg-user { color: red; }",
+			},
+			entryPath: "App.tsx",
+			configPath: "styleframe.config.ts",
+			runtimeTs: "",
+		});
+
+		// The .ts, .js and .jsx modules are each loaded and inlined.
+		expect(result.bundleJs).toContain("PG_TS_VALUE");
+		expect(result.bundleJs).toContain("PG_JS_VALUE");
+		expect(result.bundleJs).toContain("function Widget");
+		// The imported .css file is extracted into the css output, while
+		// virtual:styleframe.css resolves to an empty module.
+		expect(result.css).toContain(".pg-user");
+	});
+
+	it("rejects an unknown bare import", async () => {
+		const { bundlePreview } = await import("@/pipeline/bundlePreview");
+
+		await expect(
+			bundlePreview({
+				files: {
+					"App.tsx":
+						'import _ from "lodash";\nexport default function App(){ return <div>{String(_)}</div>; }',
+				},
+				entryPath: "App.tsx",
+				configPath: "styleframe.config.ts",
+				runtimeTs: "",
+			}),
+		).rejects.toThrow();
+	});
+
 	it("rejects when a relative import cannot be resolved", async () => {
 		const { bundlePreview } = await import("@/pipeline/bundlePreview");
 

apps/playground/test/codemirror.test.ts

@@ -1,7 +1,12 @@
 // @vitest-environment jsdom
 import type { EditorView } from "@codemirror/view";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { createEditor, setEditorValue } from "@/editor/codemirror";
+import {
+	createEditor,
+	getEditorSelection,
+	languageForPath,
+	setEditorValue,
+} from "@/editor/codemirror";
 
 const openEditors: EditorView[] = [];
 
@@ -73,6 +78,37 @@ describe("createEditor", () => {
 	});
 });
 
+describe("languageForPath", () => {
+	it("maps file extensions to editor languages", () => {
+		expect(languageForPath("styles.css")).toBe("css");
+		expect(languageForPath("App.tsx")).toBe("tsx");
+		expect(languageForPath("Widget.jsx")).toBe("tsx");
+		expect(languageForPath("config.ts")).toBe("typescript");
+		// Extensionless paths fall back to TypeScript.
+		expect(languageForPath("README")).toBe("typescript");
+	});
+});
+
+describe("getEditorSelection", () => {
+	it("reports the 1-based line and column of the cursor", () => {
+		const view = mount({ doc: "ab\ncd" });
+		// Position 4 is the second column of the second line ("c|d").
+		view.dispatch({ selection: { anchor: 4 } });
+
+		expect(getEditorSelection(view)).toEqual({ line: 2, column: 2 });
+	});
+
+	it("invokes onSelectionChange when the selection moves", () => {
+		const onSelectionChange = vi.fn();
+		const view = mount({ doc: "hello", onSelectionChange });
+		onSelectionChange.mockClear();
+
+		view.dispatch({ selection: { anchor: 3 } });
+
+		expect(onSelectionChange).toHaveBeenCalledWith({ line: 1, column: 4 });
+	});
+});
+
 describe("setEditorValue", () => {
 	it("dispatches a replacement when the value differs", () => {
 		const view = mount({ doc: "old" });

apps/playground/test/playgroundState.test.ts

@@ -10,6 +10,7 @@ import {
 	normalizePath,
 	openFile,
 	renameFile,
+	setActivePath,
 	usePlaygroundSnapshot,
 	usePlaygroundState,
 } from "@/state/playground";
@@ -133,11 +134,41 @@ describe("createFile", () => {
 		deleteFile("Widget.tsx");
 	});
 
+	it("seeds non-template files with empty content", () => {
+		const s = usePlaygroundState();
+		// A plain `.ts` (non-`.styleframe.ts`) file gets no template.
+		expect(createFile("src/helpers/format.ts")).toBe(true);
+		expect(s.files["src/helpers/format.ts"]).toBe("");
+		// `.css` files are likewise empty.
+		expect(createFile("src/helpers/reset.css")).toBe(true);
+		expect(s.files["src/helpers/reset.css"]).toBe("");
+		deleteFile("src/helpers/format.ts");
+		deleteFile("src/helpers/reset.css");
+	});
+
+	it("prefixes a component name that does not start with a letter", () => {
+		const s = usePlaygroundState();
+		expect(createFile("9lives.tsx")).toBe(true);
+		expect(s.files["9lives.tsx"]).toContain("function Component9lives");
+		deleteFile("9lives.tsx");
+	});
+
 	function state() {
 		return usePlaygroundState();
 	}
 });
 
+describe("setActivePath", () => {
+	it("activates an existing file and ignores unknown paths", () => {
+		const s = usePlaygroundState();
+		setActivePath("src/App.tsx");
+		expect(s.activePath).toBe("src/App.tsx");
+
+		setActivePath("does/not/exist.tsx");
+		expect(s.activePath).toBe("src/App.tsx");
+	});
+});
+
 describe("renameFile", () => {
 	it("moves content and protects the config and entry files", () => {
 		const s = usePlaygroundState();
@@ -209,6 +240,20 @@ describe("deleteFolder", () => {
 		expect(deleteFolder("src")).toBe(false);
 		expect(s.files[ENTRY_PATH]).toBeDefined();
 	});
+
+	it("prunes explicit folders nested under the deleted folder", () => {
+		const s = usePlaygroundState();
+		createFile("src/blocks/Hero/Hero.tsx");
+		createFolder("src/blocks/empty");
+
+		expect(deleteFolder("src/blocks")).toBe(true);
+		expect(s.files["src/blocks/Hero/Hero.tsx"]).toBeUndefined();
+		expect(s.folders).not.toContain("src/blocks/empty");
+	});
+
+	it("rejects a blank folder path", () => {
+		expect(deleteFolder("   ")).toBe(false);
+	});
 });
 
 describe("normalizePath", () => {