Viewport audit: accept initial-scale and allow spaces (#1267)

Introduce `metaviewport-parser` module for better parsing.

lighthouse-core/audits/viewport.js

@@ -17,6 +17,7 @@
 'use strict';
 
 const Audit = require('./audit');
+const Parser = require('metaviewport-parser');
 
 class Viewport extends Audit {
   /**
@@ -26,7 +27,7 @@ class Viewport extends Audit {
     return {
       category: 'Mobile Friendly',
       name: 'viewport',
-      description: 'HTML has a `<meta name="viewport">` tag',
+      description: 'HTML has a `<meta name="viewport">` tag containing `width` or `initial-scale`',
       helpText: 'Add a viewport meta tag to optimize your app for mobile screens. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag").',
       requiredArtifacts: ['Viewport']
@@ -38,10 +39,30 @@ class Viewport extends Audit {
    * @return {!AuditResult}
    */
   static audit(artifacts) {
-    const hasMobileViewport = typeof artifacts.Viewport === 'string' &&
-        artifacts.Viewport.includes('width=');
+    if (typeof artifacts.Viewport !== 'string') {
+      return Viewport.generateAuditResult({
+        debugString: 'Error in determining viewport',
+        rawValue: -1
+      });
+    }
+
+    let debugString = '';
+    const parsedProps = Parser.parseMetaViewPortContent(artifacts.Viewport);
+
+    if (Object.keys(parsedProps.unknownProperties).length) {
+      debugString += `Invalid properties found: ${JSON.stringify(parsedProps.unknownProperties)}. `;
+    }
+    if (Object.keys(parsedProps.invalidValues).length) {
+      debugString += `Invalid values found: ${JSON.stringify(parsedProps.invalidValues)}. `;
+    }
+    debugString = debugString.trim();
+
+    const viewportProps = parsedProps.validProperties;
+    const hasMobileViewport = viewportProps.width || viewportProps['initial-scale'];
+
     return Viewport.generateAuditResult({
-      rawValue: !!hasMobileViewport
+      rawValue: !!hasMobileViewport,
+      debugString
     });
   }
 }

lighthouse-core/test/audits/viewport-test.js

@@ -22,9 +22,11 @@ const assert = require('assert');
 
 describe('Mobile-friendly: viewport audit', () => {
   it('fails when no input present', () => {
-    return assert.equal(Audit.audit({
+    const audit = Audit.audit({
       Viewport: -1
-    }).rawValue, false);
+    });
+    assert.equal(audit.rawValue, -1);
+    assert.equal(audit.debugString, 'Error in determining viewport');
   });
 
   it('fails when HTML does not contain a viewport meta tag', () => {
@@ -33,9 +35,50 @@ describe('Mobile-friendly: viewport audit', () => {
     }).rawValue, false);
   });
 
-  it('passes when a viewport is provided', () => {
-    return assert.equal(Audit.audit({
-      Viewport: 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'
-    }).rawValue, true);
+  it('fails when HTML contains a non-mobile friendly viewport meta tag', () => {
+    const viewport = 'maximum-scale=1';
+    assert.equal(Audit.audit({Viewport: viewport}).rawValue, false);
+    assert.equal(Audit.audit({
+      Viewport: viewport
+    }).debugString, '');
+  });
+
+  it('fails when HTML contains an invalid viewport meta tag key', () => {
+    const viewport = 'nonsense=true';
+    assert.equal(Audit.audit({Viewport: viewport}).rawValue, false);
+    assert.equal(Audit.audit({
+      Viewport: viewport
+    }).debugString, 'Invalid properties found: {"nonsense":"true"}.');
+  });
+
+  it('fails when HTML contains an invalid viewport meta tag value', () => {
+    const viewport = 'initial-scale=microscopic';
+    assert.equal(Audit.audit({Viewport: viewport}).rawValue, false);
+    assert.equal(Audit.audit({
+      Viewport: viewport
+    }).debugString, 'Invalid values found: {"initial-scale":"microscopic"}.');
+  });
+
+  it('fails when HTML contains an invalid viewport meta tag key and value', () => {
+    const viewport = 'nonsense=true, initial-scale=microscopic';
+    assert.equal(Audit.audit({Viewport: viewport}).rawValue, false);
+    assert.equal(Audit.audit({
+      Viewport: viewport
+    }).debugString, 'Invalid properties found: {"nonsense":"true"}. ' +
+        'Invalid values found: {"initial-scale":"microscopic"}.');
+  });
+
+  it('passes when a valid viewport is provided', () => {
+    const viewports = [
+      'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1',
+      'width = device-width, initial-scale = 1',
+      'initial-scale=1',
+      'width=device-width     ',
+    ];
+    viewports.forEach(viewport => {
+      assert.equal(Audit.audit({
+        Viewport: viewport
+      }).rawValue, true);
+    });
   });
 });

package.json

@@ -61,6 +61,7 @@
     "handlebars": "^4.0.5",
     "json-stringify-safe": "^5.0.1",
     "marked": "^0.3.6",
+    "metaviewport-parser": "^0.0.1",
     "mkdirp": "^0.5.1",
     "opn": "^4.0.2",
     "rimraf": "^2.2.8",

yarn.lock

@@ -1844,6 +1844,10 @@ meow@^3.3.0, meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+metaviewport-parser@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/metaviewport-parser/-/metaviewport-parser-0.0.1.tgz#9b28179659b76ff9d21de84ae25583257909b206"
+
 micromatch@^2.3.7:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"