Puppeteer E2E test: Clean up

test/e2e/check-coverage.js

@@ -1,53 +1,55 @@
-import fs from 'fs';
+import chalk from 'chalk';
+import * as fs from 'fs/promises';
 
-// examples
-const E = fs.readdirSync( './examples' )
-	.filter( s => s.slice( - 5 ) === '.html' )
-	.map( s => s.slice( 0, s.length - 5 ) )
-	.filter( f => f !== 'index' );
+console.red = msg => console.log( chalk.red( msg ) );
+console.green = msg => console.log( chalk.green( msg ) );
 
-// screenshots
-const S = fs.readdirSync( './examples/screenshots' )
-	.filter( s => s.slice( - 4 ) === '.jpg' )
-	.map( s => s.slice( 0, s.length - 4 ) );
+main();
 
-// files.js
-const F = [];
+async function main() {
 
-const files = JSON.parse( fs.readFileSync( './examples/files.json' ) );
+	// examples
+	const E = ( await fs.readdir( 'examples' ) )
+		.filter( s => s.endsWith( '.html' ) )
+		.map( s => s.slice( 0, s.indexOf( '.' ) ) )
+		.filter( f => f !== 'index' );
 
-for ( const key in files ) {
+	// screenshots
+	const S = ( await fs.readdir( 'examples/screenshots' ) )
+		.filter( s => s.indexOf( '.' ) !== -1 )
+		.map( s => s.slice( 0, s.indexOf( '.' ) ) );
 
-	const section = files[ key ];
-	for ( let i = 0, len = section.length; i < len; i ++ ) {
+	// files.js
+	const F = [];
 
-		F.push( section[ i ] );
+	const files = JSON.parse( await fs.readFile( 'examples/files.json' ) );
 
-	}
+	for ( const section of Object.values( files ) ) {
 
-}
+		F.push( ...section );
 
-const subES = E.filter( x => ! S.includes( x ) );
-const subSE = S.filter( x => ! E.includes( x ) );
-const subEF = E.filter( x => ! F.includes( x ) );
-const subFE = F.filter( x => ! E.includes( x ) );
+	}
 
-console.green = ( msg ) => console.log( `\x1b[32m${ msg }\x1b[37m` );
-console.red = ( msg ) => console.log( `\x1b[31m${ msg }\x1b[37m` );
+	const subES = E.filter( x => ! S.includes( x ) );
+	const subSE = S.filter( x => ! E.includes( x ) );
+	const subEF = E.filter( x => ! F.includes( x ) );
+	const subFE = F.filter( x => ! E.includes( x ) );
 
-if ( subES.length + subSE.length + subEF.length + subFE.length === 0 ) {
+	if ( subES.length + subSE.length + subEF.length + subFE.length === 0 ) {
 
-	console.green( 'TEST PASSED! All examples is covered with screenshots and descriptions in files.json!' );
+		console.green( 'TEST PASSED! All examples is covered with screenshots and descriptions in files.json!' );
 
-} else {
+	} else {
 
-	if ( subES.length > 0 ) console.red( 'Make screenshot for example(s): ' + subES.join( ' ' ) );
-	if ( subSE.length > 0 ) console.red( 'Remove unnecessary screenshot(s): ' + subSE.join( ' ' ) );
-	if ( subEF.length > 0 ) console.red( 'Add description in files.json for example(s): ' + subEF.join( ' ' ) );
-	if ( subFE.length > 0 ) console.red( 'Remove description in files.json for example(s): ' + subFE.join( ' ' ) );
+		if ( subES.length > 0 ) console.red( 'Make screenshot for example(s): ' + subES.join( ' ' ) );
+		if ( subSE.length > 0 ) console.red( 'Remove unnecessary screenshot(s): ' + subSE.join( ' ' ) );
+		if ( subEF.length > 0 ) console.red( 'Add description in files.json for example(s): ' + subEF.join( ' ' ) );
+		if ( subFE.length > 0 ) console.red( 'Remove description in files.json for example(s): ' + subFE.join( ' ' ) );
 
-	console.red( 'TEST FAILED!' );
+		console.red( 'TEST FAILED!' );
 
-	process.exit( 1 );
+		process.exit( 1 );
+
+	}
 
 }

test/e2e/clean-page.js

@@ -1,42 +1,26 @@
-
 ( function () {
 
-
-	/* Remove start screen ( or press some button ) */
+	/* Remove start screen (or press some button ) */
 
 	const button = document.getElementById( 'startButton' );
-
-	if ( button ) {
-
-		button.click();
-
-	}
-
+	if ( button ) button.click();
 
 	/* Remove gui and fonts */
 
 	const style = document.createElement( 'style' );
 	style.type = 'text/css';
-	style.innerHTML = `body { font size: 0 !important; }
-      #info, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }`;
-
-	const head = document.getElementsByTagName( 'head' );
-
-	if ( head.length > 0 ) {
-
-		head[ 0 ].appendChild( style );
-
-	}
+	style.innerHTML = '#info, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }';
 
-	/* Remove stats.js */
+	document.querySelector( 'head' ).appendChild( style );
 
-	const canvas = document.getElementsByTagName( 'canvas' );
+	/* Remove Stats.js */
 
-	for ( let i = 0; i < canvas.length; ++ i ) {
+	for ( const element of document.querySelectorAll( 'div' ) ) {
 
-		if ( canvas[ i ].height === 48 ) {
+		if ( getComputedStyle( element ).zIndex === '10000' ) {
 
-			canvas[ i ].style.display = 'none';
+			element.remove();
+			break;
 
 		}
 

test/e2e/deterministic-injection.js

@@ -1,4 +1,3 @@
-
 ( function () {
 
 	/* Deterministic random */
@@ -13,7 +12,6 @@
 
 	};
 
-
 	/* Deterministic timer */
 
 	window.performance._now = performance.now;
@@ -24,7 +22,6 @@
 	window.Date.prototype.getTime = now;
 	window.performance.now = now;
 
-
 	/* Deterministic RAF */
 
 	const RAF = window.requestAnimationFrame;
@@ -62,7 +59,6 @@
 
 	};
 
-
 	/* Semi-determitistic video */
 
 	const play = HTMLVideoElement.prototype.play;