diff --git a/test/index.js b/test/index.js index 9fa0cf8..0794732 100644 --- a/test/index.js +++ b/test/index.js @@ -6,26 +6,34 @@ const psiToken = process.env.PSI_TOKEN || '' serial.only('Measure field perf for site in CruX', async (t) => { const { audits, categories } = await runLighthouse('https://example.com/') - checkResponse(audits['field-fcp']) - checkResponse(audits['field-lcp']) - checkResponse(audits['field-fid']) - checkResponse(audits['field-cls']) - checkResponse(audits['field-fcp-origin']) - checkResponse(audits['field-lcp-origin']) - checkResponse(audits['field-fid-origin']) - checkResponse(audits['field-cls-origin']) - t.snapshot(categories['lighthouse-plugin-field-performance']) + const category = categories['lighthouse-plugin-field-performance'] + checkResponse('field-fcp') + checkResponse('field-lcp') + checkResponse('field-fid') + checkResponse('field-cls') + checkResponse('field-fcp-origin') + checkResponse('field-lcp-origin') + checkResponse('field-fid-origin') + checkResponse('field-cls-origin') + + console.log('field performance score: %s', category.score) + t.snapshot(omit(category, ['score'])) - /** @param {any} audit */ - function checkResponse(audit) { - t.snapshot(omit(audit, ['details', 'displayValue', 'numericValue', 'score'])) + /** @param {string} auditName */ + function checkResponse(auditName) { + const audit = audits[auditName] + t.snapshot(omit(audit, ['details', 'displayValue', 'numericValue', 'score']), `check ${auditName}`) t.true(isNumber(audit.score) && audit.score >= 0 && audit.score <= 1) t.true(isNumber(audit.numericValue)) t.true(isString(audit.displayValue)) - t.snapshot({ - ...audit.details, - items: audit.details.items.map(/** @param {object} item */ (item) => omit(item, ['distribution'])), - }) + console.log('%s: %s/%s – %s', auditName, audit.numericValue, audit.displayValue, audit.score) + t.snapshot( + { + ...audit.details, + items: audit.details.items.map(/** @param {object} item */ (item) => omit(item, ['distribution'])), + }, + `details ${auditName}` + ) } }) diff --git a/test/snapshots/test/index.js.md b/test/snapshots/test/index.js.md index 6e1647a..abc2d04 100644 --- a/test/snapshots/test/index.js.md +++ b/test/snapshots/test/index.js.md @@ -6,17 +6,20 @@ Generated by [AVA](https://avajs.dev). ## Measure field perf for site in CruX -> Snapshot 1 +> check field-fcp { description: 'First Contentful Paint (FCP) marks the first time in the page load timeline where the user can see anything on the screen. A fast FCP (75th percentile) helps reassure the user that something is happening. [Learn more about FCP](https://web.dev/fcp/)', + errorMessage: undefined, + explanation: undefined, id: 'field-fcp', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'First Contentful Paint (URL)', + warnings: undefined, } -> Snapshot 2 +> details field-fcp { headings: [ @@ -33,29 +36,33 @@ Generated by [AVA](https://avajs.dev). ], items: [ { - category: 'Good (faster than 1.0 s)', + category: 'Good (faster than 1.8 s)', }, { - category: 'Needs improvement (from 1.0 s to 3.0 s)', + category: 'Needs improvement (from 1.8 s to 3.0 s)', }, { category: 'Poor (longer than 3.0 s)', }, ], + summary: undefined, type: 'table', } -> Snapshot 3 +> check field-lcp { description: 'Largest Contentful Paint (LCP) reports the render time of the largest content element that is visible within the viewport. A fast LCP (75th percentile) helps reassure the user that the page is useful. [Learn more about LCP](https://web.dev/lcp/)', + errorMessage: undefined, + explanation: undefined, id: 'field-lcp', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'Largest Contentful Paint (URL)', + warnings: undefined, } -> Snapshot 4 +> details field-lcp { headings: [ @@ -81,20 +88,24 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 4.0 s)', }, ], + summary: undefined, type: 'table', } -> Snapshot 5 +> check field-fid { description: 'First Input Delay (FID) quantifies the experience users feel when trying to interact with unresponsive pages. A fast FID (75th percentile) helps ensure that the page is usable. [Learn more about FID](https://web.dev/fid/)', + errorMessage: undefined, + explanation: undefined, id: 'field-fid', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'First Input Delay (URL)', + warnings: undefined, } -> Snapshot 6 +> details field-fid { headings: [ @@ -120,20 +131,24 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 300 ms)', }, ], + summary: undefined, type: 'table', } -> Snapshot 7 +> check field-cls { description: 'Cumulative Layout Shift (CLS) measures the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A low CLS (75th percentile) helps ensure that the page is delightful. [Learn more about CLS](https://web.dev/cls/)', + errorMessage: undefined, + explanation: undefined, id: 'field-cls', numericUnit: 'unitless', scoreDisplayMode: 'numeric', title: 'Cumulative Layout Shift (URL)', + warnings: undefined, } -> Snapshot 8 +> details field-cls { headings: [ @@ -159,20 +174,24 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 0.25)', }, ], + summary: undefined, type: 'table', } -> Snapshot 9 +> check field-fcp-origin { description: 'First Contentful Paint (FCP) marks the first time in the page load timeline where the user can see anything on the screen. The value is 75th percentile of the origin traffic. [Learn more about FCP](https://web.dev/fcp/)', + errorMessage: undefined, + explanation: undefined, id: 'field-fcp-origin', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'First Contentful Paint (Origin)', + warnings: undefined, } -> Snapshot 10 +> details field-fcp-origin { headings: [ @@ -189,29 +208,33 @@ Generated by [AVA](https://avajs.dev). ], items: [ { - category: 'Good (faster than 1.0 s)', + category: 'Good (faster than 1.8 s)', }, { - category: 'Needs improvement (from 1.0 s to 3.0 s)', + category: 'Needs improvement (from 1.8 s to 3.0 s)', }, { category: 'Poor (longer than 3.0 s)', }, ], + summary: undefined, type: 'table', } -> Snapshot 11 +> check field-lcp-origin { description: 'Largest Contentful Paint (LCP) marks the time in the page load timeline when the page\'s main content has likely loaded. The value is 75th percentile of the origin traffic. [Learn more about LCP](https://web.dev/lcp/)', + errorMessage: undefined, + explanation: undefined, id: 'field-lcp-origin', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'Largest Contentful Paint (Origin)', + warnings: undefined, } -> Snapshot 12 +> details field-lcp-origin { headings: [ @@ -237,20 +260,24 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 4.0 s)', }, ], + summary: undefined, type: 'table', } -> Snapshot 13 +> check field-fid-origin { description: 'First Input Delay (FID) quantifies the experience users feel when trying to interact with unresponsive pages. The value is 75th percentile of the origin traffic. [Learn more about FID](https://web.dev/fid/)', + errorMessage: undefined, + explanation: undefined, id: 'field-fid-origin', numericUnit: 'millisecond', scoreDisplayMode: 'numeric', title: 'First Input Delay (Origin)', + warnings: undefined, } -> Snapshot 14 +> details field-fid-origin { headings: [ @@ -276,20 +303,24 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 300 ms)', }, ], + summary: undefined, type: 'table', } -> Snapshot 15 +> check field-cls-origin { description: 'Cumulative Layout Shift (CLS) measures visual stability, and it helps quantify how often users experience unexpected layout shifts. The value is 75th percentile of the origin traffic. [Learn more about CLS](https://web.dev/cls/)', + errorMessage: undefined, + explanation: undefined, id: 'field-cls-origin', numericUnit: 'unitless', scoreDisplayMode: 'numeric', title: 'Cumulative Layout Shift (Origin)', + warnings: undefined, } -> Snapshot 16 +> details field-cls-origin { headings: [ @@ -315,6 +346,7 @@ Generated by [AVA](https://avajs.dev). category: 'Poor (longer than 0.25)', }, ], + summary: undefined, type: 'table', } @@ -365,155 +397,5 @@ Generated by [AVA](https://avajs.dev). ], description: 'These metrics show the performance of the page over the past 30 days. Data is collected anonymously in for real-world Chrome users and provided by Chrome UX Report. [Learn More](https://developers.google.com/web/tools/chrome-user-experience-report/)', id: 'lighthouse-plugin-field-performance', - score: 0.96, - title: 'Field Performance', - } - -## Measure field perf for site site not in CruX - -> Snapshot 1 - - { - description: 'First Contentful Paint (FCP) marks the first time in the page load timeline where the user can see anything on the screen. A fast FCP (75th percentile) helps reassure the user that something is happening. [Learn more about FCP](https://web.dev/fcp/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world First Contentful Paint (URL) data for this page.`, - id: 'field-fcp', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'First Contentful Paint (URL)', - } - -> Snapshot 2 - - { - description: 'Largest Contentful Paint (LCP) reports the render time of the largest content element that is visible within the viewport. A fast LCP (75th percentile) helps reassure the user that the page is useful. [Learn more about LCP](https://web.dev/lcp/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world Largest Contentful Paint (URL) data for this page.`, - id: 'field-lcp', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'Largest Contentful Paint (URL)', - } - -> Snapshot 3 - - { - description: 'First Input Delay (FID) quantifies the experience users feel when trying to interact with unresponsive pages. A fast FID (75th percentile) helps ensure that the page is usable. [Learn more about FID](https://web.dev/fid/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world First Input Delay (URL) data for this page.`, - id: 'field-fid', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'First Input Delay (URL)', - } - -> Snapshot 4 - - { - description: 'Cumulative Layout Shift (CLS) measures the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A low CLS (75th percentile) helps ensure that the page is delightful. [Learn more about CLS](https://web.dev/cls/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world Cumulative Layout Shift (URL) data for this page.`, - id: 'field-cls', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'Cumulative Layout Shift (URL)', - } - -> Snapshot 5 - - { - description: 'First Contentful Paint (FCP) marks the first time in the page load timeline where the user can see anything on the screen. The value is 75th percentile of the origin traffic. [Learn more about FCP](https://web.dev/fcp/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world First Contentful Paint (Origin) data for this page.`, - id: 'field-fcp-origin', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'First Contentful Paint (Origin)', - } - -> Snapshot 6 - - { - description: 'Largest Contentful Paint (LCP) marks the time in the page load timeline when the page\'s main content has likely loaded. The value is 75th percentile of the origin traffic. [Learn more about LCP](https://web.dev/lcp/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world Largest Contentful Paint (Origin) data for this page.`, - id: 'field-lcp-origin', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'Largest Contentful Paint (Origin)', - } - -> Snapshot 7 - - { - description: 'First Input Delay (FID) quantifies the experience users feel when trying to interact with unresponsive pages. The value is 75th percentile of the origin traffic. [Learn more about FID](https://web.dev/fid/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world First Input Delay (Origin) data for this page.`, - id: 'field-fid-origin', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'First Input Delay (Origin)', - } - -> Snapshot 8 - - { - description: 'Cumulative Layout Shift (CLS) measures visual stability, and it helps quantify how often users experience unexpected layout shifts. The value is 75th percentile of the origin traffic. [Learn more about CLS](https://web.dev/cls/)', - explanation: `The Chrome User Experience Report ␊ - does not have sufficient real-world Cumulative Layout Shift (Origin) data for this page.`, - id: 'field-cls-origin', - score: null, - scoreDisplayMode: 'notApplicable', - title: 'Cumulative Layout Shift (Origin)', - } - -> Snapshot 9 - - { - auditRefs: [ - { - group: 'lighthouse-plugin-field-performance-page', - id: 'field-fcp', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-page', - id: 'field-lcp', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-page', - id: 'field-fid', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-page', - id: 'field-cls', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-origin', - id: 'field-fcp-origin', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-origin', - id: 'field-lcp-origin', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-origin', - id: 'field-fid-origin', - weight: 0, - }, - { - group: 'lighthouse-plugin-field-performance-origin', - id: 'field-cls-origin', - weight: 0, - }, - ], - description: 'These metrics show the performance of the page over the past 30 days. Data is collected anonymously in for real-world Chrome users and provided by Chrome UX Report. [Learn More](https://developers.google.com/web/tools/chrome-user-experience-report/)', - id: 'lighthouse-plugin-field-performance', - score: 0, title: 'Field Performance', } diff --git a/test/snapshots/test/index.js.snap b/test/snapshots/test/index.js.snap index d9c1fb6..c5c365e 100644 Binary files a/test/snapshots/test/index.js.snap and b/test/snapshots/test/index.js.snap differ