preview server: image tests (GoogleChrome#552)

* preview server: tests for local image rendering

* cleanup

* add mention of tests

* revert file

* feedback

* rename

* lint fix

* Add travis

* Handle SIGTERM

* drop concurrently

.eslintrc

@@ -8,7 +8,8 @@
   },
   "env": {
     "es6": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
   "parserOptions": {
     "ecmaVersion": 2017

.travis.yml

@@ -9,4 +9,6 @@ cache:
   directories:
   - node_modules
 script:
-- npm run lint && npm run build
+- npm run lint
+- npm run build
+- npm run test

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "prettier.eslintIntegration": true
+  "prettier.eslintIntegration": true,
 }

README.md

@@ -34,6 +34,14 @@ allows you to see how the content will look on the production site, but it's
 not a true staging server. For example, features like search and JS components
 may not work or be entirely broken on the local preview.
 
+### Running the tests
+
+The preview server has tests to verify that pages render locally.
+
+```shell
+yarn test
+```
+
 ## Found a bug?
 
 You can file an issue [in our issue tracker](https://github.com/GoogleChrome/web.dev/issues) and a team member should reply shortly.

package.json

@@ -13,10 +13,13 @@
     "clean": "gulp clean",
     "build": "gulp build",
     "lint": "gulp lint",
+    "watch": "gulp watch",
     "format": "prettier --write --single-quote --trailing-comma all --no-bracket-spacing --arrow-parens always \"{lib,server}/{*.js,*.mjs,!(deps)/**/*.js}\"",
-    "dev": "concurrently -k \"gulp watch\" \"npm:start\"",
+    "dev": "npm-run-all -r --parallel watch start",
     "deploy": "./lib/index.js --deploy",
-    "start": "node --experimental-modules server/index.mjs"
+    "start": "node --experimental-modules server/index.mjs",
+    "test:mocha": "mocha server/test/images.js",
+    "test": "cross-env TEST=true npm-run-all -r --parallel start test:mocha"
   },
   "dependencies": {
     "ansi-colors": "^3.1.0",
@@ -33,7 +36,7 @@
     "yaml": "^1.0.0-rc.8"
   },
   "devDependencies": {
-    "concurrently": "^4.1.0",
+    "cross-env": "^5.2.0",
     "eslint": "^5.10.0",
     "eslint-config-google": "^0.11.0",
     "eslint-plugin-prettier": "^3.0.0",
@@ -42,6 +45,8 @@
     "gulp-eslint": "^5.0.0",
     "gulp-watch": "^5.0.1",
     "husky": "^1.2.1",
+    "mocha": "^5.2.0",
+    "npm-run-all": "^4.1.5",
     "prettier": "^1.15.3",
     "puppeteer": "^1.11.0"
   }

server/index.mjs

@@ -42,8 +42,10 @@ app.use('/', async (req, res, next) => {
   });
   const toc = Date.now() - tic;
 
-  // eslint-disable-next-line
-  console.info(`Headless rendered ${path} in: ${toc}ms`);
+  if (process.env.TEST !== 'true') {
+    // eslint-disable-next-line
+    console.info(`Headless rendered ${path} in: ${toc}ms`);
+  }
 
   res.set(
     'Server-Timing',
@@ -62,3 +64,8 @@ app.listen(PORT, async () => {
   console.log(`App listening on port ${PORT}`); /* eslint-disable-line */
   console.log('Press Ctrl+C to quit.'); /* eslint-disable-line */
 });
+
+// Ensure the server shuts down when `npm rum test` exits with a SIGTERM.
+process.on('SIGTERM', (code) => {
+  process.exit(0);
+});

server/test/images.js

@@ -0,0 +1,100 @@
+/* eslint-env node, mocha */
+
+/**
+ * Copyright 2019 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Tests for preview server.
+ *
+ * @author Eric Bidleman <e.bidelman@>
+ */
+
+const assert = require('assert').strict;
+const puppeteer = require('puppeteer');
+
+const SERVER = 'http://localhost:8080';
+let browser;
+
+before(async function launchChrome() {
+  if (!browser) {
+    browser = await puppeteer.launch();
+  }
+});
+
+after(async function closeChrome() {
+  await browser.close();
+});
+
+describe('Image tests', function() {
+  this.timeout(10 * 1000); // eslint-disable-line
+
+  let page;
+
+  beforeEach(async function() {
+    page = await browser.newPage();
+  });
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  /**
+   * @param {string} url
+   * @reutrn {!Promise<undefined>}
+   */
+  async function verifyImagesLoad(url) {
+    const requests = [];
+
+    page.on('request', (req) => requests.push(req));
+    await page.goto(url, {waitUntil: 'networkidle2'});
+
+    for (const req of requests) {
+      const resp = req.response();
+      if (req.resourceType() === 'image' && resp.status() === 404) {
+        assert.ok(false, `${resp.url()} was missing.`);
+      }
+    }
+
+    assert.ok(true);
+  }
+
+  it('renders landing pages', async function() {
+    await Promise.all([
+      verifyImagesLoad(`${SERVER}/`),
+      verifyImagesLoad(`${SERVER}/fast`),
+      verifyImagesLoad(`${SERVER}/about`),
+      verifyImagesLoad(`${SERVER}/measure`),
+      verifyImagesLoad(`${SERVER}/about`),
+    ]);
+  });
+
+  it('renders local images on guide 1', async function() {
+    await verifyImagesLoad(`${SERVER}/installable/add-manifest`);
+  });
+
+  it('renders local images on guide 2', async function() {
+    await verifyImagesLoad(
+      `${SERVER}/fast/discover-performance-opportunities-with-lighthouse`);
+  });
+
+  it('renders local images on guide 3', async function() {
+    await verifyImagesLoad(`${SERVER}/fast/use-imagemin-to-compress-images`);
+  });
+
+  it('renders local images on guide 4', async function() {
+    await verifyImagesLoad(`${SERVER}/reliable/runtime-caching-with-workbox`);
+  });
+});