chore: add sandbox to ng-schematics (#9816)

packages/ng-schematics/.gitignore

@@ -1,22 +1,3 @@
 
-# Outputs
+# Sandbox
-src/**/*.js
+sandbox/
-src/**/*.js.map
-src/**/*.d.ts
-
-# Keep files that serve as template
-!src/**/files/**/*
-
-# IDEs
-.idea/
-jsconfig.json
-.vscode/
-
-# Misc
-node_modules/
-npm-debug.log*
-yarn-error.log*
-
-# Mac OSX Finder files.
-**/.DS_Store
-.DS_Store

packages/ng-schematics/README.md

@@ -42,6 +42,22 @@ When adding schematics to your project you can to provide following options:
 
 Check out our [contributing guide](https://pptr.dev/contributing) to get an overview of what you need to develop in the Puppeteer repo.
 
+### Sandbox
+
+For easier development we provide a script to auto-generate the Angular project to test against. Simply run:
+
+```bash
+npm run sandbox -- --init
+```
+
+After that to run `@puppeteer/ng-schematics` against the Sandbox Angular project run:
+
+```bash
+npm run sandbox
+# or to auto-build and then run schematics
+npm run sandbox -- --build
+```
+
 ### Unit Testing
 
 The schematics utilize `@angular-devkit/schematics/testing` for verifying correct file creation and `package.json` updates. To execute the test suit:

packages/ng-schematics/package.json

@@ -8,7 +8,8 @@
     "clean": "tsc -b --clean && rm -rf lib && rm -rf test/build",
     "dev:test": "npm run test --watch",
     "dev": "npm run build --watch",
-    "test": "wireit"
+    "test": "wireit",
+    "sandbox": "node tools/sandbox.js"
   },
   "wireit": {
     "build": {
@@ -31,11 +32,13 @@
       "files": [
         "**/tsconfig.*.json",
         "**/tsconfig.json",
-        "src/**/*.ts"
+        "src/**/*.ts",
+        "!src/**/files/**"
       ],
       "output": [
         "lib/**/*.{ts,js}",
-        "lib/**/*.{ts,js}.map"
+        "lib/**/*.{ts,js}.map",
+        "!lib/**/files/**"
       ]
     },
     "test": {
@@ -66,7 +69,8 @@
   },
   "devDependencies": {
     "@types/node": "^14.15.0",
-    "@schematics/angular": "^14.2.8"
+    "@schematics/angular": "^14.2.8",
+    "@angular/cli": "^15.2.2"
   },
   "files": [
     "lib",

packages/ng-schematics/tools/sandbox.js

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+const {spawn} = require('child_process');
+const {readFile, writeFile} = require('fs/promises');
+const {join} = require('path');
+const {cwd} = require('process');
+
+const isInit = process.argv.indexOf('--init') !== -1;
+const isBuild = process.argv.indexOf('--build') !== -1;
+const commands = {
+  build: ['npm run build'],
+  createSandbox: ['npx ng new sandbox --defaults'],
+  runSchematics: [
+    {
+      command: 'npm run schematics',
+      options: {
+        cwd: join(cwd(), '/sandbox/'),
+      },
+    },
+  ],
+};
+const scripts = {
+  // 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: 'npm run delete:file && schematics ../:ng-add --dry-run=false',
+};
+/**
+ *
+ * @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(message);
+        reject(message);
+      });
+
+      createProcess.on('exit', code => {
+        if (code === 0) {
+          resolve(true);
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+}
+
+async function main() {
+  if (isInit) {
+    await executeCommand(commands.createSandbox);
+
+    const packageJsonFile = join(cwd(), '/sandbox/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);
+    }
+    await executeCommand(commands.runSchematics);
+  }
+}
+
+main().catch(() => {
+  console.log('\n');
+});