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.

Sign up for GitHub

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

Fix browser test examples #245

Merged
merged 2 commits into from
Feb 7, 2024
Merged

Fix browser test examples #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f27bbb7
Upgrade puppeteer
Pessimistress Feb 6, 2024
730acb3
Fix browser test examples
Pessimistress Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 0 additions & 67 deletions examples/browser-test-vite-wip/index.html
View file
Open in desktop

This file was deleted.

12 changes: 0 additions & 12 deletions examples/browser-test-vite-wip/src/start.js
View file
Open in desktop

This file was deleted.

Binary file removed examples/browser-test-vite-wip/test/golden-image-error.png
View file
Open in desktop
Binary file not shown.
22 changes: 0 additions & 22 deletions examples/browser-test-vite-wip/vite.config.ts
View file
Open in desktop

This file was deleted.

0 examples/browser-test-vite-wip/README.md → examples/browser-test-vite/README.md
View file
Open in desktop
File renamed without changes.
10 changes: 10 additions & 0 deletions examples/browser-test-vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Browser Test Example</title>
</head>
<body>
</body>
<script type="module" src="./test/index.js"></script>
</html>
5 changes: 3 additions & 2 deletions examples/browser-test-vite-wip/package.json → examples/browser-test-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
"version": "4.0.4",
"description": "@probe.gl/test-utils browser based tests example",
"license": "MIT",
"type": "module",
"private": true,
"scripts": {
"start": "npm run test-browser",
"test": "node src/start.js headless",
"test-browser": "node src/start.js"
"test": "node test/start.js headless",
"test-browser": "node test/start.js"
},
"dependencies": {
"@probe.gl/test-utils": "4.0.4",
Expand Down
55 changes: 55 additions & 0 deletions examples/browser-test-vite/test/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
export function render() {
const css = document.createElement('style');
css.innerHTML = `
.app {
display: inline-block;
padding: 0 12px 0 0;
}
.arrow-box {
position: relative;
font-family: Arial;
font-size: 20px;
color: #fff;
width: 80px;
height: 20px;
padding: 20px;
background: #a00;
border: 4px solid #f80;
}
.arrow-box:after, .arrow-box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow-box:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #a00;
border-width: 10px;
margin-top: -10px;
}
.arrow-box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #f80;
border-width: 16px;
margin-top: -16px;
}
`;
document.body.append(css);

const div = document.createElement('div');
div.className = 'app';
const arrowBox = document.createElement('div');
arrowBox.className = 'arrow-box';
arrowBox.innerHTML = 'Hello';

div.append(arrowBox);
document.body.append(div);

return div;
}
0 ...owser-test-vite-wip/test/golden-image.png → ...s/browser-test-vite/test/golden-image.png
View file
Open in desktop
File renamed without changes
8 changes: 4 additions & 4 deletions examples/browser-test-vite-wip/src/index.js → examples/browser-test-vite/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// probe.gl logging example
import test from 'tape';
import {render} from './app.js';

// Add BrowserTestDriver hooks
test.onFailure(window.browserTestDriver_fail);
Expand All @@ -9,13 +9,13 @@ test('A test', t => {
// Default tape test timeout is 500ms - allow enough time for render and screenshot
t.timeoutAfter(2000);

const app = document.getElementById('app');
const app = render();

window
.browserTestDriver_captureAndDiffScreen({
threshold: 0.99,
goldenImage: 'test/golden-image-error.png',
region: app?.getBoundingClientRect(),
goldenImage: 'test/golden-image.png',
region: app.getBoundingClientRect(),
saveOnFail: true
})
.then(result => {
Expand Down
31 changes: 31 additions & 0 deletions examples/browser-test-vite/test/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {BrowserTestDriver} from '@probe.gl/test-utils';
import {createServer} from 'vite';

const mode = process.argv[2];

async function startViteServer(opts) {
const server = await createServer({
configFile: './vite.config.js',
mode: 'development',
server: {
port: opts.port
}
});
await server.listen();

return {
url: server.resolvedUrls.local[0],
stop: () => {
server.close();
}
};
}

new BrowserTestDriver().run({
title: 'Unit Tests',
server: {
port: 'auto',
start: startViteServer
},
headless: mode === 'headless'
});
20 changes: 20 additions & 0 deletions examples/browser-test-vite/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
import {NodeModulesPolyfillPlugin} from '@esbuild-plugins/node-modules-polyfill';

export default {
optimizeDeps: {
// Polyfill for Node environment (required by tape-promise)
esbuildOptions: {
define: {
global: 'globalThis',
__dirname: '"."'
},
plugins: [
NodeGlobalsPolyfillPlugin({
process: true
}),
NodeModulesPolyfillPlugin()
]
}
}
};
14 changes: 9 additions & 5 deletions examples/browser-test-webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "4.0.4",
"description": "@probe.gl/test-utils browser based tests example",
"license": "MIT",
"type": "module",
"private": true,
"scripts": {
"start": "npm run test-browser",
Expand All @@ -11,12 +12,15 @@
},
"dependencies": {
"@probe.gl/test-utils": "4.0.4",
"tape": "^4.5.1"
"tape": "^4.5.1",
"path-browserify": "1.0.1",
"process": "0.11.10",
"stream-browserify": "3.0.0"
},
"devDependencies": {
"html-webpack-plugin": "^3.0.7",
"webpack": "^4.20.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.0"
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.0.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.0.0"
}
}
5 changes: 3 additions & 2 deletions examples/browser-test-webpack/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const test = require('tape');
import test from 'tape';
import {render} from './app.js';

// Add BrowserTestDriver hooks
test.onFailure(window.browserTestDriver_fail);
Expand All @@ -8,7 +9,7 @@ test('A test', t => {
// Default tape test timeout is 500ms - allow enough time for render and screenshot
t.timeoutAfter(2000);

const app = require('./app').render();
const app = render();

window
.browserTestDriver_captureAndDiffScreen({
Expand Down
6 changes: 4 additions & 2 deletions examples/browser-test-webpack/test/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
const {BrowserTestDriver} = require('@probe.gl/test-utils');
import {BrowserTestDriver} from '@probe.gl/test-utils';

const mode = process.argv[2];

new BrowserTestDriver().run({
title: 'Unit Tests',
server: {
port: 'auto',
command: 'webpack-dev-server',
arguments: ['--config', 'webpack.config.js']
arguments: ['--config', 'webpack.config.cjs'],
wait: 3000
},
headless: mode === 'headless'
});
25 changes: 25 additions & 0 deletions examples/browser-test-webpack/webpack.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
mode: 'development',

entry: {
app: './test/index.js'
},

resolve: {
fallback: {
path: require.resolve('path-browserify'),
stream: require.resolve('stream-browserify')
}
},

plugins: [
new HtmlWebpackPlugin({title: 'Browser test example'}),
new webpack.ProvidePlugin({
process: 'process/browser'
})
]
}
20 changes: 0 additions & 20 deletions examples/browser-test-webpack/webpack.config.js
View file
Open in desktop

This file was deleted.

Loading
Loading