e2e optims

.eslintignore

@@ -1,5 +1,4 @@
 .storybook/public/draco-gltf/
 dist/
 node_modules/
-storybook-static/
-test/e2e/*app
+storybook-static/

.gitignore

@@ -16,5 +16,4 @@ coverage/
 .idea
 yarn-error.log
 .size-snapshot.json
-test/e2e/*app
 __diff_output__

test/e2e/e2e.sh

@@ -2,14 +2,17 @@
 set -ex
 
 PORT=5188
+DIST=../../dist
 
-(cd ../../dist; npm pack)
+(cd $DIST; npm pack)
+TGZ=$(realpath "$DIST/react-three-drei-0.0.0-semantic-release.tgz")
 
 kill_app() {
-  kill $(lsof -ti:$PORT)
+  kill $(lsof -ti:$PORT) || echo "ok, no previous running process on port $PORT"
 }
+kill_app
 
-kill_app || echo "ok, no previous running process on port $PORT"
+tmp=$(mktemp -d)
 
 #
 # ██╗   ██╗██╗████████╗███████╗
@@ -20,24 +23,23 @@ kill_app || echo "ok, no previous running process on port $PORT"
 #   ╚═══╝  ╚═╝   ╚═╝   ╚══════╝
 #
 
-rm -rf viteapp
+appname=viteapp
+appdir="$tmp/$appname"
 
 # create app
-npm create vite@latest viteapp -- --template react
+(cd $tmp; npm create vite@latest $appname -- --template react)
 
 # drei
-(cd viteapp; npm i; npm i ../../../dist/react-three-drei-0.0.0-semantic-release.tgz)
+(cd $appdir; npm i; npm i $TGZ)
 
 # App.jsx
-cp App.jsx viteapp/src/App.jsx
+cp App.jsx $appdir/src/App.jsx
 
 # build+start+jest
-(cd viteapp; npm run build; npm run preview -- --port $PORT &)
-npx jest snapshot.test.js || kill_app
+(cd $appdir; npm run build; npm run preview -- --port $PORT &)
+npx jest snapshot.test.js || (kill_app && exit 1)
 kill_app
 
-rm -rf viteapp
-
 #
 #  ██████╗██████╗  █████╗ 
 # ██╔════╝██╔══██╗██╔══██╗
@@ -47,24 +49,23 @@ rm -rf viteapp
 #  ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝
 #
 
-rm -rf craapp
+appname=craapp
+appdir="$tmp/$appname"
 
 # create app
-npx create-react-app craapp
+(cd $tmp; npx create-react-app $appname)
 
 # drei
-(cd craapp; npm i ../../../dist/react-three-drei-0.0.0-semantic-release.tgz)
+(cd $appdir; npm i $TGZ)
 
 # App.jsx
-cp App.jsx craapp/src/App.js
+cp App.jsx $appdir/src/App.js
 
 # build+start+jest
-(cd craapp; npm run build; npx serve -s -p $PORT build &)
-npx jest snapshot.test.js || kill_app
+(cd $appdir; npm run build; npx serve -s -p $PORT build &)
+npx jest snapshot.test.js || (kill_app && exit 1)
 kill_app
 
-rm -rf craapp
-
 #
 # Teardown
 #

test/e2e/snapshot.test.js

@@ -1,26 +1,43 @@
+const http = require('http')
 const puppeteer = require('puppeteer')
 
 const { toMatchImageSnapshot } = require('jest-image-snapshot')
 expect.extend({ toMatchImageSnapshot })
 
+const host = 'http://localhost:5188/'
+
 async function waitForEvent(page, eventName) {
   await page.evaluate(
     (eventName) => new Promise((resolve) => document.addEventListener(eventName, resolve, { once: true })),
     eventName
   )
 }
+function waitForServer() {
+  return new Promise((resolve) => {
+    function ping() {
+      const request = http.request(host, { method: 'HEAD' }, resolve)
+      request.on('error', () => {
+        setTimeout(ping, 500) // not yet up? => re-ping in 500ms
+      })
+      request.end()
+    }
+
+    ping()
+  })
+}
 
 describe('snapshot', () => {
   let browser
   let page
   beforeAll(async () => {
+    await waitForServer()
     browser = await puppeteer.launch({ headless: 'new' })
     page = await browser.newPage()
-  })
+  }, 30000)
 
   it('should match previous one', async () => {
     // ⏳ "r3f" event
-    await page.goto('http://localhost:5188')
+    await page.goto(host)
     await waitForEvent(page, 'puppeteer:r3f')
 
     // 📸 <canvas>
@@ -32,6 +49,6 @@ describe('snapshot', () => {
   }, 30000)
 
   afterAll(async () => {
-    await browser.close()
+    await browser?.close()
   })
 })