2nd aquarium demo POC

.github/workflows/pages.yml

@@ -17,11 +17,6 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/pmndrs/playwright:main
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v4
       - uses: actions/configure-pages@v5

.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: Testing
+
+on:
+  pull_request: {}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/pmndrs/playwright:main
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - uses: rharkor/[email protected]
+      - run: npm run build
+      - run: npm test

apps/aquarium/src/App.jsx

@@ -1,15 +1,32 @@
 import { useLayoutEffect, useEffect, useRef } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
+import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import { useMask, useGLTF, useAnimations, Float, Instance, Instances, CameraControls } from '@react-three/drei'
 import { Lightformer, Environment, RandomizedLight, AccumulativeShadows, MeshTransmissionMaterial } from '@react-three/drei'
 
 import shapesModel from './shapes-transformed.glb?url'
 import turtleModel from './model_52a_-_kemps_ridley_sea_turtle_no_id-transformed.glb?url'
 
+function SayCheese({ timestamp = 30 }) {
+  const { advance, setFrameloop } = useThree()
+
+  useEffect(() => {
+    console.log('Say cheese!')
+
+    setFrameloop('never')
+    advance(timestamp)
+
+    document.dispatchEvent(new Event('playright:r3f'))
+  }, [])
+
+  return null
+}
+
 console.log('cpoucou')
 export default function App({ spheres }) {
   return (
     <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }}>
+      {new URLSearchParams(window.location.search).has('saycheese') && <SayCheese />}
+
       <color attach="background" args={['#c6e5db']} />
       {/** Glass aquarium */}
       <Aquarium position={[0, 0.25, 0]}>

package.json

@@ -6,7 +6,6 @@
     "dev": "turbo dev",
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "pretest": "npm run build",
     "test": "./test/e2e/e2e.sh"
   },
   "devDependencies": {

test/e2e/e2e.sh

@@ -13,13 +13,19 @@ cleanup() {
 cleanup || true
 trap cleanup EXIT INT TERM HUP
 
-# build+start+playwright
+if [ ! -d "out" ]; then
+  echo "Missing out directory. Run 'npm run build' first."
+  exit 1
+fi
 npx serve out -p $PORT &
+
 npx playwright test snapshot.test.js
-kill_app
+
 
 #
 # Teardown
 #
 
+cleanup || true
+
 echo "✅ e2e ok"

test/e2e/snapshot.test.js

@@ -1,7 +1,9 @@
 const http = require("http");
+const fs = require("fs");
+const path = require("path");
 const { test, expect } = require("@playwright/test");
 
-const host = "http://localhost:5188/examples/basic-demo/?saycheese";
+const host = `http://localhost:5188`;
 
 async function waitForEvent(page, eventName) {
   await page.evaluate(
@@ -27,16 +29,29 @@ function waitForServer() {
   });
 }
 
-test("should match previous one", async ({ page }) => {
-  await waitForServer();
+function getDemoNames() {
+  const appsDir = path.resolve("apps");
 
-  // ⏳ "r3f" event
-  await page.goto(host);
-  await waitForEvent(page, "playright:r3f");
+  return fs.readdirSync(appsDir).filter((file) => {
+    return fs.statSync(path.join(appsDir, file)).isDirectory();
+  });
+}
+// const demoNames = getDemoNames();
+const demoNames = ["aquarium", "basic-demo"];
+console.log("demoNames", demoNames);
+
+demoNames.forEach((demoName) => {
+  test(`${demoName} should match previous one`, async ({ page }) => {
+    await waitForServer();
 
-  // 📸 <canvas>
-  const $canvas = page.locator("canvas[data-engine]");
+    // ⏳ "r3f" event
+    await page.goto(`${host}/examples/${demoName}/?saycheese`);
+    await waitForEvent(page, "playright:r3f");
 
-  // 👁️
-  await expect($canvas).toHaveScreenshot();
+    // 📸 <canvas>
+    const $canvas = page.locator("canvas[data-engine]");
+
+    // 👁️
+    await expect($canvas).toHaveScreenshot();
+  });
 });