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

GoogleChrome · Nov 1, 2022 · 38cce6a · 38cce6a
1 parent 60c2fa2
commit 38cce6a
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 21 deletions.
diff --git a/cli/test/smokehouse/test-definitions/dobetterweb.js b/cli/test/smokehouse/test-definitions/dobetterweb.js
@@ -405,11 +405,29 @@ const expectations = {
         numericValue: 153,
         details: {
           items: [
-            {statistic: 'Total DOM Elements', value: 153},
-            {statistic: 'Maximum DOM Depth', value: 4},
+            {
+              statistic: 'Total DOM Elements',
+              value: {
+                type: 'numeric',
+                granularity: 1,
+                value: 153,
+              },
+            },
+            {
+              statistic: 'Maximum DOM Depth',
+              value: {
+                type: 'numeric',
+                granularity: 1,
+                value: 4,
+              },
+            },
             {
               statistic: 'Maximum Child Elements',
-              value: 100,
+              value: {
+                type: 'numeric',
+                granularity: 1,
+                value: 100,
+              },
               node: {snippet: '<div id="shadow-root-container">'},
             },
           ],

diff --git a/core/audits/dobetterweb/dom-size.js b/core/audits/dobetterweb/dom-size.js
@@ -94,17 +94,29 @@ class DOMSize extends Audit {
     const items = [
       {
         statistic: str_(UIStrings.statisticDOMElements),
-        value: stats.totalBodyElements,
+        value: {
+          type: 'numeric',
+          granularity: 1,
+          value: stats.totalBodyElements,
+        },
       },
       {
         node: Audit.makeNodeItem(stats.depth),
         statistic: str_(UIStrings.statisticDOMDepth),
-        value: stats.depth.max,
+        value: {
+          type: 'numeric',
+          granularity: 1,
+          value: stats.depth.max,
+        },
       },
       {
         node: Audit.makeNodeItem(stats.width),
         statistic: str_(UIStrings.statisticDOMWidth),
-        value: stats.width.max,
+        value: {
+          type: 'numeric',
+          granularity: 1,
+          value: stats.width.max,
+        },
       },
     ];
 

diff --git a/core/test/audits/dobetterweb/dom-size-test.js b/core/test/audits/dobetterweb/dom-size-test.js
@@ -26,9 +26,9 @@ describe('DOMSize audit', () => {
     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);
+    assert.equal(auditResult.details.items[0].value.value, numElements);
+    assert.equal(auditResult.details.items[1].value.value, 1);
+    assert.equal(auditResult.details.items[2].value.value, 2);
   });
 
   it('calculates score hitting top distribution', () => {

diff --git a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json
@@ -3342,7 +3342,11 @@
               "items": [
                 {
                   "statistic": "Total DOM Elements",
-                  "value": 70
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 70
+                  }
                 },
                 {
                   "node": {
@@ -3362,7 +3366,11 @@
                     "nodeLabel": "div.flex > div.inline-block > svg.h-6 > path"
                   },
                   "statistic": "Maximum DOM Depth",
-                  "value": 9
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 9
+                  }
                 },
                 {
                   "node": {
@@ -3382,7 +3390,11 @@
                     "nodeLabel": "body"
                   },
                   "statistic": "Maximum Child Elements",
-                  "value": 14
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 14
+                  }
                 }
               ]
             }
@@ -12025,7 +12037,11 @@
               "items": [
                 {
                   "statistic": "Total DOM Elements",
-                  "value": 155
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 155
+                  }
                 },
                 {
                   "node": {
@@ -12045,7 +12061,11 @@
                     "nodeLabel": "Oscar:"
                   },
                   "statistic": "Maximum DOM Depth",
-                  "value": 11
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 11
+                  }
                 },
                 {
                   "node": {
@@ -12065,7 +12085,11 @@
                     "nodeLabel": "body"
                   },
                   "statistic": "Maximum Child Elements",
-                  "value": 17
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 17
+                  }
                 }
               ]
             }
@@ -17417,7 +17441,11 @@
               "items": [
                 {
                   "statistic": "Total DOM Elements",
-                  "value": 81
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 81
+                  }
                 },
                 {
                   "node": {
@@ -17437,7 +17465,11 @@
                     "nodeLabel": "div.flex > div.inline-block > svg.h-6 > path"
                   },
                   "statistic": "Maximum DOM Depth",
-                  "value": 9
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 9
+                  }
                 },
                 {
                   "node": {
@@ -17457,7 +17489,11 @@
                     "nodeLabel": "body"
                   },
                   "statistic": "Maximum Child Elements",
-                  "value": 13
+                  "value": {
+                    "type": "numeric",
+                    "granularity": 1,
+                    "value": 13
+                  }
                 }
               ]
             }

diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json
@@ -5253,7 +5253,11 @@
         "items": [
           {
             "statistic": "Total DOM Elements",
-            "value": 153
+            "value": {
+              "type": "numeric",
+              "granularity": 1,
+              "value": 153
+            }
           },
           {
             "node": {
@@ -5273,7 +5277,11 @@
               "nodeLabel": "body > div > svg.social-facebook > title#social-facebook-5"
             },
             "statistic": "Maximum DOM Depth",
-            "value": 4
+            "value": {
+              "type": "numeric",
+              "granularity": 1,
+              "value": 4
+            }
           },
           {
             "node": {
@@ -5293,7 +5301,11 @@
               "nodeLabel": "body > div#shadow-root-container"
             },
             "statistic": "Maximum Child Elements",
-            "value": 100
+            "value": {
+              "type": "numeric",
+              "granularity": 1,
+              "value": 100
+            }
           }
         ]
       }