fix: [excaliburjs#2374] M1 Mac tests, add test runner container (exca…

…liburjs#2373)

Closes excaliburjs#2374

This PR attempts to add a dev container build to address cross platform development

In addition this revs our puppeteer to the latest build

Mac Prerequisites:
* Docker for Mac https://docs.docker.com/desktop/mac/install/
* In the root, run `docker-compose build` (setup build environment and installs dependencies, only needed once)
* To run tests in watch mode `docker-compose run --rm dev npm run test:watch`
* To run a build `docker-compose run --rm dev npm run all`

README.md

@@ -41,6 +41,14 @@ Compiled examples can be found [in the Excalibur Samples collection](http://exca
 
 Please read our [Contributing Guidelines](.github/CONTRIBUTING.md) and our [Code of Conduct](.github/CODE_OF_CONDUCT.md). Whether you've spotted a bug, have a question, or think of a new feature, we thank you for your help!
 
+## Mac
+
+Prerequisites
+* Docker for Mac https://docs.docker.com/desktop/mac/install/
+* In the root, run `docker-compose build` (setup build environment and installs dependencies, only needed once)
+* To run tests in watch mode `docker-compose run --rm dev npm run test:watch`
+* To run a build `docker-compose run --rm dev npm run all`
+
 # Writing Documentation
 
 We love when people help improve our documentation. You can contribute to the docs in [this repository](https://github.com/excaliburjs/excaliburjs.github.io).

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3'
+
+services:
+  dev:
+    build:
+      context: .
+      dockerfile: docker/Dockerfile
+    working_dir: /opt/app
+    container_name: "dev"
+    volumes:
+      - "./:/opt/app"
+      - /opt/app/node_modules

docker/Dockerfile

@@ -0,0 +1,20 @@
+from ubuntu:20.04
+# Referenced https://github.com/actions/virtual-environments/blob/main/images/linux/Ubuntu2004-Readme.md
+# ubuntu-latest https://github.com/actions/virtual-environments
+
+# Chrome wants a timezone
+ENV TZ=America/Chicago 
+RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
+
+RUN apt update
+# Install Chromium Shared Deps (puppeteer in npm comes with chromium binary)
+RUN apt install -y wget curl gnupg libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev libasound2
+
+# Install node
+RUN curl -sL https://deb.nodesource.com/setup_16.x  | bash -
+RUN apt-get -y install nodejs
+
+
+WORKDIR /opt/app
+ADD package.json package-lock.json /opt/app/
+RUN npm install

karma.conf.js

@@ -2,7 +2,7 @@
 const process = require('process');
 const path = require('path');
 const webpack = require('webpack');
-process.env.CHROME_BIN = require('puppeteer').executablePath();
+process.env.CHROMIUM_BIN = require('puppeteer').executablePath();
 
 const isAppveyor = process.env.APPVEYOR_BUILD_NUMBER ? true : false;
 const karmaJasmineSeedReporter = function(baseReporterDecorator) {
@@ -134,21 +134,21 @@ module.exports = (config) => {
       // base output directory. If you include %browser% in the path it will be replaced with the karma browser name
       dir: path.join(__dirname, 'coverage')
     },
-    browsers: ['ChromeHeadless_with_audio'],
+    browsers: ['ChromiumHeadless_with_audio'],
     browserDisconnectTolerance : 1,
     browserDisconnectTimeout: 10000,
     browserNoActivityTimeout: 60000, // appveyor is slow :(
     customLaunchers: {
-      ChromeHeadless_with_audio: {
-          base: 'ChromeHeadless',
+      ChromiumHeadless_with_audio: {
+          base: 'ChromiumHeadless',
           flags: ['--autoplay-policy=no-user-gesture-required', '--mute-audio', '--disable-gpu', '--no-sandbox']
       },
-      ChromeHeadless_with_debug: {
-        base: 'ChromeHeadless',
+      ChromiumHeadless_with_debug: {
+        base: 'ChromiumHeadless',
         flags: ['--remote-debugging-port=9334', '--no-sandbox', '--disable-web-security']
       },
-      Chrome_with_debug: {
-        base: 'Chrome',
+      Chromium_with_debug: {
+        base: 'Chromium',
         flags: ['--remote-debugging-port=9334', '--no-sandbox']
       }
     }

package.json

@@ -96,7 +96,7 @@
     "karma-jasmine": "4.0.2",
     "karma-summary-reporter": "3.1.1",
     "karma-webpack": "5.0.0",
-    "puppeteer": "13.3.2",
+    "puppeteer": "15.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "replace-in-file": "6.3.5",

src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts

@@ -180,8 +180,9 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
       premultipliedAlpha: false,
       alpha: enableTransparency ?? true,
       depth: true,
-      powerPreference: 'high-performance',
-      failIfMajorPerformanceCaveat: true
+      powerPreference: 'high-performance'
+      // TODO Chromium fixed the bug where this didn't work now it breaks CI :(
+      // failIfMajorPerformanceCaveat: true
     });
     if (!this.__gl) {
       throw Error('Failed to retrieve webgl context from browser');

wallaby.js

@@ -19,7 +19,7 @@ module.exports = function (wallaby) {
     env: {
       kind: 'chrome',
       // This is tied to the puppeteer install
-      runner: './node_modules/puppeteer/.local-chromium/win64-961656/chrome-win/chrome.exe',
+      runner: './node_modules/puppeteer/.local-chromium/win64-1011831/chrome-win/chrome.exe',
       params: {
         runner: '--headless --mute-audio --autoplay-policy=no-user-gesture-required'
       }