Simplify render tests (#1003)

Fixes #1008 

* Initial commit - half of the tests are failing

* Missing file

* Remove template rendering

* Fix usage of localizeUrls

* Move harness and server to render folder, simplify render code to be sepcific.

* Move function outside and add some typings

* lint

* Add typings, move compare results outside

* Remove server usage and replace it by file system reading.

* Move xhr mocking to main flow

* Move functions outside the render function

* Move creation of tests to render.ts, added more typings

* Move suite implementation into main flow file, add some typings.

* lint

* Moved all logic to a single file that runs the render tests

* remove color from harness

* Remove jest run command

* Small fixes

* lint

* Cleanup

* More cleanup

* Remove harness and move it to a single file. Remove the jest version.

* Remove ignore related code and tests

* Remove ignore, add types

* Add more types

* lint

* Migrate actual image generation to not use Buffer

* lint

* Fix CI run

* Fix CI properly this time...

* Revert png change

* Revert only buffer usage

* Revert png and buffer

* Simplify png in mock file

* Move to use uint8array and change throshold

* Added diff info

* remove specific threshold from test as it fails

* Fix typo

* Fix according to code review

.github/workflows/test-render.yml

@@ -11,16 +11,11 @@ jobs:
     timeout-minutes: 20
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 16 x64
+      - name: Use Node.js 16.13 x64
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 16.13
           architecture: x64
       - run: npm ci
       - run: npm run build-dev
       - run: xvfb-run -s "-ac -screen 0 1280x1024x24" npm run test-render
-      - uses: actions/upload-artifact@v2
-        if: always()
-        with:
-          name: index.html
-          path: test/integration/render-tests/index.html

build/generate-query-test-fixtures.ts

@@ -1,8 +1,12 @@
-import path from 'path';
+import path, {dirname} from 'path';
 import fs from 'fs';
 import glob from 'glob';
 import localizeURLs from '../test/integration/lib/localize-urls';
+import {fileURLToPath} from 'url';
+import {createRequire} from 'module';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const requireFn = createRequire(import.meta.url);
 const OUTPUT_FILE = 'fixtures.json';
 const rootFixturePath = 'test/integration/query/';
 const suitePath = 'tests';
@@ -50,7 +54,7 @@ function generateFixtureJson(rootDirectory: string, suiteDirectory: string, outp
                 throw new Error(`${extension} is incompatible , file path ${fixturePath}`);
             }
         } catch (e) {
-            console.log(`Error parsing file: ${fixturePath}`);
+            console.log(`Error parsing file: ${fixturePath} ${e.message}`);
             malformedTests[testName] = true;
         }
     }
@@ -101,8 +105,7 @@ function pngToBase64Str(filePath) {
 
 function processStyle(testName, style) {
     const clone = JSON.parse(JSON.stringify(style));
-
-    localizeURLs(clone, 7357);
+    localizeURLs(clone, 7357, path.join(__dirname, '../test/integration'), requireFn);
 
     clone.metadata = clone.metadata || {};
 
@@ -118,6 +121,5 @@ function processStyle(testName, style) {
 
     return clone;
 }
-
 // @ts-ignore
 await generateFixtureJson(rootFixturePath, suitePath);

test/integration/lib/localize-urls.ts

@@ -1,12 +1,8 @@
-import path, {dirname} from 'path';
+import path from 'path';
 import fs from 'fs';
-import {fileURLToPath} from 'url';
-import {createRequire} from 'module';
+import {StyleSpecification} from '../../../src/style-spec/types';
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const requireFn = createRequire(import.meta.url);
-
-export default function localizeURLs(style, port) {
+export default function localizeURLs(style: any, port: number, baseTestsDir: string, requireFn: any) {
     localizeStyleURLs(style, port);
     if (style.metadata && style.metadata.test && style.metadata.test.operations) {
         style.metadata.test.operations.forEach((op) => {
@@ -24,7 +20,7 @@ export default function localizeURLs(style, port) {
                     if (relativePath.startsWith('mapbox-gl-styles')) {
                         styleJSON = fs.readFileSync(path.join(path.dirname(requireFn.resolve('mapbox-gl-styles')), '..', relativePath));
                     } else {
-                        styleJSON = fs.readFileSync(path.join(__dirname, '../assets', relativePath));
+                        styleJSON = fs.readFileSync(path.join(baseTestsDir, 'assets', relativePath));
                     }
 
                 } catch (error) {
@@ -48,27 +44,27 @@ export default function localizeURLs(style, port) {
     }
 }
 
-function localizeURL(url, port) {
+function localizeURL(url: string, port: number) {
     return url.replace(/^local:\/\//, `http://localhost:${port}/`);
 }
 
-function localizeMapboxSpriteURL(url, port) {
+function localizeMapboxSpriteURL(url: string, port: number) {
     return url.replace(/^mapbox:\/\//, `http://localhost:${port}/`);
 }
 
-function localizeMapboxFontsURL(url, port) {
+function localizeMapboxFontsURL(url: string, port: number) {
     return url.replace(/^mapbox:\/\/fonts/, `http://localhost:${port}/glyphs`);
 }
 
-function localizeMapboxTilesURL(url, port) {
+function localizeMapboxTilesURL(url: string, port: number) {
     return url.replace(/^mapbox:\/\//, `http://localhost:${port}/tiles/`);
 }
 
-function localizeMapboxTilesetURL(url, port) {
+function localizeMapboxTilesetURL(url: string, port: number) {
     return url.replace(/^mapbox:\/\//, `http://localhost:${port}/tilesets/`);
 }
 
-function localizeSourceURLs(source, port) {
+function localizeSourceURLs(source: any, port: number) {
     for (const tile in source.tiles) {
         source.tiles[tile] = localizeMapboxTilesURL(source.tiles[tile], port);
         source.tiles[tile] = localizeURL(source.tiles[tile], port);
@@ -89,7 +85,7 @@ function localizeSourceURLs(source, port) {
     }
 }
 
-function localizeStyleURLs (style, port) {
+function localizeStyleURLs(style: StyleSpecification, port: number) {
     for (const source in style.sources) {
         localizeSourceURLs(style.sources[source], port);
     }