lighthouse 9.5.0-dev.20230126 → 9.5.0-dev.20230128

package/report/test/renderer/report-ui-features-test.js

@@ -103,19 +103,29 @@ describe('ReportUIFeatures', () => {
     });
 
     describe('third-party filtering', () => {
-      let container;
+      let lhrJson;
 
       before(() => {
         const lhr = JSON.parse(JSON.stringify(sampleResults));
         lhr.requestedUrl = lhr.finalDisplayedUrl = 'http://www.example.com';
+
         const webpAuditItemTemplate = {
           ...sampleResults.audits['modern-image-formats'].details.items[0],
           wastedBytes: 8.8 * 1024,
+          entity: undefined, // Remove entity classification from previous result.
+        };
+        const renderBlockingAuditItemTemplate = {
+          ...sampleResults.audits['render-blocking-resources'].details.items[0],
+          entity: undefined, // Remove entity classification from previous result.
+        };
+        const textCompressionAuditItemTemplate = {
+          ...sampleResults.audits['uses-text-compression'].details.items[0],
+          entity: undefined, // Remove entity classification from previous result.
+        };
+        const bootupTimeAuditItemTemplate = {
+          ...sampleResults.audits['bootup-time'].details.items[0],
+          entity: undefined, // Remove entity classification from previous result.
         };
-        const renderBlockingAuditItemTemplate =
-          sampleResults.audits['render-blocking-resources'].details.items[0];
-        const textCompressionAuditItemTemplate =
-          sampleResults.audits['uses-text-compression'].details.items[0];
 
         // Interleave first/third party URLs to test restoring order.
         lhr.audits['modern-image-formats'].details.items = [
@@ -202,79 +212,296 @@ describe('ReportUIFeatures', () => {
           },
         ];
 
-        // render a report onto the UIFeature dom
-        container = render(lhr);
-      });
-
-      it('filters out third party resources in on click', () => {
-        const filterCheckbox = dom.find('#modern-image-formats .lh-3p-filter-input', container);
-
-        function getUrlsInTable() {
-          return dom
-            .findAll('#modern-image-formats tr:not(.lh-row--hidden) .lh-text__url a:first-child', container) // eslint-disable-line max-len
-            .map(el => el.textContent);
-        }
-
-        expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
-        filterCheckbox.click();
-        expect(getUrlsInTable()).toEqual(['/img2.jpg']);
-        filterCheckbox.click();
-        expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
-      });
-
-      it('filters out sub-item rows of third party resources on click', () => {
-        dom.find('#unused-javascript', container);
-        const filterCheckbox = dom.find('#unused-javascript .lh-3p-filter-input', container);
-
-        function getRowIdentifiers() {
-          return dom
-            .findAll(
-              '#unused-javascript tbody tr:not(.lh-row--hidden)', container)
-            .map(el => el.textContent);
-        }
-
-        const initialExpected = [
-          '/script1.js(www.cdn.com)24.0 KiB8.8 KiB',
-          '10.0 KiB0.0 KiB',
-          '20.0 KiB0.0 KiB',
-          '/script2.js(www.example.com)24.0 KiB8.8 KiB',
-          '30.0 KiB0.0 KiB',
-          '40.0 KiB0.0 KiB',
-          '/script3.js(www.notexample.com)24.0 KiB8.8 KiB',
-          '50.0 KiB0.0 KiB',
-          '60.0 KiB0.0 KiB',
+        // A mix of 3P, 1P and Unattributable.
+        lhr.audits['bootup-time'].details.items = [
+          {
+            ...bootupTimeAuditItemTemplate,
+            url: 'http://www.example.com/dobetterweb/dbw_tester.html',
+          },
+          {
+            ...bootupTimeAuditItemTemplate,
+            url: 'Unattributable',
+          },
+          {
+            ...bootupTimeAuditItemTemplate,
+            url: 'http://www.example.com/dobetterweb/third_party/aggressive-promise-polyfill.js',
+          },
+          {
+            ...bootupTimeAuditItemTemplate,
+            url: 'http://www.cdn.com/script1.js',
+          },
         ];
 
-        expect(getRowIdentifiers()).toEqual(initialExpected);
-        filterCheckbox.click();
-        expect(getRowIdentifiers()).toEqual([
-          '/script2.js(www.example.com)24.0 KiB8.8 KiB',
-          '30.0 KiB0.0 KiB',
-          '40.0 KiB0.0 KiB',
-        ]);
-        filterCheckbox.click();
-        expect(getRowIdentifiers()).toEqual(initialExpected);
+        lhrJson = lhr;
       });
 
-      it('adds no filter for audits in thirdPartyFilterAuditExclusions', () => {
-        const checkboxClassName = 'lh-3p-filter-input';
-
-        const yesCheckbox = dom.find(`#modern-image-formats .${checkboxClassName}`, container);
-        expect(yesCheckbox).toBeTruthy();
-
-        expect(() => dom.find(`#uses-rel-preconnect .${checkboxClassName}`, container))
-          .toThrowError('query #uses-rel-preconnect .lh-3p-filter-input not found');
-      });
-
-      it('filter is hidden when just third party resources', () => {
-        const filterControl =
-          dom.find('#render-blocking-resources .lh-3p-filter', container);
-        expect(filterControl.hidden).toEqual(true);
+      describe('entity-classification based filtering works', () => {
+        let container;
+
+        before(() => {
+          // Setup entity-classification with recognized entities first.
+          lhrJson.entities = {
+            firstParty: 'example.com',
+            list: [
+              {
+                name: 'example.com',
+                isFirstParty: true,
+                isUnrecognized: true,
+              },
+              {
+                name: 'cdn.com',
+                isUnrecognized: true,
+              },
+              {
+                name: 'notexample.com',
+                isUnrecognized: true,
+              },
+              {
+                name: 'google.com',
+              },
+            ],
+            entityIndexByOrigin: {
+              'http://www.example.com': 0,
+              'http://www.cdn.com': 1,
+              'http://www.notexample.com': 2,
+              'http://www.google.com': 3,
+            },
+            entityIndexByName: {
+              'example.com': 0,
+              'cdn.com': 1,
+              'notexample.com': 2,
+              'google.com': 3,
+            },
+          };
+
+          // Entity resolution is done during prepareReportResult
+          const result = ReportUtils.prepareReportResult(lhrJson);
+
+          // render a report onto the UIFeature dom
+          container = render(result);
+        });
+
+        it('all items that contain a url have been marked with an entity for filtering', () => {
+          ['modern-image-formats', 'render-blocking-resources', 'unused-javascript',
+            'uses-text-compression'].forEach(audit => {
+            dom.findAll(`#${audit} tr`, container)
+              .filter(el => dom.findAll('.lh-text__url', el).length > 0)
+              .forEach(el => expect(el.dataset.entity).toBeTruthy());
+          });
+        });
+
+        it('filters out third party resources in on click', () => {
+          const filterCheckbox = dom.find('#modern-image-formats .lh-3p-filter-input', container);
+
+          function getUrlsInTable() {
+            return dom
+              .findAll('#modern-image-formats tr:not(.lh-row--hidden) .lh-text__url a:first-child', container) // eslint-disable-line max-len
+              .map(el => el.textContent);
+          }
+
+          expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
+          filterCheckbox.click();
+          expect(getUrlsInTable()).toEqual(['/img2.jpg']);
+          filterCheckbox.click();
+          expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
+
+          const filter3pCount = dom.find('#modern-image-formats .lh-3p-filter-count', container);
+          expect(filter3pCount.textContent).toEqual('2');
+        });
+
+        it('filters out sub-item rows of third party resources on click', () => {
+          dom.find('#unused-javascript', container);
+          const filterCheckbox = dom.find('#unused-javascript .lh-3p-filter-input', container);
+
+          function getRowIdentifiers() {
+            return dom
+              .findAll(
+                '#unused-javascript tbody tr:not(.lh-row--hidden)', container)
+              .map(el => el.textContent);
+          }
+
+          const initialExpected = [
+            '/script1.js(www.cdn.com)24.0 KiB8.8 KiB',
+            '10.0 KiB0.0 KiB',
+            '20.0 KiB0.0 KiB',
+            '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+            '30.0 KiB0.0 KiB',
+            '40.0 KiB0.0 KiB',
+            '/script3.js(www.notexample.com)24.0 KiB8.8 KiB',
+            '50.0 KiB0.0 KiB',
+            '60.0 KiB0.0 KiB',
+          ];
+
+          expect(getRowIdentifiers()).toEqual(initialExpected);
+          filterCheckbox.click();
+          expect(getRowIdentifiers()).toEqual([
+            '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+            '30.0 KiB0.0 KiB',
+            '40.0 KiB0.0 KiB',
+          ]);
+          filterCheckbox.click();
+          expect(getRowIdentifiers()).toEqual(initialExpected);
+
+          const filter3pCount = dom.find('#unused-javascript .lh-3p-filter-count', container);
+          expect(filter3pCount.textContent).toEqual('2');
+        });
+
+        it('adds no filter for audits in thirdPartyFilterAuditExclusions', () => {
+          const checkboxClassName = 'lh-3p-filter-input';
+
+          const yesCheckbox = dom.find(`#modern-image-formats .${checkboxClassName}`, container);
+          expect(yesCheckbox).toBeTruthy();
+
+          expect(() => dom.find(`#uses-rel-preconnect .${checkboxClassName}`, container))
+            .toThrowError('query #uses-rel-preconnect .lh-3p-filter-input not found');
+        });
+
+        it('treats non-classifiable url values as first-party', () => {
+          const auditEl = dom.find('#bootup-time', container);
+          const filterCheckboxEl = dom.find('.lh-3p-filter-input', auditEl);
+
+          // Ensure 3p filter is visible.
+          expect(dom.find('.lh-3p-filter', auditEl).hidden).toBeFalsy();
+
+          function getUrlsInTable() {
+            return dom.findAll('tbody tr:not(.lh-row--hidden) td:first-child', auditEl)
+              .map(el => el.textContent);
+          }
+
+          const preFilterRowSet = [
+            '/dobetterweb/dbw_tester.html(www.example.com)',
+            'Unattributable',
+            '…third_party/aggressive-promise-polyfill.js(www.example.com)',
+            '/script1.js(www.cdn.com)',
+          ];
+
+          expect(getUrlsInTable()).toEqual(preFilterRowSet);
+          filterCheckboxEl.click();
+          expect(getUrlsInTable()).toEqual(preFilterRowSet.filter(
+            text => !text.includes('cdn.com')));
+          filterCheckboxEl.click();
+          expect(getUrlsInTable()).toEqual(preFilterRowSet);
+
+          const filter3pCountEl = dom.find('.lh-3p-filter-count', auditEl);
+          expect(filter3pCountEl.textContent).toEqual('1');
+        });
+
+        it('filter is hidden when just third party resources', () => {
+          const filterControl =
+            dom.find('#render-blocking-resources .lh-3p-filter', container);
+          expect(filterControl.hidden).toEqual(true);
+          // Expect the hidden filter to still count third parties correctly.
+          const filter3pCount = dom.find('#render-blocking-resources .lh-3p-filter-count',
+            container);
+          expect(filter3pCount.textContent).toEqual('3');
+        });
+
+        it('filter is hidden for just first party resources', () => {
+          const filterControl = dom.find('#uses-text-compression .lh-3p-filter', container);
+          expect(filterControl.hidden).toEqual(true);
+          // Expect the hidden filter to still count third parties correctly.
+          const filter3pCount = dom.find('#uses-text-compression .lh-3p-filter-count', container);
+          expect(filter3pCount.textContent).toEqual('0');
+        });
       });
 
-      it('filter is hidden for just first party resources', () => {
-        const filterControl = dom.find('#uses-text-compression .lh-3p-filter', container);
-        expect(filterControl.hidden).toEqual(true);
+      describe('legacy third-party filtering continues to work', () => {
+        let container;
+
+        before(() => {
+          // Remove entity-classification audit to fall back to origin string match
+          // based third-party filtering (legacy)
+          delete lhrJson.entities;
+
+          const result = ReportUtils.prepareReportResult(lhrJson);
+
+          // render a report onto the UIFeature dom
+          container = render(result);
+        });
+
+        it('filters out third party resources in on click', () => {
+          const filterCheckbox = dom.find('#modern-image-formats .lh-3p-filter-input', container);
+
+          function getUrlsInTable() {
+            return dom
+              .findAll('#modern-image-formats tr:not(.lh-row--hidden) .lh-text__url a:first-child', container) // eslint-disable-line max-len
+              .map(el => el.textContent);
+          }
+
+          expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
+          filterCheckbox.click();
+          expect(getUrlsInTable()).toEqual(['/img2.jpg']);
+          filterCheckbox.click();
+          expect(getUrlsInTable()).toEqual(['/img1.jpg', '/img2.jpg', '/img3.jpg']);
+          const filter3pCount = dom.find('#modern-image-formats .lh-3p-filter-count', container);
+          expect(filter3pCount.textContent).toEqual('2');
+        });
+
+        it('filters out sub-item rows of third party resources on click', () => {
+          dom.find('#unused-javascript', container);
+          const filterCheckbox = dom.find('#unused-javascript .lh-3p-filter-input', container);
+
+          function getRowIdentifiers() {
+            return dom
+              .findAll(
+                '#unused-javascript tbody tr:not(.lh-row--hidden)', container)
+              .map(el => el.textContent);
+          }
+
+          const initialExpected = [
+            '/script1.js(www.cdn.com)24.0 KiB8.8 KiB',
+            '10.0 KiB0.0 KiB',
+            '20.0 KiB0.0 KiB',
+            '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+            '30.0 KiB0.0 KiB',
+            '40.0 KiB0.0 KiB',
+            '/script3.js(www.notexample.com)24.0 KiB8.8 KiB',
+            '50.0 KiB0.0 KiB',
+            '60.0 KiB0.0 KiB',
+          ];
+
+          expect(getRowIdentifiers()).toEqual(initialExpected);
+          filterCheckbox.click();
+          expect(getRowIdentifiers()).toEqual([
+            '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+            '30.0 KiB0.0 KiB',
+            '40.0 KiB0.0 KiB',
+          ]);
+
+          filterCheckbox.click();
+          expect(getRowIdentifiers()).toEqual(initialExpected);
+          const filter3pCount = dom.find('#unused-javascript .lh-3p-filter-count', container);
+          expect(filter3pCount.textContent).toEqual('2');
+        });
+
+        it('adds no filter for audits in thirdPartyFilterAuditExclusions', () => {
+          const checkboxClassName = 'lh-3p-filter-input';
+
+          const yesCheckbox = dom.find(`#modern-image-formats .${checkboxClassName}`, container);
+          expect(yesCheckbox).toBeTruthy();
+
+          expect(() => dom.find(`#uses-rel-preconnect .${checkboxClassName}`, container))
+            .toThrowError('query #uses-rel-preconnect .lh-3p-filter-input not found');
+        });
+
+        it('filter is hidden when just third party resources', () => {
+          const filterControl =
+            dom.find('#render-blocking-resources .lh-3p-filter', container);
+          expect(filterControl.hidden).toEqual(true);
+          // Expect the hidden filter to still count third parties correctly.
+          const filter3pCount = dom.find('#render-blocking-resources .lh-3p-filter-count',
+            container);
+          expect(filter3pCount.textContent).toEqual('3');
+        });
+
+        it('filter is hidden for just first party resources', () => {
+          const filterControl = dom.find('#uses-text-compression .lh-3p-filter', container);
+          expect(filterControl.hidden).toEqual(true);
+          // Expect the hidden filter to still count third parties correctly.
+          const filter3pCount = dom.find('#uses-text-compression .lh-3p-filter-count',
+            container);
+          expect(filter3pCount.textContent).toEqual('0');
+        });
       });
     });
 

package/report/test/renderer/report-utils-test.js

@@ -98,6 +98,10 @@ describe('util helpers', () => {
       it('corrects underscored `notApplicable` scoreDisplayMode', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
+
         let notApplicableCount = 0;
         Object.values(clonedSampleResult.audits).forEach(audit => {
           if (audit.scoreDisplayMode === 'notApplicable') {
@@ -117,6 +121,10 @@ describe('util helpers', () => {
       it('corrects undefined auditDetails.type to `debugdata`', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
+
         // Delete debugdata details types.
         let undefinedCount = 0;
         for (const audit of Object.values(clonedSampleResult.audits)) {
@@ -136,6 +144,10 @@ describe('util helpers', () => {
       it('corrects `diagnostic` auditDetails.type to `debugdata`', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
+
         // Change debugdata details types.
         let diagnosticCount = 0;
         for (const audit of Object.values(clonedSampleResult.audits)) {
@@ -155,6 +167,10 @@ describe('util helpers', () => {
       it('corrects screenshots in the `filmstrip` auditDetails.type', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
+
         // Strip filmstrip screenshots of data URL prefix.
         let filmstripCount = 0;
         for (const audit of Object.values(clonedSampleResult.audits)) {
@@ -183,6 +199,9 @@ describe('util helpers', () => {
           },
         };
         delete clonedSampleResult.fullPageScreenshot;
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
 
         assert.ok(clonedSampleResult.audits['full-page-screenshot'].details.nodes); // Make sure something's being tested.
         assert.notDeepStrictEqual(clonedSampleResult.audits, sampleResult.audits);
@@ -218,6 +237,10 @@ describe('util helpers', () => {
       it('converts old opportunity table column headings to consolidated table headings', () => {
         const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
 
+        // Avoid injecting entity names into audits that would would
+        // make the diff at the end of this test difficult.
+        delete clonedSampleResult.entities;
+
         const auditsWithTableDetails = Object.values(clonedSampleResult.audits)
           .filter(audit => audit.details?.type === 'table');
         assert.notEqual(auditsWithTableDetails.length, 0);
@@ -266,6 +289,34 @@ describe('util helpers', () => {
       const interactiveRef = perfAuditRefs.find(ref => ref.id === 'interactive');
       assert.strictEqual(interactiveRef.stackPacks, undefined);
     });
+
+    it('identifies entities on items of tables with urls', () => {
+      const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+      const auditsWithTableDetails = Object.values(clonedSampleResult.audits)
+        .filter(audit => audit.details?.type === 'table');
+      assert.notEqual(auditsWithTableDetails.length, 0);
+
+      // collect audit names that might have urls
+      const auditsThatDontHaveUrls = ['bf-cache', 'font-size']; // no urls in data-set
+      const auditsWithUrls = auditsWithTableDetails.filter(audit => {
+        if (auditsThatDontHaveUrls.includes(audit.id)) return false;
+        const urlFields = ['url', 'source-location'];
+        return audit.details.headings.some(heading =>
+          urlFields.includes(heading.valueType) ||
+          urlFields.includes(heading.subItemsHeading?.valueType)
+        );
+      }).map(audit => audit.id);
+      assert.notEqual(auditsWithUrls.length, 0);
+
+      const preparedResult = ReportUtils.prepareReportResult(clonedSampleResult);
+
+      // ensure each audit that had urls detected to have marked entities.
+      for (const id of auditsWithUrls) {
+        const foundEntities = preparedResult.audits[id].details.items.some(item => item.entity);
+        assert.equal(foundEntities, true);
+      }
+    });
   });
 
   describe('#shouldDisplayAsFraction', () => {