Fix globe render test baseline generation under macOS (#12090)

* fixed adding ci arg to only circle ci

* add ability to set use-angle flag for local dev

* add documentation and update name to RENDER

* specify comment to explain why render environmental variable also needs to be checked

package.json

@@ -137,10 +137,10 @@
  "test-browser": "build/run-tap --reporter spec --no-coverage test/browser/**/*.test.js",
  "watch-render": "SUITE_NAME=render testem -f test/integration/testem/testem.js",
  "watch-query": "SUITE_NAME=query testem -f test/integration/testem/testem.js",
- "test-render": "SUITE_NAME=render CI=true testem ci -f test/integration/testem/testem.js",
- "test-render-prod": "BUILD=production SUITE_NAME=render CI=true testem ci -f test/integration/testem/testem.js",
- "test-render-csp": "BUILD=csp SUITE_NAME=render CI=true testem ci -f test/integration/testem/testem.js",
- "test-query": "SUITE_NAME=query CI=true testem ci -f test/integration/testem/testem.js",
+ "test-render": "SUITE_NAME=render RENDER=true testem ci -f test/integration/testem/testem.js",
+ "test-render-prod": "BUILD=production SUITE_NAME=render RENDER=true testem ci -f test/integration/testem/testem.js",
+ "test-render-csp": "BUILD=csp SUITE_NAME=render RENDER=true testem ci -f test/integration/testem/testem.js",
+ "test-query": "SUITE_NAME=query RENDER=true testem ci -f test/integration/testem/testem.js",
  "test-expressions": "build/run-node test/expression.test.js",
  "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
  "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",

test/integration/README.md

@@ -64,6 +64,18 @@ Results at: ./test/integration/render-tests/index.html
 Done in 2.32s.
 ```
 
+
+### Enable ANGLE configuration on render tests
+
+Some devices (e.g. M1 Macs) seem to run test with significantly less failures when forcing the ANGLE backend to use OpenGL.
+
+To configure the ANGLE backend, you can set the `--use-angle` input value to `USE_ANGLE` in CLI like so:
+```
+USE_ANGLE={INPUT} yarn run test-render
+```
+
+Accepted inputs for `USE_ANGLE` are `metal`, `gl`, `vulkan`, `swiftshader`, and `gles`. See `chrome://flags/#use-angle` for more information on the `--use-angle` flag.
+
 ### Viewing test results
 
 During a test run, the test harness will use Mapbox GL JS to create an `actual.png` image from the given `style.json`, and will then use [pixelmatch](https://github.com/mapbox/pixelmatch) to compare that image to `expected.png`, generating a `diff.png` highlighting the mismatched pixels (if any) in red.

test/integration/testem/testem.js

@@ -110,20 +110,39 @@ const defaultTestemConfig = {
  }
 };
 
-const ciTestemConfig = {
+const renderTestemConfig = {
  "launch_in_ci": [ "Chrome" ],
  "reporter": "xunit",
  "report_file": ciOutputFile,
  "xunit_intermediate_output": true,
- "tap_quiet_logs": true,
- "browser_args": {
- "Chrome": {
- "ci": [ "--disable-backgrounding-occluded-windows", "--ignore-gpu-blocklist", "--use-gl=desktop" ]
- }
- }
+ "tap_quiet_logs": true
 };
 
-const testemConfig = process.env.CI ? Object.assign({}, defaultTestemConfig, ciTestemConfig) : defaultTestemConfig;
+function setChromeFlags(flags) {
+ return {
+ "browser_args": {
+ "Chrome": {
+ "ci": flags
+ }
+ }
+ };
+}
+
+const testemConfig = Object.assign({}, defaultTestemConfig);
+
+if (process.env.RENDER) Object.assign(testemConfig, renderTestemConfig);
+
+if (process.env.CI) {
+ // Set chrome flags for CircleCI to use llvmpipe driver (see https://github.com/mapbox/mapbox-gl-js/pull/10389).
+ const ciTestemConfig = setChromeFlags([ "--disable-backgrounding-occluded-windows", "--ignore-gpu-blocklist", "--use-gl=desktop" ]);
+ Object.assign(testemConfig, ciTestemConfig);
+
+} else if (process.env.RENDER && process.env.USE_ANGLE && ['metal', 'gl', 'vulkan', 'swiftshader', 'gles'].includes(process.env.USE_ANGLE)) {
+ // Allow setting chrome flag `--use-angle` for local development on render/query tests only.
+ // Search accepted values for `--use-angle` here: https://source.chromium.org/search?q=%22--use-angle%3D%22
+ const angleTestemConfig = setChromeFlags([ `--use-angle=${process.env.USE_ANGLE}` ]);
+ Object.assign(testemConfig, angleTestemConfig);
+}
 
 module.exports = testemConfig;