lighthouse 8.5.1-dev.20211007 → 8.5.1-dev.20211011

package/flow-report/assets/styles.css

@@ -373,7 +373,7 @@
   width: max-content;
   background-color: var(--report-background-color);
   border: 1px solid var(--color-gray-900);
-  border-radius: 5px;
+  border-radius: 3px;
   padding: var(--base-spacing);
   right: 0;
   box-shadow: 0px 4px 4px var(--summary-tooltip-box-shadow-color);

package/flow-report/src/common.tsx

@@ -5,9 +5,12 @@
  */
 
 import {FunctionComponent} from 'preact';
+import {useEffect, useState} from 'preact/hooks';
 
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
-import {getScreenDimensions, getScreenshot} from './util';
+import {getFilmstripFrames, getScreenDimensions, getScreenshot} from './util';
+
+const ANIMATION_FRAME_DURATION_MS = 250;
 
 export const Separator: FunctionComponent = () => {
   return <div className="Separator" role="separator"></div>;
@@ -39,12 +42,42 @@ export const FlowSegment: FunctionComponent<{mode?: LH.Result.GatherMode}> = ({m
   );
 };
 
+const FlowStepAnimatedThumbnail: FunctionComponent<{
+  frames: Array<{data: string}>,
+  width: number,
+  height: number,
+}> = ({frames, width, height}) => {
+  const [frameIndex, setFrameIndex] = useState(0);
+  // Handle a frame array of a different length being set.
+  const effectiveFrameIndex = frameIndex % frames.length;
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setFrameIndex(i => (i + 1) % frames.length),
+      ANIMATION_FRAME_DURATION_MS
+    );
+
+    return () => clearInterval(interval);
+  }, [frames.length]);
+
+  return (
+    <img
+      className="FlowStepThumbnail"
+      data-testid="FlowStepAnimatedThumbnail"
+      src={frames[effectiveFrameIndex].data}
+      style={{width, height}}
+      alt="Animated screenshots of a page tested by Lighthouse"
+    />
+  );
+};
+
 export const FlowStepThumbnail: FunctionComponent<{
   reportResult: LH.ReportResult,
   width?: number,
   height?: number,
 }> = ({reportResult, width, height}) => {
   const screenshot = getScreenshot(reportResult);
+  const frames = getFilmstripFrames(reportResult);
 
   // Resize the image to fit the viewport aspect ratio.
   const dimensions = getScreenDimensions(reportResult);
@@ -54,6 +87,15 @@ export const FlowStepThumbnail: FunctionComponent<{
     width = dimensions.width * height / dimensions.height;
   }
 
+  if (!width || !height) {
+    console.warn(new Error('FlowStepThumbnail requested without any dimensions').stack);
+    return <></>;
+  }
+
+  if (reportResult.gatherMode === 'timespan' && frames && frames.length) {
+    return <FlowStepAnimatedThumbnail frames={frames} width={width} height={height} />;
+  }
+
   return <>
     {
       screenshot &&

package/flow-report/src/summary/category.tsx

@@ -35,11 +35,16 @@ export const SummaryTooltip: FunctionComponent<{
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
   const strings = useUIStrings();
-  const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
+  const {
+    numPassed,
+    numPassableAudits,
+    numInformative,
+    totalWeight,
+  } = Util.calculateCategoryFraction(category);
 
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
   const rating = displayAsFraction ?
-    Util.calculateRating(numPassed / numAudits) :
+    Util.calculateRating(numPassed / numPassableAudits) :
     Util.calculateRating(category.score);
 
   return (
@@ -64,8 +69,19 @@ export const SummaryTooltip: FunctionComponent<{
         }
       </div>
       <div className="SummaryTooltip__fraction">
-        {`${numPassed} audits passed / ${numAudits} audits run`}
+        {
+          // TODO(FLOW-I18N): Placeholder format.
+          `${numPassed} audits passed / ${numPassableAudits} passable audits`
+        }
       </div>
+      {
+        // TODO(FLOW-I18N): Placeholder format.
+        numInformative ?
+          <div className="SummaryTooltip__informative">
+            {`${numInformative} informative audits`}
+          </div> :
+          null
+      }
     </div>
   );
 };

package/flow-report/src/summary/summary.tsx

@@ -63,10 +63,7 @@ export const SummaryFlowStep: FunctionComponent<{
             <Separator/>
           </div>
       }
-      {
-        lhr.gatherMode !== 'timespan' &&
-          <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
-      }
+      <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
         <div className="SummaryFlowStep__mode">{modeDescription}</div>
@@ -129,6 +126,7 @@ export const SummaryHeader: FunctionComponent = () => {
     }
   }
 
+  // TODO(FLOW-I18N): Placeholder format.
   const subtitleCounts = [];
   if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
   if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);

