@design-embed/target-vanjs 1.0.0

package/dist/index.test.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/index.test.mjs

@@ -0,0 +1,84 @@
+import { VanJsTarget, emitVanJsView, vanJsTestGenerator } from "./index.mjs";
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+//#region packages/target-vanjs/src/index.test.ts
+describe("VanJS target", () => {
+	test("emits a VanJS view from design nodes", () => {
+		assert.equal(emitVanJsView([{
+			kind: "element",
+			tagName: "section",
+			attributes: { "data-testid": "hero" },
+			styles: { width: "120px" },
+			children: [{
+				kind: "text",
+				text: "Hello"
+			}]
+		}], "HeroView"), `import van from "vanjs-core";
+
+const { section } = van.tags;
+
+export function HeroView() {
+	return (
+		section({ "data-testid": "hero", style: "width: 120px;" },
+			"Hello",
+		)
+	);
+}
+`);
+	});
+	test("emits deterministic VanJS visual regression tests", () => {
+		const result = vanJsTestGenerator.generateTests({
+			html: "<section style=\"width: 120px\">Hello</section>",
+			config: {
+				output: {
+					target: new VanJsTarget(),
+					viewName: "GeneratedCard",
+					viewsDir: "src/generated/views"
+				},
+				tests: {
+					outputDir: "tests/generated",
+					viewports: [{
+						name: "mobile",
+						width: 390,
+						height: 844
+					}],
+					states: [{
+						name: "hovered",
+						hover: "section"
+					}],
+					assertions: {
+						screenshot: true,
+						layout: true,
+						layoutTolerance: 1,
+						selectors: ["section"]
+					}
+				}
+			}
+		});
+		assert.deepEqual(result.diagnostics, []);
+		assert.deepEqual(result.files.map((file) => file.path), [
+			"tests/generated/GeneratedCard.reference.html",
+			"tests/generated/GeneratedCard.visual.spec.ts",
+			"src/generated/views/GeneratedCard.mount.entry.ts"
+		]);
+		assert.equal(result.files[0]?.contents, "<section style=\"width: 120px\">Hello</section>\n");
+		assert.match(result.files[1]?.contents ?? "", /await page\.goto\("file:\/\/" \+ mountHtmlPath\);/);
+		assert.match(result.files[1]?.contents ?? "", /const layoutTolerance = 1;/);
+		assert.match(result.files[1]?.contents ?? "", /await page\.hover\(state\.hover\);/);
+		assert.equal(result.files[2]?.contents, "import van from \"vanjs-core\";\nimport { GeneratedCard } from \"./GeneratedCard.view\";\nvan.add(document.body, GeneratedCard());\n");
+	});
+	test("reports unsupported VanJS test runners", () => {
+		const result = vanJsTestGenerator.generateTests({
+			html: "<main></main>",
+			config: { tests: { runner: "vitest" } }
+		});
+		assert.deepEqual(result.files, []);
+		assert.deepEqual(result.diagnostics, [{
+			code: "TEST_RUNNER_UNSUPPORTED",
+			message: "Unsupported test runner: vitest",
+			severity: "error"
+		}]);
+	});
+});
+//#endregion
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@design-embed/target-vanjs",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "design-embed": "*"
+  },
+  "devDependencies": {
+    "design-embed": "0.2.0"
+  },
+  "scripts": {
+    "test": "node --conditions=development --test src/**/*.test.ts"
+  }
+}