core(viewport): create ViewportMeta computed artifact

lighthouse-core/audits/seo/font-size.js

@@ -10,7 +10,7 @@
 const URL = require('../../lib/url-shim');
 const i18n = require('../../lib/i18n/i18n.js');
 const Audit = require('../audit');
-const ViewportAudit = require('../viewport');
+const ComputedViewportMeta = require('../../computed/viewport-meta');
 const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 60;
 
 const UIStrings = {
@@ -213,11 +213,12 @@ class FontSize extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const hasViewportSet = ViewportAudit.audit(artifacts).rawValue;
-    if (!hasViewportSet) {
+  static async audit(artifacts, context) {
+    const viewportMeta = await ComputedViewportMeta.request(artifacts, context);
+    if (!viewportMeta.hasMobileViewport) {
       return {
         rawValue: false,
         explanation: str_(UIStrings.explanationViewport),

lighthouse-core/audits/seo/tap-targets.js

@@ -10,7 +10,7 @@
  * no other tap target that's too close so that the user might accidentally tap on.
  */
 const Audit = require('../audit');
-const ViewportAudit = require('../viewport');
+const ComputedViewportMeta = require('../../computed/viewport-meta');
 const {
   rectsTouchOrOverlap,
   getRectOverlapArea,
@@ -270,11 +270,12 @@ class TapTargets extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const hasViewportSet = ViewportAudit.audit(artifacts).rawValue;
-    if (!hasViewportSet) {
+  static async audit(artifacts, context) {
+    const viewportMeta = await ComputedViewportMeta.request(artifacts, context);
+    if (!viewportMeta.hasMobileViewport) {
       return {
         rawValue: false,
         explanation: str_(UIStrings.explanationViewportMetaNotOptimized),

lighthouse-core/audits/viewport.js

@@ -6,7 +6,8 @@
 'use strict';
 
 const Audit = require('./audit');
-const Parser = require('metaviewport-parser');
+const ComputedViewportMeta = require('../computed/viewport-meta.js');
+
 
 class Viewport extends Audit {
   /**
@@ -26,33 +27,22 @@ class Viewport extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts) {
-    const viewportMeta = artifacts.MetaElements.find(meta => meta.name === 'viewport');
-    if (!viewportMeta) {
+  static async audit(artifacts, context) {
+    const viewportMeta = await ComputedViewportMeta.request(artifacts, context);
+
+    if (!viewportMeta.hasViewportTag) {
       return {
-        explanation: 'No viewport meta tag found',
         rawValue: false,
+        explanation: 'No viewport meta tag found',
       };
     }
 
-    const warnings = [];
-    const parsedProps = Parser.parseMetaViewPortContent(viewportMeta.content || '');
-
-    if (Object.keys(parsedProps.unknownProperties).length) {
-      warnings.push(`Invalid properties found: ${JSON.stringify(parsedProps.unknownProperties)}`);
-    }
-    if (Object.keys(parsedProps.invalidValues).length) {
-      warnings.push(`Invalid values found: ${JSON.stringify(parsedProps.invalidValues)}`);
-    }
-
-    const viewportProps = parsedProps.validProperties;
-    const hasMobileViewport = viewportProps.width || viewportProps['initial-scale'];
-
     return {
-      rawValue: !!hasMobileViewport,
-      warnings,
+      rawValue: viewportMeta.hasMobileViewport,
+      warnings: viewportMeta.parserWarnings,
     };
   }
 }

lighthouse-core/computed/viewport-meta.js

@@ -0,0 +1,50 @@
+/**
+ * @license 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.
+ */
+'use strict';
+
+const Parser = require('metaviewport-parser');
+
+const makeComputedArtifact = require('./computed-artifact.js');
+
+class ViewportMeta {
+  /**
+   * @param {{MetaElements: LH.GathererArtifacts['MetaElements']}} artifacts
+   * @return {Promise<LH.Artifacts.ViewportMeta>}
+  */
+
+  static async compute_({MetaElements}) {
+    const viewportMeta = MetaElements.find(meta => meta.name === 'viewport');
+
+    if (!viewportMeta) {
+      return {
+        hasViewportTag: false,
+        hasMobileViewport: false,
+        parserWarnings: [],
+      };
+    }
+
+    const warnings = [];
+    const parsedProps = Parser.parseMetaViewPortContent(viewportMeta.content || '');
+
+    if (Object.keys(parsedProps.unknownProperties).length) {
+      warnings.push(`Invalid properties found: ${JSON.stringify(parsedProps.unknownProperties)}`);
+    }
+    if (Object.keys(parsedProps.invalidValues).length) {
+      warnings.push(`Invalid values found: ${JSON.stringify(parsedProps.invalidValues)}`);
+    }
+
+    const viewportProps = parsedProps.validProperties;
+    const hasMobileViewport = Boolean(viewportProps.width || viewportProps['initial-scale']);
+
+    return {
+      hasMobileViewport,
+      hasViewportTag: true,
+      parserWarnings: warnings,
+    };
+  }
+}
+
+module.exports = makeComputedArtifact(ViewportMeta);

lighthouse-core/test/audits/seo/font-size-test.js

@@ -15,22 +15,23 @@ const validViewport = 'width=device-width';
 
 describe('SEO: Font size audit', () => {
   const makeMetaElements = viewport => [{name: 'viewport', content: viewport}];
+  const fakeContext = {computedCache: new Map()};
 
-  it('fails when viewport is not set', () => {
+  it('fails when viewport is not set', async () => {
     const artifacts = {
       URL,
       MetaElements: [],
       FontSize: [],
     };
 
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, false);
     expect(auditResult.explanation)
       .toBeDisplayString('Text is illegible because there\'s ' +
         'no viewport meta tag optimized for mobile screens.');
   });
 
-  it('fails when less than 60% of text is legible', () => {
+  it('fails when less than 60% of text is legible', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -46,13 +47,13 @@ describe('SEO: Font size audit', () => {
       },
     };
 
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, false);
     expect(auditResult.explanation).toBeDisplayString('41% of text is too small.');
     expect(auditResult.displayValue).toBeDisplayString('59% legible text');
   });
 
-  it('passes when there is no text', () => {
+  it('passes when there is no text', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -67,11 +68,11 @@ describe('SEO: Font size audit', () => {
       },
     };
 
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, true);
   });
 
-  it('passes when more than 60% of text is legible', () => {
+  it('passes when more than 60% of text is legible', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -86,12 +87,12 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, true);
     expect(auditResult.displayValue).toBeDisplayString('90% legible text');
   });
 
-  it('groups entries with same source, sorts them by coverage', () => {
+  it('groups entries with same source, sorts them by coverage', async () => {
     const style1 = {
       styleSheetId: 1,
       type: 'Regular',
@@ -123,15 +124,15 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
 
     assert.equal(auditResult.rawValue, false);
     assert.equal(auditResult.details.items.length, 2);
     assert.equal(auditResult.details.items[0].coverage, '57.14%');
     expect(auditResult.displayValue).toBeDisplayString('0% legible text');
   });
 
-  it('adds a category for failing text that wasn\'t analyzed', () => {
+  it('adds a category for failing text that wasn\'t analyzed', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -145,15 +146,15 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, false);
     assert.equal(auditResult.details.items.length, 3);
     assert.equal(auditResult.details.items[1].source, 'Add\'l illegible text');
     assert.equal(auditResult.details.items[1].coverage, '40.00%');
     expect(auditResult.displayValue).toBeDisplayString('50% legible text');
   });
 
-  it('informs user if audit haven\'t covered all text on the page', () => {
+  it('informs user if audit haven\'t covered all text on the page', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -167,14 +168,14 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     assert.equal(auditResult.rawValue, false);
     expect(auditResult.explanation)
       .toBeDisplayString('100% of text is too small (based on 50% sample).');
     expect(auditResult.displayValue).toBeDisplayString('0% legible text');
   });
 
-  it('maintains 2 trailing decimal places', () => {
+  it('maintains 2 trailing decimal places', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -189,11 +190,11 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     expect(auditResult.displayValue).toBeDisplayString('89.78% legible text');
   });
 
-  it('maintains 2 trailing decimal places with only 1 leading digit', () => {
+  it('maintains 2 trailing decimal places with only 1 leading digit', async () => {
     const artifacts = {
       URL,
       MetaElements: makeMetaElements(validViewport),
@@ -208,7 +209,7 @@ describe('SEO: Font size audit', () => {
         ],
       },
     };
-    const auditResult = FontSizeAudit.audit(artifacts);
+    const auditResult = await FontSizeAudit.audit(artifacts, fakeContext);
     expect(auditResult.displayValue).toBeDisplayString('2.48% legible text');
   });
 });