package/flow-report/src/util.ts

@@ -43,6 +43,7 @@ export function getScreenDimensions(reportResult: LH.ReportResult) {
 export function getScreenshot(reportResult: LH.ReportResult) {
   const fullPageScreenshotAudit = reportResult.audits['full-page-screenshot'];
   const fullPageScreenshot =
+    fullPageScreenshotAudit &&
     fullPageScreenshotAudit.details &&
     fullPageScreenshotAudit.details.type === 'full-page-screenshot' &&
     fullPageScreenshotAudit.details.screenshot.data;
@@ -50,6 +51,20 @@ export function getScreenshot(reportResult: LH.ReportResult) {
   return fullPageScreenshot || null;
 }
 
+export function getFilmstripFrames(
+  reportResult: LH.ReportResult
+): Array<{data: string}> | undefined {
+  const filmstripAudit = reportResult.audits['screenshot-thumbnails'];
+  if (!filmstripAudit) return undefined;
+
+  const frameItems =
+    filmstripAudit.details &&
+    filmstripAudit.details.type === 'filmstrip' &&
+    filmstripAudit.details.items;
+
+  return frameItems || undefined;
+}
+
 export function getModeDescription(mode: LH.Result.GatherMode, strings: UIStringsType) {
   switch (mode) {
     case 'navigation': return strings.navigationDescription;

package/flow-report/test/common-test.tsx

@@ -0,0 +1,89 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. 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.
+ */
+
+import {jest} from '@jest/globals';
+import {act, render} from '@testing-library/preact';
+
+import {FlowStepThumbnail} from '../src/common';
+
+let lhr: LH.ReportResult;
+
+jest.useFakeTimers();
+
+describe('FlowStepThumbnail', () => {
+  beforeEach(() => {
+    global.console.warn = jest.fn();
+
+    lhr = {
+      gatherMode: 'navigation',
+      configSettings: {screenEmulation: {width: 400, height: 600}},
+      audits: {
+        'full-page-screenshot': {
+          details: {
+            type: 'full-page-screenshot',
+            screenshot: {data: 'baef01', width: 400, height: 600},
+            nodes: {},
+          },
+        },
+      },
+    } as any;
+  });
+
+  it('renders a thumbnail', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} height={200} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('200px');
+    expect(thumbnail.style.height).toEqual('200px');
+  });
+
+  it('renders nothing without dimensions', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} />);
+
+    expect(() => root.getByAltText(/Screenshot/)).toThrow();
+    expect(global.console.warn).toHaveBeenCalled();
+  });
+
+  it('interpolates height', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} width={200} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('200px');
+    expect(thumbnail.style.height).toEqual('300px');
+  });
+
+  it('interpolates width', () => {
+    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Screenshot/);
+    expect(thumbnail.style.width).toEqual('100px');
+    expect(thumbnail.style.height).toEqual('150px');
+  });
+
+  it('renders animated thumbnail for timespan', async () => {
+    lhr.gatherMode = 'timespan';
+    lhr.audits['screenshot-thumbnails'] = {
+      details: {
+        type: 'filmstrip',
+        items: [
+          {data: 'frame1'},
+          {data: 'frame2'},
+        ],
+      },
+    } as any;
+    const root = render(<FlowStepThumbnail reportResult={lhr} height={150} />);
+
+    const thumbnail = root.getByAltText(/Animated/) as HTMLImageElement;
+    expect(thumbnail.style.width).toEqual('100px');
+    expect(thumbnail.style.height).toEqual('150px');
+
+    expect(thumbnail.src).toContain('frame1');
+    await act(() => {
+      jest.advanceTimersByTime(251);
+    });
+    expect(thumbnail.src).toContain('frame2');
+  });
+});

