fix(script-blocking-first-paint): ignore latent resources (#2721)

* fix(script-blocking-first-paint): ignore latent resources

* add comment to test case

Author: patrickhulce

lighthouse-core/audits/dobetterweb/script-blocking-first-paint.js

@@ -36,7 +36,11 @@ class ScriptBlockingFirstPaint extends Audit {
    * @return {!AuditResult}
    */
   static audit(artifacts) {
-    return LinkBlockingFirstPaintAudit.computeAuditResultForTags(artifacts, 'SCRIPT');
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    return artifacts.requestTraceOfTab(trace).then(traceOfTab => {
+      const fcpTsInMs = traceOfTab.timestamps.firstContentfulPaint / 1000;
+      return LinkBlockingFirstPaintAudit.computeAuditResultForTags(artifacts, 'SCRIPT', fcpTsInMs);
+    });
   }
 }
 

lighthouse-core/test/audits/dobetterweb/script-blocking-first-paint-test.js

@@ -19,14 +19,23 @@ describe('Script Block First Paint audit', () => {
       src: 'http://google.com/js/app.js',
       url: 'http://google.com/js/app.js',
     };
-    const auditResult = ScriptBlockingFirstPaintAudit.audit({
+    const timestamps = {firstContentfulPaint: 5600 * 1000};
+    return ScriptBlockingFirstPaintAudit.audit({
+      traces: {},
+      requestTraceOfTab: () => Promise.resolve({timestamps}),
       TagsBlockingFirstPaint: [
         {
           tag: scriptDetails,
           transferSize: 100,
           startTime: 1,
           endTime: 1.1
         },
+        {
+          tag: scriptDetails,
+          transferSize: 100,
+          startTime: 15, // well after FCP and should be ignored
+          endTime: 15.1
+        },
         {
           tag: scriptDetails,
           transferSize: 50,
@@ -39,21 +48,25 @@ describe('Script Block First Paint audit', () => {
           spendTime: 110
         }
       ]
+    }).then(auditResult => {
+      assert.equal(auditResult.rawValue, 150);
+      assert.equal(auditResult.displayValue, `2 resources delayed first paint by 150${NBSP}ms`);
+      const results = auditResult.details.items;
+      assert.equal(results.length, 2);
+      assert.ok(results[0][0].text.includes('js/app.js'), 'has a url');
+      assert.equal(results[0][2].text, `150${NBSP}ms`);
+      assert.equal(results[1][2].text, `50${NBSP}ms`);
     });
-    assert.equal(auditResult.rawValue, 150);
-    assert.equal(auditResult.displayValue, `2 resources delayed first paint by 150${NBSP}ms`);
-    const results = auditResult.details.items;
-    assert.equal(results.length, 2);
-    assert.ok(results[0][0].text.includes('js/app.js'), 'has a url');
-    assert.equal(results[0][2].text, `150${NBSP}ms`);
-    assert.equal(results[1][2].text, `50${NBSP}ms`);
   });
 
   it('passes when there are no scripts found which block first paint', () => {
-    const auditResult = ScriptBlockingFirstPaintAudit.audit({
+    return ScriptBlockingFirstPaintAudit.audit({
+      traces: {},
+      requestTraceOfTab: () => Promise.resolve({timestamps: {}}),
       TagsBlockingFirstPaint: []
+    }).then(auditResult => {
+      assert.equal(auditResult.rawValue, 0);
+      assert.equal(auditResult.details.items.length, 0);
     });
-    assert.equal(auditResult.rawValue, 0);
-    assert.equal(auditResult.details.items.length, 0);
   });
 });