Add basic acceptance suite

CartoDB · Feb 20, 2018 · 699aa2f · 699aa2f
1 parent e9cf824
commit 699aa2f
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 4 deletions.
diff --git a/test/acceptance/README.md b/test/acceptance/README.md
@@ -0,0 +1,16 @@
+# Acceptance tests
+
+The idea of this tests is to automatically test the entire stack, including the library, the renderer and the integration with the backend.
+
+This is done through screenshot testing, comparing `test-cases` screenshots against reference images stored in the `references` folder.
+
+## Generating the references
+
+    yarn test:acceptance:prepare
+
+## Running the tests
+
+    yarn test:acceptance
+
+
+This will generate a `<filename>_out.png` for every test case so you can visually compare the results if the test fails.
diff --git a/test/acceptance/get-references.js b/test/acceptance/get-references.js
@@ -24,7 +24,6 @@ function getReferences(folder) {
         const filepath = path.resolve(__dirname, `./test-cases/${folder}/${file}`);
         if (file.endsWith('.html') && !BLACKLIST_FILES.includes(file)) {
             console.log(`Taking reference from ${file}`);
-            console.log(`$(npm bin)/exquisite-sst ${HEADLESS_FLAG} --reference --url file://${filepath} --output ${OUTPUT_DIR}/${folder}/${file.replace('.html', '.png')} --delay ${DELAY}`)
             execSync(`$(npm bin)/exquisite-sst ${HEADLESS_FLAG} --reference --url file://${filepath} --output ${OUTPUT_DIR}/${folder}/${file.replace('.html', '.png')} --delay ${DELAY}`);
         }
     });

diff --git a/test/acceptance/index.test.js b/test/acceptance/index.test.js
@@ -6,15 +6,15 @@ chai.use(require('chai-as-promised'));
 const expect = chai.expect;
 
 const REFERENCES_FOLDER = 'references';
-const DELAY = 8000;
+const DELAY = 3000;
 // Headless chrome with GPU only works with linux
 const HEADLESS = (process.platform === 'linux');
 const references = _flatten(_getReferences(REFERENCES_FOLDER));
 
 
 describe('Screenshot tests:', () => {
     references.forEach(test);
-    // test({ folder: 'styling', file: 'rampCategoryAuto' });
+    // test({ folder: 'styling', file: 'rampCategoryAuto' }); // Running a single test
 });
 
 // Wrapper to perform a single test.
@@ -25,7 +25,7 @@ function test({ folder, file }) {
         const output = path.resolve(__dirname, `./${REFERENCES_FOLDER}/${folder}/${file}_out.png`);
         const filepath = path.resolve(__dirname, `./test-cases/${folder}/${file}.html`);
         const URL = `file://${filepath}`;
-        return expect(exquisite.test({ input, output, url: URL, delay: DELAY, threshold: 0.5, headless: HEADLESS })).to.eventually.be.true;
+        return expect(exquisite.test({ input, output, url: URL, delay: DELAY, threshold: 0.1, headless: HEADLESS })).to.eventually.be.true;
     });
 }
 

diff --git a/test/acceptance/references/basic/lines.png b/test/acceptance/references/basic/lines.png
diff --git a/test/acceptance/references/basic/polygons.png b/test/acceptance/references/basic/polygons.png
diff --git a/test/acceptance/test-cases/basic/lines.html b/test/acceptance/test-cases/basic/lines.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../hide-attribution.js"></script>
+    <!-- Include CARTO GL JS -->
+    <script src="../../../../dist/carto-gl.js"></script>
+    <!-- Include Mapbox GL JS -->
+    <script src="../../../../vendor/mapbox-gl-dev.js"></script>
+    <!-- Include Mapbox GL CSS -->
+    <link href='../mapbox-gl-v0.42.2.css' rel='stylesheet' />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+</body>
+<script>
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: { "version": 8, "sources": {}, "layers": [] },
+        center: [-20.061035156250004, 33.211116472416855],
+        zoom: 4,
+    });
+
+    const auth = {
+        user: 'cartogl',
+        apiKey: 'YOUR_API_KEY'
+    };
+
+    carto.setDefaultAuth(auth);
+
+    const source = new carto.source.SQL('SELECT ST_Multi(the_geom_webmercator) as the_geom_webmercator, ST_Multi(the_geom) as the_geom FROM lines_0', auth);
+    const style = new carto.Style();
+    const layer = new carto.Layer('myCartoLayer', source, style);
+    layer.addTo(map);
+</script>
+
+</html>
diff --git a/test/acceptance/test-cases/basic/polygons.html b/test/acceptance/test-cases/basic/polygons.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../hide-attribution.js"></script>
+    <!-- Include CARTO GL JS -->
+    <script src="../../../../dist/carto-gl.js"></script>
+    <!-- Include Mapbox GL JS -->
+    <script src="../../../../vendor/mapbox-gl-dev.js"></script>
+    <!-- Include Mapbox GL CSS -->
+    <link href='../mapbox-gl-v0.42.2.css' rel='stylesheet' />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+</body>
+<script>
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: { "version": 8, "sources": {}, "layers": [] },
+        center: [-20.061035156250004, 33.211116472416855],
+        zoom: 4,
+    });
+
+    const auth = {
+        user: 'cartogl',
+        apiKey: 'YOUR_API_KEY'
+    };
+
+    carto.setDefaultAuth(auth);
+
+    const source = new carto.source.SQL('SELECT ST_Multi(the_geom_webmercator) as the_geom_webmercator, ST_Multi(the_geom) as the_geom FROM polygons_0', auth);
+    const style = new carto.Style();
+    const layer = new carto.Layer('myCartoLayer', source, style);
+    layer.addTo(map);
+</script>
+
+</html>