package/flow-report/test/summary/category-test.tsx

@@ -28,11 +28,12 @@ beforeEach(() => {
 describe('SummaryTooltip', () => {
   it('renders tooltip with rating', async () => {
     const category: any = {
+      id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
       ],
     };
 
@@ -43,16 +44,17 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Average')).toBeTruthy();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 audits run')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
     const category: any = {
+      id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 0},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 0, group: 'diagnostics'},
       ],
     };
 
@@ -63,16 +65,17 @@ describe('SummaryTooltip', () => {
 
     expect(() => root.getByText(/^(Average|Good|Poor)$/)).toThrow();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 audits run')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
     const category: any = {
+      id: 'performance',
       score: 1,
       auditRefs: [
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1},
-        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1},
-        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
       ],
     };
 
@@ -83,6 +86,28 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed / 3 audits run')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+  });
+
+  it('renders informative audit count if any', async () => {
+    const category: any = {
+      id: 'performance',
+      score: 1,
+      auditRefs: [
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 1, scoreDisplayMode: 'binary'}, weight: 1, group: 'diagnostics'},
+        {result: {score: 0, scoreDisplayMode: 'informative'}, weight: 1, group: 'diagnostics'},
+      ],
+    };
+
+    const root = render(
+      <SummaryTooltip category={category} gatherMode="navigation"/>,
+      {wrapper}
+    );
+
+    expect(root.getByText('Good')).toBeTruthy();
+    expect(root.getByText('100')).toBeTruthy();
+    expect(root.getByText('2 audits passed / 2 passable audits')).toBeTruthy();
+    expect(root.getByText('1 informative audits')).toBeTruthy();
   });
 });

package/lighthouse-cli/test/smokehouse/report-assert.js

@@ -200,26 +200,42 @@ function pruneExpectations(localConsole, lhr, expected, reportOptions) {
           JSON.stringify(value, null, 2),
           `Actual Chromium version: ${getChromeVersion()}`,
         ].join(' '));
-        delete obj[key];
+        if (Array.isArray(obj)) {
+          obj.splice(Number(key), 1);
+        } else {
+          delete obj[key];
+        }
       } else if (value._legacyOnly && isFraggleRock) {
         localConsole.log([
           `[${key}] marked legacy only but run is Fraggle Rock, pruning expectation:`,
           JSON.stringify(value, null, 2),
         ].join(' '));
-        delete obj[key];
+        if (Array.isArray(obj)) {
+          obj.splice(Number(key), 1);
+        } else {
+          delete obj[key];
+        }
       } else if (value._fraggleRockOnly && !isFraggleRock) {
         localConsole.log([
           `[${key}] marked Fraggle Rock only but run is legacy, pruning expectation:`,
           JSON.stringify(value, null, 2),
           `Actual channel: ${lhr.configSettings.channel}`,
         ].join(' '));
-        delete obj[key];
+        if (Array.isArray(obj)) {
+          obj.splice(Number(key), 1);
+        } else {
+          delete obj[key];
+        }
       } else if (value._skipInBundled && !isBundled) {
         localConsole.log([
           `[${key}] marked as skip in bundled and runner is bundled, pruning expectation:`,
           JSON.stringify(value, null, 2),
         ].join(' '));
-        delete obj[key];
+        if (Array.isArray(obj)) {
+          obj.splice(Number(key), 1);
+        } else {
+          delete obj[key];
+        }
       } else {
         pruneRecursively(value);
       }

package/lighthouse-core/util-commonjs.js

