Using template for render tests

CartoDB · Mar 7, 2018 · fb47b0c · fb47b0c
1 parent 12d278f
commit fb47b0c
Show file tree

Hide file tree

Showing 14 changed files with 182 additions and 123 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ dist/
 docs/all
 docs/public
 node_modules/
+test/integration/render/**/*.html
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.9",
+    "lodash.template": "^4.4.0",
     "mocha": "^5.0.0",
     "sloc": "^0.2.0",
     "uglifyjs-webpack-plugin": "^1.1.8",
@@ -58,7 +59,7 @@
     "loc": "sloc src/ examples/",
     "publish": "git checkout gh-pages && git merge master && npm run build && npm run build-doc && git commit -a -m \"Auto generated gh-pages\" && git push && git checkout master",
     "test:render:clean": "rm -rf test/integration/render/**/*_out.png",
-    "test:render:prepare": "node test/integration/get-references.js ",
+    "test:render:prepare": "node test/integration/render.prepare.js ",
     "test:render": "mocha test/integration/render.test.js",
     "test:acceptance:clean": "rm -rf test/acceptance/reference/**/*_out.png",
     "test:acceptance:prepare": "node test/acceptance/get-references.js ",

diff --git a/test/integration/README.md b/test/integration/README.md
@@ -0,0 +1,9 @@
+# Integration tests
+
+## Generating the references
+
+    yarn test:render:prepare
+
+## Running the tests
+
+    yarn test:render
diff --git a/test/integration/get-references.js b/test/integration/get-references.js
diff --git a/test/integration/render.html.tpl b/test/integration/render.html.tpl
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="<%- mapboxglcss %>" rel="stylesheet" />
+        <script src="<%- cartogl %>"></script>
+        <script src="<%- mapboxgl %>"></script>
+        <style>
+            body { margin: 0; padding: 0; }
+            #map { position: absolute; height: 100%; width: 100%; }
+        </style>
+    </head>
+    <body>
+        <div id='map'></div>
+    </body>
+    <script src="<%- file %>"></script>
+</html>
diff --git a/test/integration/render.prepare.js b/test/integration/render.prepare.js
@@ -0,0 +1,19 @@
+const exquisite = require('exquisite-sst');
+const util = require('./util');
+
+let options = util.loadOptions();
+
+const files = util.loadFiles();
+const renderTemplate = util.loadTemplate();
+
+files.reduce((promise, file) => {
+    return promise.then(() => takeReference(file));
+}, Promise.resolve());
+
+function takeReference (file) {
+    console.log(`Taking reference from ${util.getName(file)}`);
+    util.writeTemplate(file, renderTemplate);
+    options.url = `file://${util.getHTML(file)}`;
+    options.output = `${util.getPNG(file)}`;
+    return exquisite.getReference(options);
+}
diff --git a/test/integration/render.test.js b/test/integration/render.test.js
@@ -1,34 +1,24 @@
-const path = require('path');
-const glob = require('glob');
-const chai = require('chai');
 const exquisite = require('exquisite-sst');
+const chai = require('chai');
+const util = require('./util');
 
 chai.use(require('chai-as-promised'));
 
-let options = {
-    delay: 4000,
-    viewportWidth: 800,
-    viewportHeight: 600,
-    headless: process.platform === 'linux'
-    // waitForFn: () => window.mapLoaded
-};
+let options = util.loadOptions();
 
-const renderDir = path.join(__dirname, 'render');
+const files = util.loadFiles();
+const renderTemplate = util.loadTemplate();
 
 describe('Render tests:', () => {
-    const files = glob.sync(path.join(renderDir, '**', 'test.html'));
     files.forEach(test);
 });
 
 function test (file) {
-    it(testName(file), () => {
-        options.url = `file://${file}`;
-        options.input = `${file.replace('.html', '.png')}`;
-        options.output = `${file.replace('.html', '_out.png')}`;
+    it(util.getName(file), () => {
+        util.writeTemplate(file, renderTemplate);
+        options.url = `file://${util.getHTML(file)}`;
+        options.input = `${util.getPNG(file)}`;
+        options.output = `${util.getOutPNG(file)}`;
         return chai.expect(exquisite.test(options)).to.eventually.be.true;
-    }).timeout(5000);
-}
-
-function testName (file) {
-    return file.substr(renderDir.length, file.length - renderDir.length - 10);
+    }).timeout(10000);
 }
