test: include reftests previewer with docs website (#1799)

Author: niklasvh

azure-pipelines.yml

@@ -34,6 +34,7 @@ jobs:
       inputs:
         PathtoPublish: 'build'
         artifactName: build
+
   - job: Test
     displayName: Tests
     pool:
@@ -54,25 +55,6 @@ jobs:
       displayName: Flow
     - script: npm run test:node
       displayName: Unit tests
-  - job: Build_docs
-    displayName: Build docs
-    pool:
-      vmImage: 'Ubuntu-16.04'
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: '10.x'
-      displayName: 'Install Node.js'
-    - task: Npm@0
-      inputs:
-        command: install
-    - script: npm run build && cd www && npm install && npm run build && cd ..
-      displayName: Build docs
-    - task: PublishBuildArtifacts@1
-      displayName: Upload docs website artifact
-      inputs:
-        PathtoPublish: 'www/public'
-        artifactName: docs
 
   - template: ci/browser-tests.yml
     parameters:
@@ -138,3 +120,53 @@ jobs:
       displayName: Windows Internet Explorer 11
       vmImage: 'vs2017-win2016'
       targetBrowser: IE_11
+
+  - job: Build_docs
+    displayName: Build docs
+    pool:
+      vmImage: 'Ubuntu-16.04'
+    dependsOn:
+      - Browser_Tests_Linux_Firefox_Stable
+      - Browser_Tests_Linux_Chrome_Stable
+      - Browser_Tests_OSX_Safari_IOS_9
+      - Browser_Tests_OSX_Safari_IOS_10
+      - Browser_Tests_OSX_Safari_IOS_11
+      - Browser_Tests_OSX_Safari_Stable
+      - Browser_Tests_Windows_IE9
+      - Browser_Tests_Windows_IE10
+      - Browser_Tests_Windows_IE11
+    steps:
+    - task: NodeTool@0
+      inputs:
+        versionSpec: '10.x'
+      displayName: 'Install Node.js'
+    - task: Npm@0
+      inputs:
+        command: install
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download test results'
+      inputs:
+        artifactName: ReftestResults
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - task: DownloadBuildArtifacts@0
+      displayName: 'Download dist'
+      inputs:
+        artifactName: dist
+        downloadPath: $(System.DefaultWorkingDirectory)
+    - script: cp -R tests/reftests www/static/tests/reftests && cp -R tests/assets www/static/tests/assets && cp -R ReftestResults ./www/static/results
+      displayName: Copy reftests to docs website
+    - script: cp -R dist ./www/static/dist
+      displayName: Copy dist to docs website
+    - script: npm run build:reftest-result-list www/static/results/metadata www/src/results.json
+      displayName: Create reftest result index
+    - script: npm run build:reftest-preview
+      displayName: Create reftest previewer
+    - script: rm -rf www/static/results/metadata
+      displayName: Clean metadata folder
+    - script: npm run build && cd www && npm install && npm run build && cd ..
+      displayName: Build docs
+    - task: PublishBuildArtifacts@1
+      displayName: Upload docs website artifact
+      inputs:
+        PathtoPublish: 'www/public'
+        artifactName: docs

configs/base.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+        "resolveJsonModule": true
+    }
+}

