ci(docs-infra): reduce flakyness

aio/package.json

@@ -31,7 +31,7 @@
     "postsetup-local": "yarn postsetup",
     "set-opensearch-url": "node --eval \"const sh = require('shelljs'); sh.set('-e'); sh.sed('-i', /PLACEHOLDER_URL/g, process.argv[1], 'dist/assets/opensearch.xml');\"",
     "test-pwa-score": "node scripts/test-pwa-score",
-    "test-pwa-score-localhost": "run-p --race \"~~http-server dist -p 4200 --silent\" \"test-pwa-score http://localhost:4200 {1}\" --",
+    "test-pwa-score-localhost": "run-p --race \"~~http-server dist -p 4200 --silent\" \"test-pwa-score http://localhost:4200 {1} {2}\" --",
     "example-e2e": "yarn example-check-local && node ./tools/examples/run-example-e2e",
     "example-lint": "tslint -c \"content/examples/tslint.json\" \"content/examples/**/*.ts\" -e \"content/examples/styleguide/**/*.avoid.ts\"",
     "example-use-local": "node tools/ng-packages-installer overwrite ./tools/examples/shared --debug",
@@ -136,7 +136,7 @@
     "karma-coverage-istanbul-reporter": "^1.3.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "lighthouse": "^2.5.0",
+    "lighthouse": "^3.2.1",
     "lodash": "^4.17.4",
     "lunr": "^2.1.0",
     "npm-run-all": "^4.1.3",
@@ -163,4 +163,4 @@
     "xregexp": "^4.0.0",
     "yargs": "^7.0.2"
   }
-}
+}

aio/scripts/test-pwa-score.js

@@ -11,13 +11,15 @@
  */
 
 // Imports
+const chromeLauncher = require('chrome-launcher');
 const lighthouse = require('lighthouse');
-const chromeLauncher = require('lighthouse/chrome-launcher');
 const printer = require('lighthouse/lighthouse-cli/printer');
-const config = require('lighthouse/lighthouse-core/config/default.js');
+const config = require('lighthouse/lighthouse-core/config/default-config.js');
+const logger = require('lighthouse-logger');
 
 // Constants
 const CHROME_LAUNCH_OPTS = {};
+const LIGHTHOUSE_FLAGS = {logLevel: 'info'};
 const SKIPPED_HTTPS_AUDITS = ['redirects-http'];
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
 
@@ -26,6 +28,7 @@ const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
 if (process.env.TRAVIS) {
   process.env.LIGHTHOUSE_CHROMIUM_PATH = process.env.CHROME_BIN;
   CHROME_LAUNCH_OPTS.chromeFlags = ['--no-sandbox'];
+  LIGHTHOUSE_FLAGS.logLevel = 'error';
 }
 
 // Run
@@ -42,18 +45,20 @@ function _main(args) {
     skipHttpsAudits(config);
   }
 
-  launchChromeAndRunLighthouse(url, {}, config).
+  logger.setLevel(LIGHTHOUSE_FLAGS.logLevel);
+
+  launchChromeAndRunLighthouse(url, LIGHTHOUSE_FLAGS, config).
     then(results => processResults(results, logFile)).
     then(score => evaluateScore(minScore, score)).
     catch(onError);
 }
 
 function evaluateScore(expectedScore, actualScore) {
-  console.log('Lighthouse PWA score:');
-  console.log(`  - Expected: ${expectedScore} / 100 (or higher)`);
-  console.log(`  - Actual:   ${actualScore} / 100`);
+  console.log('\nLighthouse PWA score:');
+  console.log(`  - Expected: ${expectedScore.toFixed(0).padStart(3)} / 100 (or higher)`);
+  console.log(`  - Actual:   ${actualScore.toFixed(0).padStart(3)} / 100\n`);
 
-  if (actualScore < expectedScore) {
+  if (isNaN(actualScore) || (actualScore < expectedScore)) {
     throw new Error(`PWA score is too low. (${actualScore} < ${expectedScore})`);
   }
 }
@@ -87,20 +92,30 @@ function parseInput(args) {
 }
 
 function processResults(results, logFile) {
-  let promise = Promise.resolve();
-
-  if (logFile) {
-    console.log(`Saving results in '${logFile}'...`);
-    console.log(`(LightHouse viewer: ${VIEWER_URL})`);
-
-    // Remove the artifacts, which are not necessary for the report.
-    // (Saves ~1,500,000 lines of formatted JSON output \o/)
-    results.artifacts = undefined;
-
-    promise = printer.write(results, 'json', logFile);
-  }
-
-  return promise.then(() => Math.round(results.score));
+  const categories = results.lhr.categories;
+  const report = results.report;
+
+  return Promise.resolve().
+    then(() => {
+      if (logFile) {
+        console.log(`Saving results in '${logFile}'...`);
+        console.log(`(LightHouse viewer: ${VIEWER_URL})`);
+
+        return printer.write(report, printer.OutputMode.json, logFile);
+      }
+    }).
+    then(() => {
+      const categoryData = Object.keys(categories).map(name => categories[name]);
+      const maxTitleLen = Math.max(...categoryData.map(({title}) => title.length));
+
+      console.log('\nAudit scores:');
+      categoryData.forEach(({title, score}) => {
+        const paddedTitle = `${title}:`.padEnd(maxTitleLen + 1);
+        const paddedScore = (score * 100).toFixed(0).padStart(3);
+        console.log(`  - ${paddedTitle} ${paddedScore} / 100`);
+      });
+    }).
+    then(() => categories.pwa.score * 100);
 }
 
 function skipHttpsAudits(config) {

aio/src/app/app.component.spec.ts

@@ -164,10 +164,10 @@ describe('AppComponent', () => {
 
     describe('onScroll', () => {
       it('should update `tocMaxHeight` accordingly', () => {
-        expect(component.tocMaxHeight).toBeUndefined();
-
+        component.tocMaxHeight = '';
         component.onScroll();
-        expect(component.tocMaxHeight).toBeGreaterThan(0);
+
+        expect(component.tocMaxHeight).toMatch(/^\d+\.\d{2}$/);
       });
     });
 
@@ -654,12 +654,13 @@ describe('AppComponent', () => {
       it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
         setHasFloatingToc(true);
 
-        expect(tocContainer!.style['max-height']).toBe('');
-
         component.tocMaxHeight = '100';
         fixture.detectChanges();
-
         expect(tocContainer!.style['max-height']).toBe('100px');
+
+        component.tocMaxHeight = '200';
+        fixture.detectChanges();
+        expect(tocContainer!.style['max-height']).toBe('200px');
       });
 
       it('should restrain scrolling inside the ToC container', () => {

aio/src/app/app.component.ts

@@ -349,12 +349,17 @@ export class AppComponent implements OnInit {
   @HostListener('window:scroll')
   onScroll() {
     if (!this.tocMaxHeightOffset) {
-      // Must wait until now for mat-toolbar to be measurable.
+      // Must wait until `mat-toolbar` is measurable.
       const el = this.hostElement.nativeElement as Element;
-      this.tocMaxHeightOffset =
-          el.querySelector('footer')!.clientHeight +
-          el.querySelector('.app-toolbar')!.clientHeight +
-          24; //  fudge margin
+      const headerEl = el.querySelector('.app-toolbar');
+      const footerEl = el.querySelector('footer');
+
+      if (headerEl && footerEl) {
+        this.tocMaxHeightOffset =
+            headerEl.clientHeight +
+            footerEl.clientHeight +
+            24; //  fudge margin
+      }
     }
 
     this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);