test: setup ng-update v13 integration test with Bazel

Sets up the `ng update` v13 integration test to run with Bazel. The
test will run `ng update` for the CDK and Material and will then compare
the migrated files against some expectation files. like for custom theme
file where the tilde should be removed.

Author: devversion

.bazelignore

@@ -1 +1,4 @@
 node_modules
+
+integration/ng-update-v13/.angular
+integration/ng-update-v13/node_modules

integration/ng-update-v13/BUILD.bazel

@@ -0,0 +1,43 @@
+load("@bazel_skylib//lib:dicts.bzl", "dicts")
+load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
+load("//tools:defaults.bzl", "node_integration_test")
+
+npmPackageMappings = dicts.add(
+    CLI_PROJECT_MAPPINGS,
+    {
+        "//src/cdk:npm_package_archive": "@angular/cdk",
+        "//src/material:npm_package_archive": "@angular/material",
+    },
+)
+
+node_integration_test(
+    name = "test",
+    srcs = glob(["**/*"]),
+    commands = [
+        # Note: We use a cache folder within the integration test as otherwise
+        # the NPM package mapped archive would be cached in the system.
+        # See: https://github.com/yarnpkg/yarn/issues/2165.
+        # TODO(devversion): determine if a solution/workaround could live in the test runner.
+        "yarn install --cache-folder .yarn_cache_folder/",
+        "yarn test",
+    ],
+    npm_packages = npmPackageMappings,
+)
+
+node_integration_test(
+    name = "test_node12",
+    srcs = glob(["**/*"]),
+    commands = [
+        # Note: We use a cache folder within the integration test as otherwise
+        # the NPM package mapped archive would be cached in the system.
+        # See: https://github.com/yarnpkg/yarn/issues/2165.
+        # TODO(devversion): determine if a solution/workaround could live in the test runner.
+        "yarn install --cache-folder .yarn_cache_folder/",
+        "yarn test",
+    ],
+    npm_packages = npmPackageMappings,
+    tool_mappings = {
+        "@node12_host//:yarn_bin": "yarn",
+        "@node12_host//:node_bin": "node",
+    },
+)

integration/ng-update-v13/package.json

@@ -5,7 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development"
+    "watch": "ng build --watch --configuration development",
+    "test": "node ./test-migrations.js"
   },
   "private": true,
   "dependencies": {

integration/ng-update-v13/src/styles.scss.expected

@@ -0,0 +1,39 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$ng-update-primary: mat.define-palette(mat.$indigo-palette);
+$ng-update-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$ng-update-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$ng-update-theme: mat.define-light-theme((
+  color: (
+    primary: $ng-update-primary,
+    accent: $ng-update-accent,
+    warn: $ng-update-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($ng-update-theme);
+
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

integration/ng-update-v13/test-migrations.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const path = require('path');
+const fs = require('fs');
+const child_process = require('child_process');
+const glob = require('glob');
+const chalk = require('chalk');
+const diff = require('diff');
+
+const projectDir = __dirname;
+const cliBinPath = path.join(projectDir, 'node_modules/@angular/cli/bin/ng');
+
+const expectationFiles = glob.sync('**/*.expected', {cwd: projectDir});
+const fromVersion = '12.0.0';
+const toVersion = '13.0.0';
+
+runUpdateCommand('@angular/cdk');
+runUpdateCommand('@angular/material');
+
+let testsPassing = true;
+
+// Check if each expectation file matches the actual file in the CLI project.
+expectationFiles.forEach(relativeFilePath => {
+  const actualFilePath = relativeFilePath.replace(/\.(ts|scss)\.expected$/, '.$1');
+  const expectedContent = fs.readFileSync(path.join(projectDir, relativeFilePath), 'utf8');
+  const actualContent = fs.readFileSync(path.join(projectDir, actualFilePath), 'utf8');
+
+  if (expectedContent === actualContent) {
+    console.log(chalk.green(`✓  File "${actualFilePath}" matches the expected output.`));
+  } else {
+    testsPassing = false;
+    console.error(chalk.red(`✘  File "${actualFilePath}" does not match the expected output.`));
+    console.log(chalk.yellow('--------------------------------------------'));
+    printColoredPatch(actualFilePath, actualContent, expectedContent);
+    console.log(chalk.yellow('--------------------------------------------\n'));
+  }
+});
+
+process.exit(testsPassing ? 0 : 1);
+
+/** Runs the `ng update` command for the given package. */
+function runUpdateCommand(packageName) {
+  // Note that we need to specify "--allow-dirty" as the repository will become dirty
+  // if dependencies for the integration test are installed (i.e. modified lock files)
+  const updateCommandArgs = ['--migrate-only', '--from', fromVersion,
+    '--to', toVersion, '--allow-dirty'];
+
+  // Print out the command that is used to run the migrations for easier debugging.
+  console.error(`Running "ng update ${updateCommandArgs.join(' ')}":`);
+  console.error(chalk.yellow(`------------------------------------------`));
+
+  const updateProcess = child_process.spawnSync(
+    'node', [cliBinPath, 'update', packageName, ...updateCommandArgs], {stdio: 'inherit', cwd: projectDir});
+
+  console.error(chalk.yellow(`------------------------------------------\n`));
+
+  if (updateProcess.status !== 0) {
+    console.error(chalk.red('✘ Running "ng update" failed. See output above.'));
+    process.exit(1);
+  }
+}
+
+/** Compares the two strings and prints out a colored diff to stdout. */
+function printColoredPatch(actualFilePath, actualContent, expectedContent) {
+  const patchLines =
+    diff.createPatch(
+      actualFilePath, expectedContent, actualContent, 'Expected content', 'Actual content')
+      .split(/\r?\n/);
+  // Walk through each line of the patch and print it. We omit the first two lines
+  // as these are the patch header and not relevant to the test.
+  for (let line of patchLines.slice(2)) {
+    if (line.startsWith('+')) {
+      console.log(chalk.green(line));
+    } else if (line.startsWith('-')) {
+      console.log(chalk.red(line));
+    } else {
+      console.log(chalk.grey(line));
+    }
+  }
+}