build: create ng add integration test using ng new (#27096)

Reworks the `ng add` integration test to run `ng new` first which should make it easier to keep up with changes to the project layout.

Author: crisbeto

integration/ng-add-standalone/karma.conf.js

@@ -43,7 +43,7 @@ module.exports = function (config) {
     // Chrome cannot run with sandbox enabled as this test already runs within
     // the Bazel sandbox environment and the sandboxes would conflict otherwise.
     browsers: ['ChromeHeadlessNoSandbox'],
-    singleRun: false,
+    singleRun: true,
     restartOnFileChange: true,
   });
 };

integration/ng-add/.browserslistrc

@@ -10,6 +10,9 @@ npmPackageMappings = dicts.add(
     },
 )
 
+# Name of the generated app.
+APP_NAME = "ng-add"
+
 node_integration_test(
     name = "test",
     srcs = glob(["**/*"]),
@@ -19,6 +22,22 @@ node_integration_test(
         # 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/",
+
+        # Generate a new project with the default options.
+        # Skip installation since we installed the dependencies already.
+        "yarn ng new --defaults --skip-install --style=scss --name=%s" % APP_NAME,
+        # Delete the package.json that the CLI generated since we want to use the existing one.
+        "rm -f %s/package.json" % APP_NAME,
+        # Delete the Karma config since we need to use a headless browser.
+        "rm -f %s/karma.conf.js" % APP_NAME,
+        # We can't name the checked-in config `angular.json`, because the CLI doesn't allow
+        # `ng new` to run in a directory that has an `angular.json` already.
+        "mv _angular.json angular.json",
+        # Delete the angular.json since we have a specific config for the test.
+        "rm -f %s/angular.json" % APP_NAME,
+        # Move the generated project one level up so it can reuse the package.json and node_modules.
+        "mv %s/* ." % APP_NAME,
+        # Install Material and run the unit tests.
         "yarn ng add @angular/material",
         "yarn test",
     ],

integration/ng-add/.editorconfig

@@ -23,7 +23,7 @@
             "outputPath": "dist/ng-add",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
@@ -44,12 +44,6 @@
                   "maximumError": "4kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "outputHashing": "all"
             },
             "development": {
@@ -84,15 +78,13 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": [],
-            "watch": false
+            "scripts": []
           }
         }
       }

integration/ng-add/.gitignore

@@ -43,7 +43,7 @@ module.exports = function (config) {
     // Chrome cannot run with sandbox enabled as this test already runs within
     // the Bazel sandbox environment and the sandboxes would conflict otherwise.
     browsers: ['ChromeHeadlessNoSandbox'],
-    singleRun: false,
+    singleRun: true,
     restartOnFileChange: true,
   });
 };