core: change displayValue to be string only (#6767)
This commit is contained in:
Shane Exterkamp
Brendan Kenny
Родитель
4f4ec552f7
Коммит
51d204762e
|
|
@ -15,14 +15,28 @@ const isDeepEqual = require('lodash.isequal');
|
|||
const Audit = require('./audit');
|
||||
const mobileThrottling = require('../config/constants').throttling.mobileSlow4G;
|
||||
const Interactive = require('../computed/metrics/interactive.js');
|
||||
|
||||
const displayValueText = `Interactive at %d\xa0s`;
|
||||
const displayValueTextWithOverride = `Interactive on simulated mobile network at %d\xa0s`;
|
||||
const i18n = require('../lib/i18n/i18n.js');
|
||||
|
||||
// Maximum TTI to be considered "fast" for PWA baseline checklist
|
||||
// https://developers.google.com/web/progressive-web-apps/checklist
|
||||
const MAXIMUM_TTI = 10 * 1000;
|
||||
|
||||
const UIStrings = {
|
||||
/** Imperative title of a Lighthouse audit that tells the user that their page has loaded fast enough to be considered a Progressive Web App. This is displayed in a list of audit titles that Lighthouse generates. */
|
||||
title: 'Page load is fast enough on mobile networks',
|
||||
/** Imperative title of a Lighthouse audit that tells the user that their page has loaded fast enough to be considered a Progressive Web App. This imperative title is shown to users when the web page has loaded too slowly to be considered a Progressive Web App. */
|
||||
failureTitle: 'Page load is not fast enough on mobile networks',
|
||||
/** Description of a Lighthouse audit that tells the user *why* they need to load fast enough on mobile networks. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
||||
description: 'A fast page load over a cellular network ensures a good mobile user experience. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/fast-3g).',
|
||||
/** [ICU Syntax] Label for the audit identifying the time it took for the page to become interactive. */
|
||||
displayValueText: 'Interactive at {timeInMs, number, seconds}\xa0s',
|
||||
/** [ICU Syntax] Label for the audit identifying the time it took for the page to become interactive on a mobile network. */
|
||||
displayValueTextWithOverride: 'Interactive on simulated mobile network at ' +
|
||||
'{timeInMs, number, seconds}\xa0s',
|
||||
};
|
||||
|
||||
const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
|
||||
|
||||
class LoadFastEnough4Pwa extends Audit {
|
||||
/**
|
||||
* @return {LH.Audit.Meta}
|
||||
|
|
@ -30,11 +44,9 @@ class LoadFastEnough4Pwa extends Audit {
|
|||
static get meta() {
|
||||
return {
|
||||
id: 'load-fast-enough-for-pwa',
|
||||
title: 'Page load is fast enough on mobile networks',
|
||||
failureTitle: 'Page load is not fast enough on mobile networks',
|
||||
description:
|
||||
'A fast page load over a cellular network ensures a good mobile user experience. ' +
|
||||
'[Learn more](https://developers.google.com/web/tools/lighthouse/audits/fast-3g).',
|
||||
title: str_(UIStrings.title),
|
||||
failureTitle: str_(UIStrings.failureTitle),
|
||||
description: str_(UIStrings.description),
|
||||
requiredArtifacts: ['traces', 'devtoolsLogs'],
|
||||
};
|
||||
}
|
||||
|
|
@ -57,7 +69,8 @@ class LoadFastEnough4Pwa extends Audit {
|
|||
const override = context.settings.throttlingMethod === 'provided' ||
|
||||
!isDeepEqual(context.settings.throttling, mobileThrottling);
|
||||
|
||||
const displayValueFinal = override ? displayValueTextWithOverride : displayValueText;
|
||||
const displayValueTemplate = override ?
|
||||
UIStrings.displayValueTextWithOverride : UIStrings.displayValueText;
|
||||
|
||||
const settings = override ? Object.assign({}, context.settings, settingOverrides) :
|
||||
context.settings;
|
||||
|
|
@ -72,7 +85,7 @@ class LoadFastEnough4Pwa extends Audit {
|
|||
/** @type {string|undefined} */
|
||||
let explanation;
|
||||
if (!score) {
|
||||
displayValue = [displayValueFinal, tti.timing / 1000];
|
||||
displayValue = str_(displayValueTemplate, {timeInMs: tti.timing});
|
||||
explanation = 'Your page loads too slowly and is not interactive within 10 seconds. ' +
|
||||
'Look at the opportunities and diagnostics in the "Performance" section to learn how to ' +
|
||||
'improve.';
|
||||
|
|
@ -88,3 +101,4 @@ class LoadFastEnough4Pwa extends Audit {
|
|||
}
|
||||
|
||||
module.exports = LoadFastEnough4Pwa;
|
||||
module.exports.UIStrings = UIStrings;
|
||||
|
|
|
|||
|
|
@ -8,10 +8,24 @@
|
|||
/** @typedef {LH.Artifacts.FontSize['analyzedFailingNodesData'][0]} FailingNodeData */
|
||||
|
||||
const URL = require('../../lib/url-shim');
|
||||
const i18n = require('../../lib/i18n/i18n.js');
|
||||
const Audit = require('../audit');
|
||||
const ViewportAudit = require('../viewport');
|
||||
const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 60;
|
||||
|
||||
const UIStrings = {
|
||||
/** Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This is displayed in a list of audit titles that Lighthouse generates. */
|
||||
title: 'Document uses legible font sizes',
|
||||
/** Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This imperative title is shown to users when there is a font that is too small to be read by the user. */
|
||||
failureTitle: 'Document doesn\'t use legible font sizes',
|
||||
/** Description of a Lighthouse audit that tells the user *why* they need to use a larger font size. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
|
||||
description: 'Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/font-sizes).',
|
||||
/** [ICU Syntax] Label for the audit identifying font sizes that are too small. */
|
||||
displayValue: '{decimalProportion, number, extendedPercent} legible text',
|
||||
};
|
||||
|
||||
const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
|
||||
|
||||
/**
|
||||
* @param {Array<FailingNodeData>} fontSizeArtifact
|
||||
* @returns {Array<FailingNodeData>}
|
||||
|
|
@ -182,11 +196,9 @@ class FontSize extends Audit {
|
|||
static get meta() {
|
||||
return {
|
||||
id: 'font-size',
|
||||
title: 'Document uses legible font sizes',
|
||||
failureTitle: 'Document doesn\'t use legible font sizes',
|
||||
description: 'Font sizes less than 12px are too small to be legible and require mobile ' +
|
||||
'visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. ' +
|
||||
'[Learn more](https://developers.google.com/web/tools/lighthouse/audits/font-sizes).',
|
||||
title: str_(UIStrings.title),
|
||||
failureTitle: str_(UIStrings.failureTitle),
|
||||
description: str_(UIStrings.description),
|
||||
requiredArtifacts: ['FontSize', 'URL', 'Viewport'],
|
||||
};
|
||||
}
|
||||
|
|
@ -265,8 +277,9 @@ class FontSize extends Audit {
|
|||
});
|
||||
}
|
||||
|
||||
const decimalProportion = (percentageOfPassingText / 100);
|
||||
/** @type {LH.Audit.DisplayValue} */
|
||||
const displayValue = ['%.1d% legible text', percentageOfPassingText];
|
||||
const displayValue = str_(UIStrings.displayValue, {decimalProportion});
|
||||
const details = Audit.makeTableDetails(headings, tableData);
|
||||
const passed = percentageOfPassingText >= MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT;
|
||||
|
||||
|
|
@ -294,3 +307,4 @@ class FontSize extends Audit {
|
|||
}
|
||||
|
||||
module.exports = FontSize;
|
||||
module.exports.UIStrings = UIStrings;
|
||||
|
|
|
|||
|
|
@ -635,6 +635,26 @@
|
|||
"message": "All text remains visible during webfont loads",
|
||||
"description": "Title of a diagnostic audit that provides detail on if all the text on a webpage was visible while the page was loading its webfonts. This descriptive title is shown to users when the amount is acceptable and no user action is required."
|
||||
},
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | description": {
|
||||
"message": "A fast page load over a cellular network ensures a good mobile user experience. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/fast-3g).",
|
||||
"description": "Description of a Lighthouse audit that tells the user *why* they need to load fast enough on mobile networks. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
|
||||
},
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | displayValueText": {
|
||||
"message": "Interactive at {timeInMs, number, seconds} s",
|
||||
"description": "[ICU Syntax] Label for the audit identifying the time it took for the page to become interactive."
|
||||
},
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | displayValueTextWithOverride": {
|
||||
"message": "Interactive on simulated mobile network at {timeInMs, number, seconds} s",
|
||||
"description": "[ICU Syntax] Label for the audit identifying the time it took for the page to become interactive on a mobile network."
|
||||
},
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | failureTitle": {
|
||||
"message": "Page load is not fast enough on mobile networks",
|
||||
"description": "Imperative title of a Lighthouse audit that tells the user that their page has loaded fast enough to be considered a Progressive Web App. This imperative title is shown to users when the web page has loaded too slowly to be considered a Progressive Web App."
|
||||
},
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | title": {
|
||||
"message": "Page load is fast enough on mobile networks",
|
||||
"description": "Imperative title of a Lighthouse audit that tells the user that their page has loaded fast enough to be considered a Progressive Web App. This is displayed in a list of audit titles that Lighthouse generates."
|
||||
},
|
||||
"lighthouse-core/audits/mainthread-work-breakdown.js | columnCategory": {
|
||||
"message": "Category",
|
||||
"description": "Label for the Main Thread Category column in data tables, rows will have a main thread Category and main thread Task Name."
|
||||
|
|
@ -707,6 +727,22 @@
|
|||
"message": "Avoid multiple page redirects",
|
||||
"description": "Imperative title of a Lighthouse audit that tells the user to eliminate the redirects taken through multiple URLs to load the page. This is shown in a list of audits that Lighthouse generates."
|
||||
},
|
||||
"lighthouse-core/audits/seo/font-size.js | description": {
|
||||
"message": "Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/font-sizes).",
|
||||
"description": "Description of a Lighthouse audit that tells the user *why* they need to use a larger font size. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
|
||||
},
|
||||
"lighthouse-core/audits/seo/font-size.js | displayValue": {
|
||||
"message": "{decimalProportion, number, extendedPercent} legible text",
|
||||
"description": "[ICU Syntax] Label for the audit identifying font sizes that are too small."
|
||||
},
|
||||
"lighthouse-core/audits/seo/font-size.js | failureTitle": {
|
||||
"message": "Document doesn't use legible font sizes",
|
||||
"description": "Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This imperative title is shown to users when there is a font that is too small to be read by the user."
|
||||
},
|
||||
"lighthouse-core/audits/seo/font-size.js | title": {
|
||||
"message": "Document uses legible font sizes",
|
||||
"description": "Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This is displayed in a list of audit titles that Lighthouse generates."
|
||||
},
|
||||
"lighthouse-core/audits/time-to-first-byte.js | description": {
|
||||
"message": "Time To First Byte identifies the time at which your server sends a response. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/ttfb).",
|
||||
"description": "Description of a Lighthouse audit that tells the user *why* they should reduce the amount of time it takes their server to start responding to requests. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
|
||||
|
|
|
|||
|
|
@ -71,6 +71,11 @@ const formats = {
|
|||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1,
|
||||
},
|
||||
extendedPercent: {
|
||||
// Force allow up to two digits after decimal place in percentages. (Intl.NumberFormat options)
|
||||
maximumFractionDigits: 2,
|
||||
style: 'percent',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ describe('PWA: load-fast-enough-for-pwa audit', () => {
|
|||
return FastPWAAudit.audit(artifacts, {settings, computedCache: new Map()}).then(result => {
|
||||
assert.equal(result.score, false, 'not failing a long TTI value');
|
||||
assert.equal(result.rawValue, 15000);
|
||||
assert.deepEqual(result.displayValue, ['Interactive at %d\xa0s', 15]);
|
||||
expect(result.displayValue).toBeDisplayString('Interactive at 15.0\xa0s');
|
||||
assert.ok(result.explanation);
|
||||
});
|
||||
});
|
||||
|
|
@ -108,7 +108,8 @@ describe('PWA: load-fast-enough-for-pwa audit', () => {
|
|||
|
||||
const settings = {throttlingMethod: 'provided', throttling: {rttMs: 40, throughput: 100000}};
|
||||
const result = await FastPWAAudit.audit(artifacts, {settings, computedCache: new Map()});
|
||||
expect(result.displayValue).toContain('Interactive on simulated mobile network at %d\xa0s');
|
||||
expect(result.displayValue)
|
||||
.toBeDisplayString('Interactive on simulated mobile network at 24.9\xa0s');
|
||||
expect(result.rawValue).toBeGreaterThan(10000);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ describe('SEO: Font size audit', () => {
|
|||
const auditResult = FontSizeAudit.audit(artifacts);
|
||||
assert.equal(auditResult.rawValue, false);
|
||||
assert.ok(auditResult.explanation.includes('41%'));
|
||||
expect(auditResult.displayValue).toBeDisplayString('59% legible text');
|
||||
});
|
||||
|
||||
it('passes when there is no text', () => {
|
||||
|
|
@ -83,6 +84,7 @@ describe('SEO: Font size audit', () => {
|
|||
};
|
||||
const auditResult = FontSizeAudit.audit(artifacts);
|
||||
assert.equal(auditResult.rawValue, true);
|
||||
expect(auditResult.displayValue).toBeDisplayString('90% legible text');
|
||||
});
|
||||
|
||||
it('groups entries with same source, sorts them by coverage', () => {
|
||||
|
|
@ -122,6 +124,7 @@ describe('SEO: Font size audit', () => {
|
|||
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', () => {
|
||||
|
|
@ -143,6 +146,7 @@ describe('SEO: Font size audit', () => {
|
|||
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', () => {
|
||||
|
|
@ -162,5 +166,44 @@ describe('SEO: Font size audit', () => {
|
|||
const auditResult = FontSizeAudit.audit(artifacts);
|
||||
assert.equal(auditResult.rawValue, false);
|
||||
assert.ok(auditResult.explanation.includes('50%'));
|
||||
expect(auditResult.displayValue).toBeDisplayString('0% legible text');
|
||||
});
|
||||
|
||||
it('maintains 2 trailing decimal places', () => {
|
||||
const artifacts = {
|
||||
URL,
|
||||
Viewport: validViewport,
|
||||
FontSize: {
|
||||
totalTextLength: 323,
|
||||
visitedTextLength: 323,
|
||||
failingTextLength: 33,
|
||||
analyzedFailingTextLength: 33,
|
||||
analyzedFailingNodesData: [
|
||||
{textLength: 11, fontSize: 10, node: {nodeId: 1, localName: 'p', attributes: []}},
|
||||
{textLength: 22, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
|
||||
],
|
||||
},
|
||||
};
|
||||
const auditResult = FontSizeAudit.audit(artifacts);
|
||||
expect(auditResult.displayValue).toBeDisplayString('89.78% legible text');
|
||||
});
|
||||
|
||||
it('maintains 2 trailing decimal places with only 1 leading digit', () => {
|
||||
const artifacts = {
|
||||
URL,
|
||||
Viewport: validViewport,
|
||||
FontSize: {
|
||||
totalTextLength: 323,
|
||||
visitedTextLength: 323,
|
||||
failingTextLength: 315,
|
||||
analyzedFailingTextLength: 315,
|
||||
analyzedFailingNodesData: [
|
||||
{textLength: 311, fontSize: 10, node: {nodeId: 1, localName: 'p', attributes: []}},
|
||||
{textLength: 4, fontSize: 11, node: {nodeId: 2, localName: 'p', attributes: []}},
|
||||
],
|
||||
},
|
||||
};
|
||||
const auditResult = FontSizeAudit.audit(artifacts);
|
||||
expect(auditResult.displayValue).toBeDisplayString('2.48% legible text');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -76,4 +76,47 @@ describe('i18n', () => {
|
|||
expect(i18n.lookupLocale('jk-Latn-DE-1996-a-ext-x-phonebk-i-klingon')).toEqual('en');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Message values are properly formatted', () => {
|
||||
// Message strings won't be in locale files, so will fall back to values given here.
|
||||
const UIStrings = {
|
||||
helloWorld: 'Hello World',
|
||||
helloBytesWorld: 'Hello {in, number, bytes} World',
|
||||
helloMsWorld: 'Hello {in, number, milliseconds} World',
|
||||
helloSecWorld: 'Hello {in, number, seconds} World',
|
||||
helloTimeInMsWorld: 'Hello {timeInMs, number, seconds} World',
|
||||
helloPercentWorld: 'Hello {in, number, extendedPercent} World',
|
||||
};
|
||||
const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
|
||||
|
||||
it('formats a basic message', () => {
|
||||
const helloStr = str_(UIStrings.helloWorld);
|
||||
expect(helloStr).toBeDisplayString('Hello World');
|
||||
});
|
||||
|
||||
it('formats a message with bytes', () => {
|
||||
const helloBytesStr = str_(UIStrings.helloBytesWorld, {in: 1875});
|
||||
expect(helloBytesStr).toBeDisplayString('Hello 2 World');
|
||||
});
|
||||
|
||||
it('formats a message with milliseconds', () => {
|
||||
const helloMsStr = str_(UIStrings.helloMsWorld, {in: 432});
|
||||
expect(helloMsStr).toBeDisplayString('Hello 430 World');
|
||||
});
|
||||
|
||||
it('formats a message with seconds', () => {
|
||||
const helloSecStr = str_(UIStrings.helloSecWorld, {in: 753});
|
||||
expect(helloSecStr).toBeDisplayString('Hello 753.0 World');
|
||||
});
|
||||
|
||||
it('formats a message with seconds timeInMs', () => {
|
||||
const helloTimeInMsStr = str_(UIStrings.helloTimeInMsWorld, {timeInMs: 753543});
|
||||
expect(helloTimeInMsStr).toBeDisplayString('Hello 753.5 World');
|
||||
});
|
||||
|
||||
it('formats a message with extended percent', () => {
|
||||
const helloPercentStr = str_(UIStrings.helloPercentWorld, {in: 0.43078});
|
||||
expect(helloPercentStr).toBeDisplayString('Hello 43.08% World');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2610,10 +2610,7 @@
|
|||
"score": 1,
|
||||
"scoreDisplayMode": "binary",
|
||||
"rawValue": true,
|
||||
"displayValue": [
|
||||
"%.1d% legible text",
|
||||
100
|
||||
],
|
||||
"displayValue": "100% legible text",
|
||||
"details": {
|
||||
"type": "table",
|
||||
"headings": [
|
||||
|
|
@ -4399,6 +4396,12 @@
|
|||
"lighthouse-core/audits/metrics/first-meaningful-paint.js | description": [
|
||||
"audits[first-meaningful-paint].description"
|
||||
],
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | title": [
|
||||
"audits[load-fast-enough-for-pwa].title"
|
||||
],
|
||||
"lighthouse-core/audits/load-fast-enough-for-pwa.js | description": [
|
||||
"audits[load-fast-enough-for-pwa].description"
|
||||
],
|
||||
"lighthouse-core/audits/metrics/speed-index.js | title": [
|
||||
"audits[speed-index].title"
|
||||
],
|
||||
|
|
@ -4909,6 +4912,20 @@
|
|||
"lighthouse-core/audits/dobetterweb/dom-size.js | statisticDOMWidth": [
|
||||
"audits[dom-size].details.items[2].statistic"
|
||||
],
|
||||
"lighthouse-core/audits/seo/font-size.js | title": [
|
||||
"audits[font-size].title"
|
||||
],
|
||||
"lighthouse-core/audits/seo/font-size.js | description": [
|
||||
"audits[font-size].description"
|
||||
],
|
||||
"lighthouse-core/audits/seo/font-size.js | displayValue": [
|
||||
{
|
||||
"values": {
|
||||
"decimalProportion": 1
|
||||
},
|
||||
"path": "audits[font-size].displayValue"
|
||||
}
|
||||
],
|
||||
"lighthouse-core/config/default-config.js | performanceCategoryTitle": [
|
||||
"categories.performance.title"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -720,7 +720,7 @@
|
|||
],
|
||||
"type": "table"
|
||||
},
|
||||
"displayValue": "%.1d% legible text | 100",
|
||||
"displayValue": "100% legible text",
|
||||
"id": "font-size",
|
||||
"score": 1.0,
|
||||
"scoreDisplayMode": "binary",
|
||||
|
|
|
|||
|
|
@ -38,11 +38,7 @@ declare global {
|
|||
|
||||
export type ScoreDisplayMode = Audit.ScoreDisplayModes[keyof Audit.ScoreDisplayModes];
|
||||
|
||||
interface DisplayValueArray extends Array<string|number> {
|
||||
0: string;
|
||||
}
|
||||
|
||||
export type DisplayValue = string | DisplayValueArray;
|
||||
export type DisplayValue = string;
|
||||
|
||||
export interface Meta {
|
||||
/** The string identifier of the audit, in kebab case. */
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче