test: add an integration test to verify mdc-migration against a golden (#24266)

Author: mmalerba

.bazelignore

@@ -20,3 +20,7 @@ integration/yarn-pnp-compat/node_modules
 
 integration/mdc-migration/.angular
 integration/mdc-migration/node_modules
+integration/mdc-migration/golden/.angular
+integration/mdc-migration/golden/node_modules
+integration/mdc-migration/sample-project/.angular
+integration/mdc-migration/sample-project/node_modules

integration/mdc-migration/BUILD.bazel

@@ -1,34 +1,52 @@
-load("@bazel_skylib//lib:dicts.bzl", "dicts")
-load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
-load("//tools:defaults.bzl", "node_integration_test")
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("//tools:defaults.bzl", "ts_library")
+load(":migration-test.bzl", "migration_test")
 
-npmPackageMappings = dicts.add(
-    CLI_PROJECT_MAPPINGS,
-    {
-        "//src/cdk:npm_package_archive": "@angular/cdk",
-        "//src/material:npm_package_archive": "@angular/material",
-        "//src/material-experimental:npm_package_archive": "@angular/material-experimental",
-    },
+ts_library(
+    name = "verify_golden_lib",
+    srcs = ["verify-golden.ts"],
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
+    deps = [
+        "@npm//@types/node",
+    ],
+)
+
+nodejs_binary(
+    name = "verify_golden",
+    data = [":verify_golden_lib"],
+    entry_point = ":verify-golden.ts",
+    templated_args = ["--bazel_patch_module_resolver"],
 )
 
-node_integration_test(
+filegroup(
+    name = "test_project",
+    srcs = glob([
+        "sample-project/**/*",
+    ]),
+)
+
+filegroup(
+    name = "golden_project",
+    srcs = glob([
+        "golden/**/*",
+    ]),
+)
+
+migration_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 ng generate @angular/material:mdc-migration -c all --tsconfig tsconfig.app.json",
-        "yarn test",
-    ],
-    npm_packages = npmPackageMappings,
-    tags = [
-        # Chromium cannot run in Sandbox. For this test, sandbox is disabled.
-        # Additionally, we need to disable RBE as this test relies on internet
-        # access for installing the NPM packages.
-        "no-sandbox",
-        "no-remote-exec",
-    ],
+    srcs = glob([
+        "golden/**/*",
+        "sample-project/**/*",
+    ]),
+    approve = False,
+)
+
+migration_test(
+    name = "test.approve",
+    srcs = glob([
+        "golden/**/*",
+        "sample-project/**/*",
+    ]),
+    approve = True,
 )

integration/mdc-migration/.browserslistrc renamed to integration/mdc-migration/golden/.browserslistrc

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

integration/mdc-migration/.editorconfig renamed to integration/mdc-migration/golden/.editorconfig

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "mdc-migration": {
+    "sample-project": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -20,7 +20,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/mdc-migration",
+            "outputPath": "dist/sample-project",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -72,18 +72,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "mdc-migration:build:production"
+              "browserTarget": "sample-project:build:production"
             },
             "development": {
-              "browserTarget": "mdc-migration:build:development"
+              "browserTarget": "sample-project:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "mdc-migration:build"
+            "browserTarget": "sample-project:build"
           }
         },
         "test": {
@@ -108,5 +108,5 @@
       }
     }
   },
-  "defaultProject": "mdc-migration"
+  "defaultProject": "sample-project"
 }

integration/mdc-migration/.gitignore renamed to integration/mdc-migration/golden/.gitignore

@@ -1,11 +1,6 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-// This code runs within Bazel where the environment does not have access to
-// the system Chrome browser. To workaround this we use Puppeteer to provide
-// a local version of Chromium that can run within Bazel.
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-
 module.exports = function (config) {
   config.set({
     basePath: '',
@@ -30,16 +25,22 @@ module.exports = function (config) {
       suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/mdc-migration'),
+      dir: require('path').join(__dirname, './coverage/sample-project'),
       subdir: '.',
       reporters: [{type: 'html'}, {type: 'text-summary'}],
     },
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['ChromeHeadless'],
+    browsers: ['ChromeHeadlessNoSandbox'],
     singleRun: false,
     restartOnFileChange: true,
   });