@@ -521,15 +521,31 @@ class Util {
    * @param {LH.ReportResult.Category} category
    */
   static calculateCategoryFraction(category) {
-    const numAudits = category.auditRefs.length;
-
+    let numPassableAudits = 0;
     let numPassed = 0;
+    let numInformative = 0;
     let totalWeight = 0;
     for (const auditRef of category.auditRefs) {
+      const auditPassed = Util.showAsPassed(auditRef.result);
+      const notDisplayed = !auditRef.group && category.id === 'performance';
+
+      // Don't count the audit if it's manual, N/A, or isn't displayed.
+      if (notDisplayed ||
+          auditRef.result.scoreDisplayMode === 'manual' ||
+          auditRef.result.scoreDisplayMode === 'notApplicable') {
+        continue;
+      } else if (auditRef.result.scoreDisplayMode === 'informative') {
+        if (!auditPassed) {
+          ++numInformative;
+        }
+        continue;
+      }
+
+      ++numPassableAudits;
       totalWeight += auditRef.weight;
-      if (Util.showAsPassed(auditRef.result)) numPassed++;
+      if (auditPassed) numPassed++;
     }
-    return {numPassed, numAudits, totalWeight};
+    return {numPassed, numPassableAudits, numInformative, totalWeight};
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.5.1-dev.20211007",
+  "version": "8.5.1-dev.20211011",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -176,6 +176,7 @@
     "ts-jest": "^27.0.4",
     "typed-query-selector": "^2.4.0",
     "typescript": "4.4.3",
+    "wait-for-expect": "^3.0.2",
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {

package/report/renderer/category-renderer.js

@@ -375,12 +375,12 @@ export class CategoryRenderer {
     const wrapper = this.dom.find('a.lh-fraction__wrapper', tmpl);
     this.dom.safelySetHref(wrapper, `#${category.id}`);
 
-    const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
+    const {numPassed, numPassableAudits, totalWeight} = Util.calculateCategoryFraction(category);
 
-    const fraction = numPassed / numAudits;
+    const fraction = numPassed / numPassableAudits;
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
-    text.textContent = `${numPassed}/${numAudits}`;
+    text.textContent = `${numPassed}/${numPassableAudits}`;
     content.appendChild(text);
 
     let rating = Util.calculateRating(fraction);

package/report/renderer/performance-category-renderer.js

@@ -172,33 +172,35 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     }
 
     // Metrics.
-    const metricAuditsEl = this.renderAuditGroup(groups.metrics);
+    const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
+    if (metricAudits.length) {
+      const metricAuditsEl = this.renderAuditGroup(groups.metrics);
 
-    // Metric descriptions toggle.
-    const toggleTmpl = this.dom.createComponent('metricsToggle');
-    const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
-    metricAuditsEl.append(..._toggleEl.childNodes);
+      // Metric descriptions toggle.
+      const toggleTmpl = this.dom.createComponent('metricsToggle');
+      const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl);
+      metricAuditsEl.append(..._toggleEl.childNodes);
 
-    const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
-    const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
+      const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
 
-    metricAudits.forEach(item => {
-      metricsBoxesEl.appendChild(this._renderMetric(item));
-    });
+      metricAudits.forEach(item => {
+        metricsBoxesEl.appendChild(this._renderMetric(item));
+      });
 
-    const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
-    const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
-    estValuesEl.appendChild(disclaimerEl);
+      const estValuesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics__disclaimer');
+      const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
+      estValuesEl.appendChild(disclaimerEl);
 
-    // Add link to score calculator.
-    const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
-    calculatorLink.target = '_blank';
-    calculatorLink.textContent = strings.calculatorLink;
-    this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
+      // Add link to score calculator.
+      const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
+      calculatorLink.target = '_blank';
+      calculatorLink.textContent = strings.calculatorLink;
+      this.dom.safelySetHref(calculatorLink, this._getScoringCalculatorHref(category.auditRefs));
 
 
-    metricAuditsEl.classList.add('lh-audit-group--metrics');
-    element.appendChild(metricAuditsEl);
+      metricAuditsEl.classList.add('lh-audit-group--metrics');
+      element.appendChild(metricAuditsEl);
+    }
 
     // Filmstrip
     const timelineEl = this.dom.createChildOf(element, 'div', 'lh-filmstrip-container');

package/report/renderer/util.js

@@ -518,15 +518,31 @@ export class Util {
    * @param {LH.ReportResult.Category} category
    */
   static calculateCategoryFraction(category) {
-    const numAudits = category.auditRefs.length;
-
+    let numPassableAudits = 0;
     let numPassed = 0;
+    let numInformative = 0;
     let totalWeight = 0;
     for (const auditRef of category.auditRefs) {
+      const auditPassed = Util.showAsPassed(auditRef.result);
+      const notDisplayed = !auditRef.group && category.id === 'performance';
+
+      // Don't count the audit if it's manual, N/A, or isn't displayed.
+      if (notDisplayed ||
+          auditRef.result.scoreDisplayMode === 'manual' ||
+          auditRef.result.scoreDisplayMode === 'notApplicable') {
+        continue;
+      } else if (auditRef.result.scoreDisplayMode === 'informative') {
+        if (!auditPassed) {
+          ++numInformative;
+        }
+        continue;
+      }
+
+      ++numPassableAudits;
       totalWeight += auditRef.weight;
-      if (Util.showAsPassed(auditRef.result)) numPassed++;
+      if (auditPassed) numPassed++;
     }
-    return {numPassed, numAudits, totalWeight};
+    return {numPassed, numPassableAudits, numInformative, totalWeight};
   }
 }
 

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

@@ -297,7 +297,7 @@ describe('CategoryRenderer', () => {
       );
 
       const gauge = categoryDOM.querySelector('.lh-fraction__content');
-      assert.equal(gauge.textContent.trim(), '49/54', 'fraction is included');
+      assert.equal(gauge.textContent.trim(), '13/18', 'fraction is included');
 
       const score = categoryDOM.querySelector('.lh-category-header');
       const title = score.querySelector('.lh-fraction__label');

package/report/test/renderer/performance-category-renderer-test.js

@@ -69,6 +69,18 @@ describe('PerfCategoryRenderer', () => {
     assert.equal(timelineElements.length + nontimelineElements.length, metricAudits.length);
   });
 
+  it('does not render metrics section if no metric group audits', () => {
+    // Remove metrics from category
+    const newCategory = JSON.parse(JSON.stringify(category));
+    newCategory.auditRefs = category.auditRefs.filter(audit => audit.group !== 'metrics');
+
+    const categoryDOM = renderer.render(newCategory, sampleResults.categoryGroups);
+    const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group');
+    const metricSection = categoryDOM.querySelector('.lh-audit-group--metrics');
+    assert.ok(!metricSection);
+    assert.equal(sections.length, 4);
+  });
+
   it('renders the metrics variance disclaimer as markdown', () => {
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
     const disclaimerEl =

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

@@ -399,17 +399,77 @@ describe('util helpers', () => {
   describe('#calculateCategoryFraction', () => {
     it('returns passed audits and total audits', () => {
       const category = {
+        id: 'performance',
         auditRefs: [
-          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}},
+          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
         ],
       };
-      const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
-      expect(numPassed).toEqual(3);
-      expect(numAudits).toEqual(4);
-      expect(totalWeight).toEqual(6);
+      const fraction = Util.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 4,
+        numPassed: 3,
+        numInformative: 0,
+        totalWeight: 6,
+      });
+    });
+
+    it('ignores manual audits, N/A audits, and performance audits with no group', () => {
+      const category = {
+        id: 'performance',
+        auditRefs: [
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'diagnostics'},
+        ],
+      };
+      const fraction = Util.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 1,
+        numPassed: 1,
+        numInformative: 0,
+        totalWeight: 1,
+      });
+    });
+
+    it('does not ignore audits with no group in non-performance category', () => {
+      const category = {
+        id: 'seo',
+        auditRefs: [
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
+        ],
+      };
+      const fraction = Util.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 2,
+        numPassed: 2,
+        numInformative: 0,
+        totalWeight: 2,
+      });
+    });
+
+    it('tracks informative audits separately', () => {
+      const category = {
+        id: 'performance',
+        auditRefs: [
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
+        ],
+      };
+      const fraction = Util.calculateCategoryFraction(category);
+      expect(fraction).toEqual({
+        numPassableAudits: 2,
+        numPassed: 2,
+        numInformative: 2,
+        totalWeight: 2,
+      });
     });
   });
 });