build: switch to yaml file for size test golden (#19621)

* build: move nav-list size-test into dedicated `list` folder

For consistency with other size-tests's we are going to add,
we should move the nav-list one into a folder that is
dedicated for list size tests.

* build: switch to yaml file for size test golden

Switches the size-test golden from a JSON file to a Yaml
file. The motivation is that JSON files quickly can result
in merge conflicts. This is mostly because of trailing commas
that need to be added when new entries are added to the size-test
golden. This should be improved with YAML where a new entry can
be added without having to change existing ones.

Author: devversion

.github/CODEOWNERS

@@ -321,7 +321,7 @@
 /.github/ISSUE_TEMPLATE/**                         @andrewseguin @jelbourn
 /.vscode/**                                        @angular/dev-infra-components @mmalerba
 /.ng-dev/**                                        @angular/dev-infra-components
-/goldens/size-test.json                            @jelbourn @mmalerba @crisbeto
+/goldens/size-test.yml                             @jelbourn @mmalerba @crisbeto
 /goldens/**                                        @angular/dev-infra-components
 /src/*                                             @angular/dev-infra-components
 /*                                                 @angular/dev-infra-components

goldens/BUILD.bazel

@@ -1,3 +1,3 @@
 exports_files([
-    "size-test.json",
+    "size-test.yaml",
 ])

goldens/size-test.json

@@ -0,0 +1 @@
+material/list/nav-list: 153231

goldens/size-test.yaml

@@ -12,6 +12,8 @@ ts_library(
     srcs = ["check-size.ts"],
     deps = [
         "@npm//@types/node",
+        "@npm//@types/yaml",
         "@npm//chalk",
+        "@npm//yaml",
     ],
 )

integration/size-test/BUILD.bazel

@@ -6,6 +6,7 @@
 
 import chalk from 'chalk';
 import {readFileSync, statSync, writeFileSync} from 'fs';
+import {parse, stringify} from 'yaml';
 
 /**
  * Absolute byte deviation from the expected value that is allowed. If the
@@ -27,16 +28,16 @@ const PERCENTAGE_DEVIATION_THRESHOLD = 1;
  */
 const [testId, testFileRootpath, isApprove] = process.argv.slice(2);
 const testFilePath = require.resolve(`angular_material/${testFileRootpath}`);
-const goldenFilePath = require.resolve('../../goldens/size-test.json');
+const goldenFilePath = require.resolve('../../goldens/size-test.yaml');
 
-const golden = JSON.parse(readFileSync(goldenFilePath, 'utf8'));
+const golden = parse(readFileSync(goldenFilePath, 'utf8')) || {};
 const fileStat = statSync(testFilePath);
 const actualSize = fileStat.size;
 
 // If in approve mode, update the golden to reflect the new size.
 if (isApprove) {
   golden[testId] = actualSize;
-  writeFileSync(goldenFilePath, JSON.stringify(golden, null, 2));
+  writeFileSync(goldenFilePath, stringify(golden));
   console.info(chalk.green(`Approved golden size for "${testId}"`));
   process.exit(0);
 }

integration/size-test/check-size.ts

@@ -53,7 +53,7 @@ def size_test(name, file, deps):
     nodejs_test(
         name = name,
         data = [
-            "//goldens:size-test.json",
+            "//goldens:size-test.yaml",
             "//integration/size-test:check-size",
             ":%s_bundle_min" % name,
         ],
@@ -65,7 +65,7 @@ def size_test(name, file, deps):
         name = "%s.approve" % name,
         testonly = True,
         data = [
-            "//goldens:size-test.json",
+            "//goldens:size-test.yaml",
             "//integration/size-test:check-size",
             ":%s_bundle_min" % name,
         ],

integration/size-test/index.bzl

@@ -1,7 +1,7 @@
 load("//integration/size-test:index.bzl", "size_test")
 
 size_test(
-    name = "list",
-    file = "list.ts",
+    name = "nav-list",
+    file = "nav-list.ts",
     deps = ["//src/material/list"],
 )

integration/size-test/material/BUILD.bazel renamed to integration/size-test/material/list/BUILD.bazel

@@ -103,6 +103,7 @@
     "@types/semver": "^6.2.0",
     "@types/send": "^0.14.5",
     "@types/stylelint": "^9.10.1",
+    "@types/yaml": "^1.9.7",
     "autoprefixer": "^6.7.6",
     "axe-webdriverjs": "^1.1.1",
     "browser-sync": "^2.26.7",
@@ -167,7 +168,7 @@
     "typescript-3.7": "npm:typescript@~3.7.0",
     "typescript-3.8": "npm:typescript@~3.8.0",
     "vrsource-tslint-rules": "5.1.1",
-    "yaml": "^1.7.2",
+    "yaml": "^1.10.0",
     "yargs": "15.3.0"
   },
   "resolutions": {

integration/size-test/material/list.ts renamed to integration/size-test/material/list/nav-list.ts

@@ -1643,6 +1643,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/yaml@^1.9.7":
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/@types/yaml/-/yaml-1.9.7.tgz#2331f36e0aac91311a63d33eb026c21687729679"
+  integrity sha512-8WMXRDD1D+wCohjfslHDgICd2JtMATZU8CkhH8LVJqcJs6dyYj5TGptzP8wApbmEullGBSsCEzzap73DQ1HJaA==
+  dependencies:
+    yaml "*"
+
 "@types/youtube@^0.0.38":
   version "0.0.38"
   resolved "https://registry.yarnpkg.com/@types/youtube/-/youtube-0.0.38.tgz#04aa5efa61f4d52e9cf682575a9dfed58f31e8c1"
@@ -12759,6 +12766,11 @@ yallist@^3.0.0, yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
   integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
+yaml@*, yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yaml@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.2.tgz#f26aabf738590ab61efaca502358e48dc9f348b2"