diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index bfc8087a4..982bcd85e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -17,13 +17,13 @@ jobs: main: runs-on: macos-14 steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: cache: 'yarn' - - run: yarn install - - run: yarn build-storybook + - run: yarn install --frozen-lockfile - run: yarn test + - run: yarn build-storybook # semantic-release skips not configured branches(see: release.config.js) or pull-requests - run: yarn release env: diff --git a/test/e2e/App.jsx b/test/e2e/App.jsx index 329336483..a2c3c1e9a 100644 --- a/test/e2e/App.jsx +++ b/test/e2e/App.jsx @@ -5,6 +5,8 @@ import { Canvas } from '@react-three/fiber' import { Sphere, Environment, CameraControls } from '@react-three/drei' // eslint-disable-line import/no-unresolved function App() { + console.log('App') + return ( @@ -16,6 +18,8 @@ function App() { function Scene() { useEffect(() => { + console.log('useEffect') + document.dispatchEvent(new Event('puppeteer:r3f')) }, []) diff --git a/test/e2e/e2e.sh b/test/e2e/e2e.sh index 00b5322c9..d590bb018 100755 --- a/test/e2e/e2e.sh +++ b/test/e2e/e2e.sh @@ -27,7 +27,7 @@ appname=viteapp appdir="$tmp/$appname" # create app -(cd $tmp; npm create vite@latest $appname -- --template react) +(cd $tmp; npm create -y vite@latest $appname -- --template react) # drei (cd $appdir; npm i; npm i $TGZ) diff --git a/test/e2e/snapshot.test.js b/test/e2e/snapshot.test.js index b73e151df..af7ded012 100644 --- a/test/e2e/snapshot.test.js +++ b/test/e2e/snapshot.test.js @@ -6,6 +6,8 @@ expect.extend({ toMatchImageSnapshot }) const host = 'http://localhost:5188/' +const TIMEOUT = 10000 + async function waitForEvent(page, eventName) { await page.evaluate( (eventName) => new Promise((resolve) => document.addEventListener(eventName, resolve, { once: true })), @@ -31,26 +33,47 @@ describe('snapshot', () => { let page beforeAll(async () => { await waitForServer() + console.log('server ok') + + const executablePath = process.env.PUPPETEER_EXECUTABLE_PATH + console.log('executablePath', executablePath) + + const args = ['--enable-gpu'] + browser = await puppeteer.launch({ - headless: 'new', - executablePath: process.env.CHROMEWEBDRIVER, - args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'], + executablePath, + args, }) + console.log('browser ok') + page = await browser.newPage() - }, 30000) + console.log('page ok') - it('should match previous one', async () => { - // ⏳ "r3f" event - await page.goto(host) - await waitForEvent(page, 'puppeteer:r3f') + page.on('console', (message) => console.log(`Page log: ${message.text()}`)) + }, TIMEOUT) - // 📸 - const $canvas = await page.$('canvas[data-engine]') - const image = await $canvas.screenshot() + it( + 'should match previous one', + async () => { + // ⏳ "r3f" event + await page.goto(host) + console.log('goto ok') - // compare - expect(image).toMatchImageSnapshot({}) - }, 30000) + await waitForEvent(page, 'puppeteer:r3f') + console.log('event ok') + + // 📸 + const $canvas = await page.$('canvas[data-engine]') + const image = await $canvas.screenshot() + + // compare + expect(image).toMatchImageSnapshot({ + // failureThreshold: 1, + // failureThresholdType: 'percent', + }) + }, + TIMEOUT + ) afterAll(async () => { await browser?.close()