configs/preview.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./base",
+    "include": [
+        "../www/src/preview.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
+

configs/scripts.json

@@ -0,0 +1,10 @@
+{
+    "extends": "./base",
+    "include": [
+        "scripts/**/*.ts"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}
+

karma.js

@@ -16,9 +16,10 @@ const filenamifyUrl = require('filenamify-url');
 
 const mkdirp = require('mkdirp');
 const screenshotFolder = './tmp/reftests';
+const metadataFolder = './tmp/reftests/metadata';
 
 mkdirp.sync(path.resolve(__dirname, screenshotFolder));
-
+mkdirp.sync(path.resolve(__dirname, metadataFolder));
 
 const CORS_PORT = 8081;
 const corsApp = express();
@@ -65,9 +66,10 @@ const writeScreenshot = (buffer, body) => {
     const filename = `${filenamifyUrl(
         body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''),
         {replacement: '-'}
-    )}!${[process.env.TARGET_BROWSER, body.platform.name, body.platform.version].join('-')}.png`;
+    )}!${[process.env.TARGET_BROWSER, body.platform.name, body.platform.version].join('-')}`;
 
-    fs.writeFileSync(path.resolve(__dirname, screenshotFolder, filename), buffer);
+    fs.writeFileSync(path.resolve(__dirname, screenshotFolder, `${filename}.png`), buffer);
+    return filename;
 };
 
 app.post('/screenshot', (req, res) => {
@@ -76,33 +78,16 @@ app.post('/screenshot', (req, res) => {
     }
 
     const buffer = new Buffer(req.body.screenshot.substring(prefix.length), 'base64');
-    writeScreenshot(buffer, req.body);
-    return res.sendStatus(200);
-});
-
-const chunks = {};
-
-app.post('/screenshot/chunk', (req, res) => {
-    if (!req.body || !req.body.screenshot) {
-        return res.sendStatus(400);
-    }
-
-    const key = `${req.body.platform.name}-${req.body.platform.version}-${req.body.test
-        .replace(/^\/tests\/reftests\//, '')
-        .replace(/\.html$/, '')}`;
-    if (!Array.isArray(chunks[key])) {
-        chunks[key] = Array.from(Array(req.body.totalCount));
-    }
-
-    chunks[key][req.body.part] = req.body.screenshot;
-
-    if (chunks[key].every(s => typeof s === 'string')) {
-        const str = chunks[key].reduce((acc, s) => acc + s, '');
-        const buffer = new Buffer(str.substring(prefix.length), 'base64');
-        delete chunks[key];
-        writeScreenshot(buffer, req.body);
-    }
-
+    const filename = writeScreenshot(buffer, req.body);
+    fs.writeFileSync(path.resolve(__dirname, metadataFolder, `${filename}.json`), JSON.stringify({
+        windowWidth: req.body.windowWidth,
+        windowHeight: req.body.windowHeight,
+        platform: req.body.platform,
+        devicePixelRatio: req.body.devicePixelRatio,
+        test: req.body.test,
+        id: process.env.TARGET_BROWSER,
+        screenshot: filename
+    }));
     return res.sendStatus(200);
 });
 

package-lock.json

@@ -12,7 +12,7 @@
     "url": "https://hertzen.com"
   },
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=8.0.0"
   },
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-flow": "^7.0.0",
+    "@types/node": "^11.13.2",
     "appium-ios-simulator": "^3.10.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
@@ -65,6 +66,9 @@
     "serve-index": "^1.9.1",
     "slash": "1.0.0",
     "standard-version": "^5.0.2",
+    "ts-loader": "^5.3.3",
+    "ts-node": "^8.0.3",
+    "typescript": "^3.4.3",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0"
@@ -73,6 +77,8 @@
     "build": "rimraf dist/ && node scripts/create-reftest-list && npm run build:npm && npm run build:browser",
     "build:npm": "babel src/ -d dist/npm/ --plugins=dev-expression && replace-in-file __VERSION__ '\"$npm_package_version\"' dist/npm/index.js",
     "build:browser": "webpack",
+    "build:reftest-result-list": "ts-node scripts/create-reftest-result-list.ts",
+    "build:reftest-preview": "webpack --config www/webpack.config.js",
     "release": "standard-version",
     "rollup": "rollup -c",
     "format": "prettier --single-quote --no-bracket-spacing --tab-width 4 --print-width 100 --write \"{src,www/src,tests,scripts}/**/*.js\"",

package.json

@@ -0,0 +1,44 @@
+import {readdirSync, readFileSync, writeFileSync} from 'fs';
+import {resolve} from 'path';
+
+if (process.argv.length <= 2){
+    console.log('No metadata path provided');
+    process.exit(1);
+}
+
+if (process.argv.length <= 3){
+    console.log('No output file given');
+    process.exit(1);
+}
+
+const path = resolve(__dirname, '../', process.argv[2]);
+const files = readdirSync(path);
+
+interface RefTestMetadata {
+
+}
+
+interface RefTestSingleMetadata extends RefTestMetadata{
+    test: string;
+}
+
+interface RefTestResults {
+    [key: string]: Array<RefTestMetadata>
+}
+
+const result: RefTestResults = files.reduce((result: RefTestResults, file) => {
+    const json: RefTestSingleMetadata = JSON.parse(readFileSync(resolve(__dirname, path, file)).toString());
+    if (!result[json.test]) {
+        result[json.test] = [];
+    }
+
+    result[json.test].push(json);
+    delete json.test;
+
+    return result;
+}, {});
+
+const output = resolve(__dirname, '../', process.argv[3]);
+writeFileSync(output, JSON.stringify(result));
+
+console.log(`Wrote file ${output}`);

scripts/create-reftest-result-list.ts

@@ -369,7 +369,10 @@ const assertPath = (result, expected, desc) => {
                                             platform: {
                                                 name: platform.name,
                                                 version: platform.version
-                                            }
+                                            },
+                                            devicePixelRatio: window.devicePixelRatio || 1,
+                                            windowWidth: window.innerWidth,
+                                            windowHeight: window.innerHeight
                                         }));
                                     });