test: override -apple-system font with Roboto for visual testing

e2e/screenshots.ts

@@ -11,7 +11,19 @@ const dir = join('test', 'latest', distribution);
 // create dir if it doesn't exist
 mkdirp(dir);
 
+// Dark magic to override proprietary `-apple-system` font for visual regression
+// screenshots (to avoid false alarms when testing on non-macOS systems) 🧙
+const hackAppleSysFont =
+  "@font-face { font-family: -apple-system; src: local('Roboto'); }";
+
+const jsToInjectCSSHack = `
+var elem = document.createElement('style');
+elem.innerHTML = "${hackAppleSysFont}";
+document.body.appendChild(elem);
+`;
+
 export async function takeScreenshot(name: string) {
+  browser.executeScript(jsToInjectCSSHack);
   const config = await browser.getProcessedConfig();
   const deviceName = config['capabilities']['name'];
   const pngData = await browser.takeScreenshot();

package.json

@@ -37,7 +37,7 @@
     "test:coverage": "ng test --code-coverage",
     "test:ci": "ng test --watch=false --code-coverage --no-progress",
     "test:prettier": "prettier --list-different 'src/**/*.ts'",
-    "test:visual": "cd test && reg-cli latest approved diffs --report report.html --json report.json",
+    "test:visual": "cd test && reg-cli latest approved diffs --report report.html --json report.json --enableAntialias --thresholdRate 0.001",
     "fix:prettier": "prettier 'src/**/*.ts' --write",
     "fix:tslint": "tslint --fix --project . src/**/*.ts",
     "e2e": "npm run ionic:build && npm run e2e:test",