@design-embed/target-react 0.1.0 → 1.0.1

package/dist/index.test.d.mts

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

package/dist/index.test.mjs

@@ -0,0 +1,75 @@
+import { ReactTarget, emitReactView, reactTestGenerator } from "./index.mjs";
+import assert from "node:assert/strict";
+import { describe, test } from "node:test";
+//#region packages/target-react/src/index.test.ts
+describe("React target", () => {
+	test("emits a React view from design nodes", () => {
+		assert.equal(emitReactView([{
+			kind: "element",
+			tagName: "section",
+			attributes: { "data-testid": "hero" },
+			styles: { width: "120px" },
+			children: [{
+				kind: "text",
+				text: "Hello"
+			}]
+		}], "HeroView"), `export function HeroView() {
+\treturn (
+\t\t<section data-testid="hero" style={{ width: "120px" }}>
+\t\t\tHello
+\t\t</section>
+\t);
+}
+`);
+	});
+	test("emits deterministic React visual regression tests", () => {
+		const result = reactTestGenerator.generateTests({
+			html: "<section style=\"width: 120px\">Hello</section>",
+			config: {
+				output: {
+					target: new ReactTarget(),
+					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.tsx"]);
+		assert.equal(result.files[0]?.contents, "<section style=\"width: 120px\">Hello</section>\n");
+		assert.match(result.files[1]?.contents ?? "", /import { GeneratedCard } from "..\/..\/src\/generated\/views\/GeneratedCard.view";/);
+		assert.match(result.files[1]?.contents ?? "", /const layoutTolerance = 1;/);
+		assert.match(result.files[1]?.contents ?? "", /await page.hover\(state.hover\);/);
+	});
+	test("reports unsupported React test runners", () => {
+		const result = reactTestGenerator.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

@@ -1,16 +1,17 @@
 {
   "name": "@design-embed/target-react",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "type": "module",
   "private": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "exports": {
     ".": {
       "types": "./src/index.ts",
       "development": "./src/index.ts",
-      "default": "./dist/index.js"
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
@@ -19,12 +20,13 @@
     "!src/**/*.test.ts",
     "README.md"
   ],
-  "dependencies": {
-    "@design-embed/config": "0.1.0",
-    "@design-embed/core": "0.1.0"
+  "peerDependencies": {
+    "design-embed": "*"
   },
-  "bundledDependencies": [
-    "@design-embed/config",
-    "@design-embed/core"
-  ]
+  "devDependencies": {
+    "design-embed": "0.2.1"
+  },
+  "scripts": {
+    "test": "node --conditions=development --test src/**/*.test.ts"
+  }
 }