chore: update smoke.mjs for ng-schematics (#11544)

.eslintrc.js

@@ -164,7 +164,7 @@ module.exports = {
         // Brackets keep code readable and `return` intentions clear.
         'arrow-body-style': ['error', 'always'],
         // Error if comments do not adhere to `tsdoc`.
-        'tsdoc/syntax': 'error',
+        'tsdoc/syntax': 'warn',
         // Keeps array types simple only when they are simple for readability.
         '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
         'no-unused-vars': 'off',

.github/workflows/ci.yml

@@ -466,8 +466,17 @@ jobs:
         run: npm ci
         env:
           PUPPETEER_SKIP_DOWNLOAD: true
+      - name: Setup cache for Chrome binary
+        uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 # v3.3.2
+        with:
+          path: ~/.cache/puppeteer/chrome
+          key: ${{ runner.os }}-Chrome-${{ hashFiles('packages/puppeteer-core/src/revisions.ts') }}-${{ hashFiles('packages/puppeteer/src/node/install.ts') }}
+      - name: Install Chrome
+        run: npm run postinstall
+      - name: Build Schematics
+        run: npm run build -w @puppeteer/ng-schematics
       - name: Run tests
-        run: npm run test:smoke
+        run: node tools/smoke.mjs
         working-directory: ./packages/ng-schematics
 
   ng-schematics-smoke-tests-required:

packages/ng-schematics/package.json

@@ -7,10 +7,7 @@
     "clean": "../../tools/clean.js",
     "dev:test": "npm run test --watch",
     "dev": "npm run build --watch",
-    "sandbox:test": "node tools/sandbox.js --test",
+    "test": "wireit"
-    "sandbox": "node tools/sandbox.mjs",
-    "test": "wireit",
-    "test:smoke": "wireit"
   },
   "wireit": {
     "build": {
@@ -33,12 +30,6 @@
       "dependencies": [
         "build"
       ]
-    },
-    "test:smoke": {
-      "command": "node ./tools/smoke.mjs",
-      "dependencies": [
-        "build"
-      ]
     }
   },
   "keywords": [
@@ -56,14 +47,14 @@
     "node": ">=16.13.2"
   },
   "dependencies": {
-    "@angular-devkit/architect": "^0.1700.6",
+    "@angular-devkit/architect": "^0.1700.7",
-    "@angular-devkit/core": "^17.0.6",
+    "@angular-devkit/core": "^17.0.7",
-    "@angular-devkit/schematics": "^17.0.6"
+    "@angular-devkit/schematics": "^17.0.7"
   },
   "devDependencies": {
     "@types/node": "^16.18.61",
-    "@schematics/angular": "^17.0.6",
+    "@schematics/angular": "^17.0.7",
-    "@angular/cli": "^17.0.6",
+    "@angular/cli": "^17.0.7",
     "rxjs": "7.8.1"
   },
   "files": [

packages/ng-schematics/tools/projects.mjs

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Copyright 2023 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {spawn} from 'child_process';
+import {randomUUID} from 'crypto';
+import {readFile, writeFile} from 'fs/promises';
+import {join} from 'path';
+import {cwd} from 'process';
+
+class AngularProject {
+  static ports = new Set();
+  static randomPort() {
+    const min = 4000;
+    const max = 9876;
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+  static port() {
+    const port = AngularProject.randomPort();
+    if (AngularProject.ports.has(port)) {
+      return AngularProject.port();
+    }
+    return port;
+  }
+
+  static #scripts = {
+    // Builds the ng-schematics before running them
+    'build:schematics': 'npm run --prefix ../../ build',
+    // Deletes all files created by Puppeteer Ng-Schematics to avoid errors
+    'delete:file':
+      'rm -f .puppeteerrc.cjs && rm -f tsconfig.e2e.json && rm -R -f e2e/',
+    // Runs the Puppeteer Ng-Schematics against the sandbox
+    schematics: 'schematics ../../:ng-add --dry-run=false',
+    'schematics:e2e': 'schematics ../../:e2e --dry-run=false',
+    'schematics:config': 'schematics ../../:config --dry-run=false',
+    'schematics:smoke':
+      'schematics ../../:ng-add --dry-run=false --test-runner="node" && ng e2e',
+  };
+  #name;
+
+  constructor(name) {
+    this.#name = name ?? randomUUID();
+  }
+
+  get name() {
+    return this.#name;
+  }
+
+  async executeCommand(command, options) {
+    const [executable, ...args] = command.split(' ');
+    await new Promise((resolve, reject) => {
+      const createProcess = spawn(executable, args, {
+        stdio: 'inherit',
+        shell: true,
+        ...options,
+      });
+
+      createProcess.on('error', message => {
+        console.error(`Running ${command} exited with error:`, message);
+        reject(message);
+      });
+
+      createProcess.on('exit', code => {
+        if (code === 0) {
+          resolve(true);
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+
+  async create() {
+    await this.createProject();
+    await this.updatePackageJson();
+  }
+
+  async updatePackageJson() {
+    const packageJsonFile = join(cwd(), `/sandbox/${this.#name}/package.json`);
+    const packageJson = JSON.parse(await readFile(packageJsonFile));
+    packageJson['scripts'] = {
+      ...packageJson['scripts'],
+      ...AngularProject.#scripts,
+    };
+    await writeFile(packageJsonFile, JSON.stringify(packageJson, null, 2));
+  }
+
+  get commandOptions() {
+    return {
+      ...process.env,
+      cwd: join(cwd(), `/sandbox/${this.#name}/`),
+    };
+  }
+
+  async runNpmScripts(command) {
+    await this.executeCommand(`npm run ${command}`, this.commandOptions);
+  }
+
+  async runSchematics() {
+    await this.runNpmScripts('schematics');
+  }
+
+  async runSchematicsE2E() {
+    await this.runNpmScripts('schematics:e2e');
+  }
+
+  async runSchematicsConfig() {
+    await this.runNpmScripts('schematics:config');
+  }
+
+  async runSmoke() {
+    await this.runNpmScripts(
+      `schematics:smoke -- --port=${AngularProject.port()}`
+    );
+  }
+}
+
+export class AngularProjectSingle extends AngularProject {
+  async createProject() {
+    await this.executeCommand(
+      `ng new ${this.name} --directory=sandbox/${this.name} --defaults --skip-git`
+    );
+  }
+}
+
+export class AngularProjectMulti extends AngularProject {
+  async createProject() {
+    await this.executeCommand(
+      `ng new ${this.name} --create-application=false --directory=sandbox/${this.name} --skip-git`
+    );
+
+    await this.executeCommand(
+      `ng generate application core --style=css --routing=true`,
+      this.commandOptions
+    );
+    await this.executeCommand(
+      `ng generate application admin --style=css --routing=false`,
+      this.commandOptions
+    );
+  }
+}

packages/ng-schematics/tools/sandbox.mjs

@@ -1,209 +0,0 @@
-/**
- * Copyright 2023 Google Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {spawn} from 'child_process';
-import {readFile, writeFile} from 'fs/promises';
-import {join} from 'path';
-import {cwd} from 'process';
-
-const commands = {
-  build: ['npm run build'],
-  createSandbox: ['npx ng new sandbox --defaults'],
-  createMultiWorkspace: [
-    'ng new sandbox --create-application=false --directory=multi',
-  ],
-  createMultiProjects: [
-    {
-      command: 'ng generate application core --style=css --routing=true',
-      options: {
-        cwd: join(cwd(), '/multi/'),
-      },
-    },
-    {
-      command: 'ng generate application admin --style=css --routing=false',
-      options: {
-        cwd: join(cwd(), '/multi/'),
-      },
-    },
-  ],
-  /**
-   * @param {Boolean} isMulti
-   */
-  runSchematics: isMulti => {
-    return [
-      {
-        command: 'npm run schematics',
-        options: {
-          cwd: join(cwd(), isMulti ? '/multi/' : '/sandbox/'),
-        },
-      },
-    ];
-  },
-  /**
-   * @param {Boolean} isMulti
-   */
-  runSchematicsE2E: isMulti => {
-    return [
-      {
-        command: 'npm run schematics:e2e',
-        options: {
-          cwd: join(cwd(), isMulti ? '/multi/' : '/sandbox/'),
-        },
-      },
-    ];
-  },
-  /**
-   * @param {Boolean} isMulti
-   */
-  runSchematicsConfig: isMulti => {
-    return [
-      {
-        command: 'npm run schematics:config',
-        options: {
-          cwd: join(cwd(), isMulti ? '/multi/' : '/sandbox/'),
-        },
-      },
-    ];
-  },
-  runSchematicsSmoke: isMulti => {
-    return [
-      {
-        command: 'npm run schematics:smoke',
-        options: {
-          cwd: join(cwd(), isMulti ? '/multi/' : '/sandbox/'),
-        },
-      },
-    ];
-  },
-};
-const scripts = {
-  // Builds the ng-schematics before running them
-  'build:schematics': 'npm run --prefix ../ build',
-  // Deletes all files created by Puppeteer Ng-Schematics to avoid errors
-  'delete:file':
-    'rm -f .puppeteerrc.cjs && rm -f tsconfig.e2e.json && rm -R -f e2e/',
-  // Runs the Puppeteer Ng-Schematics against the sandbox
-  schematics: 'schematics ../:ng-add --dry-run=false',
-  'schematics:e2e': 'schematics ../:e2e --dry-run=false',
-  'schematics:config': 'schematics ../:config --dry-run=false',
-  'schematics:smoke':
-    'schematics ../:ng-add --dry-run=false --test-runner="node" && ng e2e',
-};
-/**
- *
- * @param {string | object} toExecute
- * @returns {Promise<boolean>}
- */
-async function executeCommand(commands) {
-  for (const toExecute of commands) {
-    let executable;
-    let args;
-    let options = {};
-    if (typeof toExecute === 'string') {
-      [executable, ...args] = toExecute.split(' ');
-    } else {
-      [executable, ...args] = toExecute.command.split(' ');
-      options = toExecute.options ?? {};
-    }
-
-    await new Promise((resolve, reject) => {
-      const createProcess = spawn(executable, args, {
-        stdio: 'inherit',
-        shell: true,
-        ...options,
-      });
-
-      createProcess.on('error', message => {
-        console.error(`Running ${toExecute} exited with error:`, message);
-        reject(message);
-      });
-
-      createProcess.on('exit', code => {
-        if (code === 0) {
-          resolve(true);
-        } else {
-          reject();
-        }
-      });
-    });
-  }
-}
-
-/**
- *
- * @param {*} param0
- */
-export async function runNgSchematicsSandbox({
-  isInit,
-  isMulti,
-  isBuild,
-  isE2E,
-  isConfig,
-  isSmoke,
-}) {
-  if (isInit) {
-    if (isMulti) {
-      await executeCommand(commands.createMultiWorkspace);
-      await executeCommand(commands.createMultiProjects);
-    } else {
-      await executeCommand(commands.createSandbox);
-    }
-
-    const directory = isMulti ? 'multi' : 'sandbox';
-    const packageJsonFile = join(cwd(), `/${directory}/package.json`);
-    const packageJson = JSON.parse(await readFile(packageJsonFile));
-    packageJson['scripts'] = {
-      ...packageJson['scripts'],
-      ...scripts,
-    };
-    await writeFile(packageJsonFile, JSON.stringify(packageJson, null, 2));
-  } else {
-    if (isBuild) {
-      await executeCommand(commands.build);
-    }
-    if (isE2E) {
-      await executeCommand(commands.runSchematicsE2E(isMulti));
-    } else if (isConfig) {
-      await executeCommand(commands.runSchematicsConfig(isMulti));
-    } else if (isSmoke) {
-      await executeCommand(commands.runSchematicsSmoke(isMulti));
-    } else {
-      await executeCommand(commands.runSchematics(isMulti));
-    }
-  }
-}
-
-async function main() {
-  const options = {
-    isInit: process.argv.indexOf('--init') !== -1,
-    isMulti: process.argv.indexOf('--multi') !== -1,
-    isBuild: process.argv.indexOf('--build') !== -1,
-    isE2E: process.argv.indexOf('--e2e') !== -1,
-    isConfig: process.argv.indexOf('--config') !== -1,
-  };
-  const isShell = Object.values(options).some(value => {
-    return value;
-  });
-
-  if (isShell) {
-    await runNgSchematicsSandbox(options).catch(error => {
-      console.log('Something went wrong');
-      console.error(error);
-    });
-  }
-}
-
-main();

packages/ng-schematics/tools/smoke.mjs

@@ -1,29 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import {execSync} from 'child_process';
 
-import {runNgSchematicsSandbox} from './sandbox.mjs';
+import {AngularProjectMulti, AngularProjectSingle} from './projects.mjs';
 
 if (process.env.CI) {
+  // Need to install in CI
   execSync('npm install -g @angular/cli@latest');
   execSync('npm install -g @angular-devkit/schematics-cli');
 }
 
-await Promise.all([
+const single = new AngularProjectSingle();
-  runNgSchematicsSandbox({
+const multi = new AngularProjectMulti();
-    isMulti: false,
-    isInit: true,
-  }),
-  runNgSchematicsSandbox({
-    isMulti: true,
-    isInit: true,
-  }),
-]);
 
-await runNgSchematicsSandbox({
+await Promise.all([single.create(), multi.create()]);
-  isMulti: false,
+await Promise.all([single.runSmoke(), multi.runSmoke()]);
-  isSmoke: true,
-});
-
-await runNgSchematicsSandbox({
-  isMulti: true,
-  isSmoke: true,
-});