Playwright test runner

adeira-source-id: a0868c7a6fdc712a89384f1815fd349c4d5a48d3

.eslintrc.json

@@ -27,20 +27,7 @@
       { "argsIgnorePattern": "^_" }
     ],
     "header/header": ["error", "scripts/header.js"],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          "**/__test__/**",
-          "**/__tests__/**",
-          "**/hook*.js",
-          "**/*.d.ts",
-          "**/main-dev-only.ts",
-          "**/*.config.mjs",
-          "**/*.config.js"
-        ]
-      }
-    ],
+    "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
     "no-extra-parens": "off",
     "no-inner-declarations": "off",

examples/test-fixture/.triplex/config.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://triplex.dev/config.schema.json",
+  "components": ["../src/geometry/**/*.tsx"],
+  "files": ["../src/**/*.tsx"]
+}

examples/test-fixture/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@example/test-runner",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "echo \"Not implemented\"",
+    "typedef": "echo \"Not implemented\""
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.56.27",
+    "@react-three/fiber": "^8.14.5",
+    "@react-three/rapier": "^1.1.1",
+    "@types/react": "^18.0.0",
+    "@types/three": "^0.157.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "three": "^0.157.0"
+  }
+}

examples/test-fixture/src/geometry/box.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+import { Vector3Tuple } from "three";
+
+function Box({
+  color,
+  position,
+  rotation,
+  scale,
+  size = 1,
+}: {
+  color?: "red" | "green" | "blue";
+  position?: Vector3Tuple | number;
+  rotation?: Vector3Tuple;
+  scale?: Vector3Tuple | number;
+  /**
+   * @min 1
+   * @max 2
+   */
+  size?: number;
+}) {
+  const ok = {};
+  return (
+    <group scale={scale} visible={true}>
+      <mesh
+        {...ok}
+        name="hello-world"
+        onClick={() => {}}
+        position={position}
+        rotation={rotation}
+        userData={{ hello: true }}
+        visible={true}
+      >
+        <boxGeometry args={[size, size, size]} />
+        <meshStandardMaterial color={color} key={color} />
+      </mesh>
+    </group>
+  );
+}
+
+export default Box;

examples/test-fixture/src/scene.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+import Box from "./geometry/box";
+
+export default function Scene() {
+  return (
+    <>
+      <Box />
+    </>
+  );
+}

examples/test-fixture/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["@react-three/fiber"]
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}

packages/editor/src/ds/button.tsx

@@ -84,6 +84,7 @@ export const Button = forwardRef<
     isSelected?: boolean;
     onClick?: () => void;
     size?: "default" | "tight";
+    testId?: string;
     variant?: "default" | "inverse";
   }
 >(
@@ -96,6 +97,7 @@ export const Button = forwardRef<
       isSelected,
       onClick,
       size = "default",
+      testId,
       variant = "default",
     },
     ref
@@ -118,6 +120,7 @@ export const Button = forwardRef<
         "flex items-center gap-1.5 text-sm",
         className,
       ])}
+      data-testid={testId}
       disabled={disabled}
       onClick={onClick}
       ref={ref}

packages/editor/src/ui/title-bar.tsx

@@ -26,7 +26,10 @@ export function TitleBar() {
       <div>
         <EditorMenu />
       </div>
-      <span className="place-self-center text-sm text-neutral-300">
+      <span
+        className="place-self-center text-sm text-neutral-300"
+        data-testid="titlebar"
+      >
         {windowTitle}
       </span>
       <div />

packages/editor/src/welcome.tsx

@@ -66,7 +66,7 @@ function WelcomeScreen() {
             "absolute right-0 ml-auto flex h-8 items-center pr-2.5 text-xs text-neutral-300",
           ])}
         >
-          {version}
+          {process.env.FORCE_EDITOR_TEST_FIXTURE ? "local_test" : version}
         </span>
 
         <ProgressBar />

packages/editor/vite.config.mjs

@@ -1,15 +1,17 @@
+/**
+ * Copyright (c) Michael Dougall. All rights reserved.
+ *
+ * This source code is licensed under the GPL-3.0 license found in the LICENSE
+ * file in the root directory of this source tree.
+ */
+import { resolve } from "node:path";
 import react from "@vitejs/plugin-react";
-import { resolve } from "path";
 
 /**
  * @type {import("vite").UserConfig}
  */
 export default {
   base: "./",
-  define: {
-    __TRIPLEX_TARGET__: `"${process.env.TRIPLEX_TARGET}"`,
-  },
-  plugins: [react()],
   build: {
     rollupOptions: {
       input: {
@@ -18,4 +20,8 @@ export default {
       },
     },
   },
+  define: {
+    __TRIPLEX_TARGET__: `"${process.env.TRIPLEX_TARGET}"`,
+  },
+  plugins: [react()],
 };