feat(screenshot): update to use stencil e2e screenshot testing

core/package.json

@@ -29,11 +29,12 @@
     "ionicons": "4.4.3"
   },
   "devDependencies": {
-    "@stencil/core": "0.13.0-11",
+    "@stencil/core": "0.13.0-13",
     "@stencil/dev-server": "latest",
     "@stencil/sass": "0.1.0",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.1",
+    "@types/puppeteer": "1.6.4",
     "@types/swiper": "4.2.1",
     "agadoo": "^1.0.0",
     "autoprefixer": "^9.0.2",
@@ -41,18 +42,16 @@
     "clean-css-cli": "^4.1.11",
     "fs-extra": "^7.0.0",
     "jest": "23.5.0",
-    "mocha": "^4.0.1",
     "np": "^3.0.4",
+    "pixelmatch": "4.0.2",
     "puppeteer": "1.7.0",
-    "selenium-webdriver": "^3.6.0",
     "stylelint": "^9.4.0",
     "stylelint-order": "^0.8.1",
     "swiper": "4.4.1",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.19",
     "tslint-react": "^3.6.0",
-    "typescript": "^2.9.2",
+    "typescript": "^2.9.2"
-    "yargs": "^12.0.1"
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --docs",
@@ -65,8 +64,6 @@
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "node-sass --output ./css src/css --output-style compressed",
     "dev": "npm run build.css && stencil build --dev --watch --serve",
-    "e2e": "node ./scripts/e2e",
-    "e2e-debug": "node --inspect --debug-brk ./scripts/e2e",
     "lint": "npm run lint.ts && npm run lint.sass",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix",
     "lint.sass": "stylelint 'src/**/*.scss'",
@@ -74,10 +71,11 @@
     "lint.ts": "tslint --project .",
     "lint.ts.fix": "tslint --project . --fix",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
-    "snapshot": "node ./scripts/e2e --snapshot",
     "test": "stencil test --spec",
     "test.e2e": "stencil test --e2e",
-    "test.screenshot": "stencil test --e2e --screenshot --compare",
+    "test.screenshot": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/local.js",
+    "test.screenshot.ci": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci",
+    "test.watch": "jest --watch --no-cache",
     "theme-app-build": "stencil build --dev --config scripts/theme-builder/stencil.config.js",
     "theme-builder": "sd concurrent \"npm run theme-app-build\" \"stencil build --dev --watch\" \"stencil-dev-server\" \"npm run theme-server\" ",
     "theme-builder:dev": "sd concurrent \"npm run theme-app-build -- --watch\" \"stencil build --dev --watch\" \"stencil-dev-server\" \"npm run theme-server\" ",

core/screenshot/.gitignore

@@ -0,0 +1,7 @@
+# only master screenshot data should be committed
+images
+local
+compare.html
+
+# temporarily ignoring master
+master

core/scripts/screenshot/ci.js

@@ -0,0 +1,16 @@
+const LocalScreenshotConnector = require('./local');
+const fs = require('fs');
+const path = require('path');
+
+
+class CIScreenshotConnector extends LocalScreenshotConnector {
+
+  async publishBuild() {
+    const timespan = this.logger.createTimeSpan(`publishing build started`);
+
+    timespan.finish(`publishing build finished`);
+  }
+
+}
+
+module.exports = CIScreenshotConnector;

core/scripts/screenshot/local.js

@@ -0,0 +1,33 @@
+const ScreenshotConnector = require('@stencil/core/screenshot/screenshot-connector');
+const fs = require('fs');
+const path = require('path');
+
+
+class LocalScreenshotConnector extends ScreenshotConnector {
+
+  async pullMasterImages() {
+    const timespan = this.logger.createTimeSpan(`pull master screenshot images started`);
+
+    const masterFilePaths = (fs.readdirSync(this.masterDir)).map(f => path.join(this.masterDir, f)).filter(f => f.endsWith('.json'));
+    const masterScreenshots = masterFilePaths.map(f => JSON.parse(fs.readFileSync(f, 'utf-8')));
+    const masterImageNames = masterScreenshots.map(s => s.image);
+    const missingImages = masterImageNames.filter(masterImageName => {
+      try {
+        const masterImagePath = path.join(this.imagesDir, masterImageName);
+        fs.accessSync(masterImagePath);
+        return false;
+      } catch (e) {}
+      return true
+    });
+
+    missingImages.forEach(missingImage => {
+      const url = missingImage;
+      this.logger.info(`downloading: ${url}`);
+    });
+
+    timespan.finish(`pull master screenshot images finished`);
+  }
+
+}
+
+module.exports = LocalScreenshotConnector;

core/stencil.config.js

@@ -61,9 +61,27 @@ exports.config = {
     }
   ],
   testing: {
+    allowableMismatchedPixels: 200,
+    pixelmatchThreshold: 0.1,
     emulate: [
-      { device: 'iPhone X' },
+      {
-      { device: 'Pixel 2' }
+        userAgent: 'iPhone',
+        width: 400,
+        height: 800,
+        deviceScaleFactor: 2,
+        isMobile: true,
+        hasTouch: true,
+        isLandscape: false
+      },
+      {
+        userAgent: 'Android',
+        width: 400,
+        height: 800,
+        deviceScaleFactor: 2,
+        isMobile: true,
+        hasTouch: true,
+        isLandscape: false
+      }
     ]
   },
   copy: [{ src: '**/*.scss' }],