Add examples image check

Makefile

@@ -201,7 +201,6 @@ examples-hosted-apps: .build/gmf-apps.timestamp
 
 .build/gmf-apps.timestamp: $(GMF_APPS_ALL_SRC_FILES) $(WEBPACK_CONFIG_FILES) \
 		.build/node_modules.timestamp \
-		.build/build-dll.timestamp \
 		.build/examples-hosted/dist \
 		.build/examples-hosted-gmf-apps-deps.timestamp
 	npm run build-gmf-apps
@@ -224,7 +223,9 @@ gh-pages: .build/python-venv.timestamp
 	touch $@
 
 .build/examples-hosted/dist: .build/build-dll.timestamp
+	mkdir -p .build/examples-hosted/
 	cp -r dist .build/examples-hosted/
+	touch $@
 
 .build/examples-hosted-gmf-apps-deps.timestamp: \
 		$(addprefix contribs/gmf/build/gmf-, $(addsuffix .json, $(LANGUAGES))) \
@@ -261,41 +262,38 @@ gh-pages: .build/python-venv.timestamp
 			'An example application for editing an object.' \
 		$< $(GMF_EXAMPLES_HTML_FILES) > $@
 
-.build/test-check-example/%.check.timestamp: test/check-example/%.html \
-		.build/node_modules.timestamp \
-		buildtools/check-example.js \
-		.build/httpserver.timestamp
-	mkdir -p $(dir $@)
-	node buildtools/check-example.js $<
-	touch $@
-
 .build/httpserver.timestamp:
 	python3 -m http.server 3000 &
 	touch $@
 
 .build/%.check.timestamp: .build/examples-ngeo.timestamp \
 		.build/node_modules.timestamp \
-		buildtools/check-example.js \
 		.build/httpserver.timestamp
 	mkdir -p $(dir $@)
 	node buildtools/check-example.js .build/examples-hosted/$*.html
-	#[ `compare -metric RMSE $<.png example/$*-ref.png /$<-diff.png 2>&1 | sed 's/^.*(\(.*\))/\1/g'` \< 0.05 ]
+	[ "$$(gm compare -metric RMSE -highlight-style xor .build/examples-hosted/$*.html.png \
+	examples/$*-ref.png -file .build/examples-hosted/$*.html.png-diff.png 2>&1 | \
+	tail --lines=1 | sed 's/.* \([0-9\.]\+\) .*/\1/g')" \< 0.005 ]
 	touch $@
 
 .build/contribs/gmf/%.check.timestamp: .build/examples-gmf.timestamp \
 		.build/examples-hosted/contribs/gmf/%.js \
 		.build/node_modules.timestamp \
-		buildtools/check-example.js \
 		.build/httpserver.timestamp
 	mkdir -p $(dir $@)
 	node buildtools/check-example.js .build/examples-hosted/contribs/gmf/$*.html
+	[ "$$(gm compare -metric RMSE -highlight-style xor .build/examples-hosted/contribs/gmf/$*.html.png \
+	contribs/gmf/examples/$*-ref.png -file .build/examples-hosted/contribs/gmf/$*-diff.png 2>&1 | \
+	tail --lines=1 | sed 's/.* \([0-9\.]\+\) .*/\1/g')" \< 0.005 ]
 	touch $@
 
 .build/contribs/gmf/apps/%.check.timestamp: .build/gmf-apps.timestamp \
-		buildtools/check-example.js \
 		.build/httpserver.timestamp
 	mkdir -p $(dir $@)
 	node buildtools/check-example.js .build/examples-hosted/contribs/gmf/apps/$*.html
+	[ "$$(gm compare -metric RMSE -highlight-style xor .build/examples-hosted/contribs/gmf/apps/$*.html.png \
+	contribs/gmf/apps/$*-ref.png -file .build/examples-hosted/contribs/gmf/apps/$*-diff.png 2>&1 | \
+	tail --lines=1 | sed 's/.* \([0-9\.]\+\) .*/\1/g')" \< 0.005 ]
 	touch $@
 
 .build/node_modules.timestamp: package.json
@@ -437,6 +435,7 @@ clean:
 
 .PHONY: cleanall
 cleanall: clean
+	rm -rf dist
 	rm -rf .build
 	rm -rf node_modules
 	rm -f .tx/config

buildtools/check-example.js

@@ -1,14 +1,17 @@
 'use strict';
 
 const path = require('path');
+const fs = require('fs');
 const puppeteer = require('puppeteer');
 
 const arg = process.argv[2];
-const screenshotPath = `${arg}.png`;
-const url = `http://localhost:3000/${arg}`;
 if (!arg) {
   throw new Error('Please provide a HTML file as the first argument');
 }
+const screenshotPath = `${arg}.png`;
+const url = `http://localhost:3000/${arg}`;
+
+const OSMImage = fs.readFileSync(path.resolve(__dirname, 'osm.png'));
 
 const requestsURL = new Set();
 const start = new Date();
@@ -19,71 +22,87 @@ function loaded(page, browser) {
   }
   timeout = setTimeout(() => {
     if (requestsURL.size) {
-      console.log('Pending requests:');
-      requestsURL.forEach((request) => console.log(request));
-      process.exit(2);
+      // @ts-ignore
+      if ((new Date() - start) > 60000) {
+        // The page take more than 60s. to load ...
+        console.log('Pending requests:');
+        requestsURL.forEach((request) => console.log(request));
+        process.exit(2);
+      } else {
+        timeout = undefined;
+        loaded(page, browser);
+      }
     } else {
       // @ts-ignore
-      console.log(`Check finished in ${new Date() - start} seconds`);
+      console.log(`Check finished in ${(new Date() - start) / 1000} seconds`);
       page.screenshot({
         path: screenshotPath
       }).then(() => {
         console.log(`Screenshot saved at: ${screenshotPath}`);
         browser.close();
-      }, (e) => {
+      }, e => {
         console.log(`Screenshot error: ${e}`);
         process.exit(2);
       });
     }
-  }, 2000);
+  }, 500);
 }
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.setViewport({width: 1920, height: 1080});
-  page.on('load', () => console.log(`Page loaded: ${page.url()}`));
-  page.on('pageerror', (e) => {
+  await page.setRequestInterception(true);
+  page.on('pageerror', e => {
     console.log('Page error');
     console.log(e);
     process.exit(2);
   });
-  page.on('dialog', (e) => {
+  page.on('dialog', e => {
     console.log('Unexpected alert message');
     console.log(e);
     process.exit(2);
   });
-  page.on('request', (request) => {
+  page.on('request', request => {
     const url = request.url();
-    requestsURL.add(url);
     loaded(page, browser);
+    if (url.startsWith('http://localhost:3000/') ||
+        url.startsWith('https://geomapfish-demo-2-5.camptocamp.com/') ||
+        url.startsWith('https://wms.geo.admin.ch/')) {
+      requestsURL.add(url);
+      request.continue();
+    } else if (url.includes('tile.openstreetmap.org')) {
+      request.respond({
+        status: 200,
+        headers: {
+          'content-type': 'image/png',
+        },
+        body: OSMImage,
+      });
+    } else {
+      request.abort();
+    }
   });
-  page.on('requestfinished', (request) => {
+  page.on('requestfinished', request => {
     const url = request.url();
     requestsURL.delete(url);
     loaded(page, browser);
   });
-  page.on('requestfailed', (request) => {
+  page.on('requestfailed', request => {
     const url = request.url();
-    requestsURL.delete(url);
-    if (url.includes('tile.openstreetmap.org')) {
-      console.warn('Ignoring resource error from OpenStreetMap');
-    } else if (url.includes('https://maps.googleapis.com/maps/api/js')) {
-      console.warn('Ignoring resource error from Google');
-    } else if (url.includes('https://csi.gstatic.com/')) {
-      console.warn('Ignoring resource error from Google static');
-    } else if (url.includes('cdn.polyfill.io')) {
-      console.warn('Ignoring resource error from polyfill.io');
-    } else {
+    if (url.startsWith('http://localhost:3000/') ||
+        url.startsWith('https://geomapfish-demo-2-5.camptocamp.com/') ||
+        url.startsWith('https://wms.geo.admin.ch/')) {
       console.log(`Request failed on: ${url}`);
       process.exit(2);
     }
     loaded(page, browser);
   });
-  page.on('console', (message) => {
+  page.on('console', message => {
     const type = message.type();
     const location = message.location();
     if (type !== 'log' && type !== 'debug' && type !== 'info' && type !== 'warning' &&
-      location.url != 'http://localhost:3000/.build/examples-hosted/dist/vendor.js?dev'
+      !location.url.startsWith('http://localhost:3000/.build/examples-hosted/dist/vendor.js') &&
+      location.url.startsWith('http://localhost:3000/')
     ) {
       console.log(`Console ${type}`);
       console.log(`On: ${location.url} ${location.lineNumber}:${location.columnNumber}.`);

contribs/gmf/examples/displayquerygrid.html

@@ -6,7 +6,6 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 

contribs/gmf/examples/displayquerygrid.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import appURL from './url.js';
 import './displayquerygrid.css';
+import './gmf-hidden.inc.css';
 import gmfDatasourceManager from 'gmf/datasource/Manager.js';
 
 import gmfLayertreeComponent from 'gmf/layertree/component.js';

contribs/gmf/examples/displayquerywindow.html

@@ -6,7 +6,6 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 

contribs/gmf/examples/displayquerywindow.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import appURL from './url.js';
 import './displayquerywindow.css';
+import './gmf-hidden.inc.css';
 import gmfDatasourceManager from 'gmf/datasource/Manager.js';
 
 import gmfLayertreeComponent from 'gmf/layertree/component.js';

contribs/gmf/examples/editfeatureselector.html

@@ -6,7 +6,6 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
-    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
     <gmf-map gmf-map-map="ctrl.map"></gmf-map>

contribs/gmf/examples/editfeatureselector.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import appURL from './url.js';
 import './editfeatureselector.css';
+import './gmf-hidden.inc.css';
 import 'bootstrap/js/src/tooltip.js';
 import gmfAuthenticationModule from 'gmf/authentication/module.js';
 

contribs/gmf/examples/print.html

@@ -6,7 +6,6 @@
     <meta name="viewport"
           content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <link href="./gmf-hidden.inc.css" rel="stylesheet" />
   </head>
   <body ng-controller="MainController as ctrl">
 

contribs/gmf/examples/print.js

@@ -1,6 +1,7 @@
 import angular from 'angular';
 import appURL from './url.js';
 import './print.css';
+import './gmf-hidden.inc.css';
 import gmfLayertreeComponent from 'gmf/layertree/component.js';
 
 import gmfMapComponent from 'gmf/map/component.js';