diff --git a/test/integration/render/lines/default/test.html b/test/integration/render/lines/default/test.html
diff --git a/test/integration/render/lines/default/test.js b/test/integration/render/lines/default/test.js
@@ -0,0 +1,19 @@
+/* global mapboxgl carto */
+
+carto.setDefaultAuth({
+    user: 'arroyo-carto',
+    apiKey: 'YOUR_API_KEY'
+});
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    style: { version: 8, sources: {}, layers: [] },
+    center: [50, 30],
+    zoom: 2
+});
+
+const source = new carto.source.Dataset('route');
+const style = new carto.Style();
+const layer = new carto.Layer('layer', source, style);
+
+layer.addTo(map);
diff --git a/test/integration/render/lines/route/test.html b/test/integration/render/lines/route/test.html
diff --git a/test/integration/render/lines/route/test.js b/test/integration/render/lines/route/test.js
@@ -0,0 +1,22 @@
+/* global mapboxgl carto */
+
+carto.setDefaultAuth({
+    user: 'arroyo-carto',
+    apiKey: 'YOUR_API_KEY'
+});
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    style: { version: 8, sources: {}, layers: [] },
+    center: [50, 30],
+    zoom: 2
+});
+
+const source = new carto.source.Dataset('route');
+const style = new carto.Style(`
+  width: 10,
+  color: rgba(0,1,1,1)
+`);
+const layer = new carto.Layer('layer', source, style);
+
+layer.addTo(map);
diff --git a/test/integration/util.js b/test/integration/util.js
@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const template = require('lodash.template');
+
+const fileName = 'test.js';
+const renderDir = path.join(__dirname, 'render');
+
+function getHTML (file) {
+    return file.replace('.js', '.html');
+}
+
+function getPNG (file) {
+    return file.replace('.js', '.png');
+}
+
+function getOutPNG (file) {
+    return file.replace('.js', '_out.png');
+}
+
+function getName (file) {
+    return file.substr(
+        renderDir.length,
+        file.length - renderDir.length - fileName.length - 1
+    );
+}
+
+function loadOptions () {
+    return {
+        delay: 8000,
+        viewportWidth: 800,
+        viewportHeight: 600,
+        headless: process.platform === 'linux'
+        // waitForFn: () => window.mapLoaded
+    };
+}
+
+function loadFiles () {
+    return glob.sync(path.join(renderDir, '**', fileName));
+}
+
+function loadTemplate () {
+    return template(fs.readFileSync(path.join(__dirname, 'render.html.tpl')), 'utf8');
+}
+
+function writeTemplate (file, renderTemplate) {
+    const mainDir = path.resolve(__dirname, '..', '..');
+    fs.writeFileSync(`${getHTML(file)}`, renderTemplate({
+        file: file,
+        cartogl: path.resolve(mainDir, 'dist', 'carto-gl.js'),
+        mapboxgl: path.resolve(mainDir, 'vendor', 'mapbox-gl-dev.js'),
+        mapboxglcss: path.resolve(mainDir, 'vendor', 'mapbox-gl-dev.css')
+    }));
+}
+
+module.exports = {
+    getHTML: getHTML,
+    getPNG: getPNG,
+    getOutPNG: getOutPNG,
+    getName: getName,
+    loadFiles: loadFiles,
+    loadOptions: loadOptions,
+    loadTemplate: loadTemplate,
+    writeTemplate: writeTemplate,
+};
diff --git a/.../integration/render/mapbox-gl-v0.42.2.css → vendor/mapbox-gl-dev.css b/.../integration/render/mapbox-gl-v0.42.2.css → vendor/mapbox-gl-dev.css
diff --git a/yarn.lock b/yarn.lock
@@ -2999,10 +2999,27 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+
 lodash.memoize@~3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
 
+lodash.template@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
 lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"