core(dom-size): display metric values as integers

[shogohida]

Summary

Fixes #14422

Related Issues/PRs

I think this issue was caused by the changes in this PR

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[adamraine]

This won't actually change the value because the numbers are already integers. The problem is that the Lighthouse report displays the integers with unnecessary granularity.

To fix this, we need to change the details items from

{
  statistic: str_(UIStrings.statisticDOMElements),
  value: stats.totalBodyElements,
}

to

{
  statistic: str_(UIStrings.statisticDOMElements),
  value: {
    type: 'numeric',
    granularity: 1,
    value: stats.totalBodyElements,
  },
}

[shogohida]

@adamraine
Thanks for your comment! I will push the changes when I finish

[connorjclark]

Please confirm your changes locally via yarn start https://www.example.com --view.

[shogohida]

@connorjclark @adamraine
I added settings of value in this commit as Adam indicated.

In addition, I checked there is no .0 with the command Connor taught me.

[adamraine]

Some of our tests are failing, to fix this you should

1. run yarn update:sample-json and commit the changes
2. Update the unit test expectations, verify with yarn unit-core

lighthouse/core/test/audits/dobetterweb/dom-size-test.js

Lines 24 to 32 in 60c2fa2

	it('calculates score hitting mid distribution', () => {
	const auditResult = DOMSize.audit(artifact, context);
	assert.equal(auditResult.score, 0.43);
	assert.equal(auditResult.numericValue, numElements);
	expect(auditResult.displayValue).toBeDisplayString('1,500 elements');
	assert.equal(auditResult.details.items[0].value, numElements);
	assert.equal(auditResult.details.items[1].value, 1);
	assert.equal(auditResult.details.items[2].value, 2);
	});

3. Update the smoke test expectations, verify with yarn smoke dbw

lighthouse/cli/test/smokehouse/test-definitions/dobetterweb.js

Lines 403 to 417 in 60c2fa2

	'dom-size': {
	score: 1,
	numericValue: 153,
	details: {
	items: [
	{statistic: 'Total DOM Elements', value: 153},
	{statistic: 'Maximum DOM Depth', value: 4},
	{
	statistic: 'Maximum Child Elements',
	value: 100,
	node: {snippet: '<div id="shadow-root-container">'},
	},
	],
	},
	},

[shogohida]

@adamraine
Thanks for your comment! Your support always helps me.

I made changes in the commits below.
1aa78ac
e87d529
aabd3db

A test case of difference at total-blocking-time audit.numericValue fails but it seems there is no relation between that failure and this PR.

https://github.com/GoogleChrome/lighthouse/actions/runs/3371728139/jobs/5594423467

[adamraine]

A test case of difference at total-blocking-time audit.numericValue fails but it seems there is no relation between that failure and this PR.

You are correct, this is a common flaky failure #14271. This PR looks good, thanks for the contribution!

[shogohida]

Thanks for your quick review! I hope to contribute more 👍