Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add screenshots to build #234

Merged
merged 13 commits into from
Nov 18, 2024
8 changes: 7 additions & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ on:
pull_request:
jobs:
test:
runs-on: ubuntu-latest
runs-on: macos-latest
steps:
- name: Checkout 🍔🍟🥤
uses: actions/checkout@v4
@@ -22,3 +22,9 @@ jobs:
run: |
npm ci
npm run check-ci

- name: Upload Artifact ⬆️
uses: actions/upload-artifact@v4
with:
path: ./screenshots/*.png
overwrite: true
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
.DS_Store
.esm-cache
.tscache
screenshots
node_modules
package-lock.json
test/src/ts/dist/*
2 changes: 2 additions & 0 deletions build/jsdoc-template/static/styles/jsdoc-default.css
Original file line number Diff line number Diff line change
@@ -224,6 +224,7 @@ nav {
height: 100%;
padding: 10px;
border-right: 1px solid #eee;
background-color: white;
/* box-shadow: 0 0 3px rgba(0,0,0,0.1); */
}

@@ -737,6 +738,7 @@ dl.param-type {

nav {
border-right-color: #666;
background-color: #333;
}

.nav-heading a {
2 changes: 2 additions & 0 deletions docs/styles/jsdoc-default.css
Original file line number Diff line number Diff line change
@@ -224,6 +224,7 @@ nav {
height: 100%;
padding: 10px;
border-right: 1px solid #eee;
background-color: white;
/* box-shadow: 0 0 3px rgba(0,0,0,0.1); */
}

@@ -737,6 +738,7 @@ dl.param-type {

nav {
border-right-color: #666;
background-color: #333;
}

.nav-heading a {
1 change: 1 addition & 0 deletions test/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* global mocha */

import './tests/gpu-info.js';
import './tests/attribute-buffer-tests.js';
import './tests/framebuffer-tests.js';
import './tests/helper-tests.js';
31 changes: 24 additions & 7 deletions test/puppeteer.js
Original file line number Diff line number Diff line change
@@ -11,12 +11,15 @@ const port = 3000;

const exampleInjectJS = fs.readFileSync('test/src/js/example-inject.js', {encoding: 'utf-8'});

const skipRE = /dynamic-buffers|webgl2-textures/;

function getExamples(port) {
return fs.readdirSync('examples')
.filter(f => f.endsWith('.html'))
.filter(f => f.endsWith('.html') && !skipRE.test(f))
.map(f => ({
url: `http://localhost:${port}/examples/${f}`,
js: exampleInjectJS,
screenshot: true,
}));
}

@@ -36,7 +39,11 @@ function makePromiseInfo() {
}

async function test(port) {
const browser = await puppeteer.launch();
const browser = await puppeteer.launch({
args: [
'--use-angle=metal',
],
});
const page = await browser.newPage();

page.on('console', async e => {
@@ -65,14 +72,14 @@ async function test(port) {
...getExamples(port),
];

for (const {url, js} of testPages) {
for (const {url, js, screenshot} of testPages) {
waitingPromiseInfo = makePromiseInfo();
console.log(`===== [ ${url} ] =====`);
if (js) {
await page.evaluateOnNewDocument(js);
}
const id = js
? await page.evaluateOnNewDocument(js)
: undefined;
await page.goto(url);
await page.waitForNetworkIdle();
await page.waitForNetworkIdle({timeout: 5000});
if (js) {
await page.evaluate(() => {
setTimeout(() => {
@@ -81,6 +88,16 @@ async function test(port) {
});
}
await waitingPromiseInfo.promise;
if (screenshot) {
const dir = 'screenshots';
fs.mkdirSync(dir, { recursive: true });
const name = /\/([a-z0-9_-]+).html/.exec(url)[1];
const path = `${dir}/${name}.png`;
await page.screenshot({path});
}
if (id) {
await page.removeScriptToEvaluateOnNewDocument(id.identifier);
}
}

await browser.close();
18 changes: 18 additions & 0 deletions test/tests/gpu-info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {describe, it} from '../mocha-support.js';

function getGPUInfo(gl, ext) {
return JSON.stringify({
...(ext
? Object.fromEntries(['UNMASKED_VENDOR_WEBGL', 'UNMASKED_RENDERER_WEBGL'].map(pname => [pname, gl.getParameter(ext[pname])]))
: { WEBGL_debug_renderer_info: 'unavailable' }
),
...JSON.parse(JSON.stringify(navigator.userAgentData || {})),
}, null, 2);
}

describe('gpu info', () => {
const gl = new OffscreenCanvas(1, 1).getContext('webgl2');
const ext = gl.getExtension('WEBGL_debug_renderer_info');
const title = getGPUInfo(gl, ext);
it(title, () => {});
});