feat: prompt for jest-dom and user-event installation in ng-add (#478)

Closes #477
Closes #472

Author: Hyperxq

projects/testing-library/schematics/ng-add/index.ts

@@ -1,27 +1,44 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { chain, noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import {
   addPackageJsonDependency,
   getPackageJsonDependency,
   NodeDependencyType,
 } from '@schematics/angular/utility/dependencies';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+import { Schema } from './schema';
 
-const dtl = '@testing-library/dom';
+export default function ({ installJestDom, installUserEvent }: Schema): Rule {
+  return () => {
+    return chain([
+      addDependency('@testing-library/dom', '^10.0.0', NodeDependencyType.Dev),
+      installJestDom ? addDependency('@testing-library/jest-dom', '^6.4.8', NodeDependencyType.Dev) : noop(),
+      installUserEvent ? addDependency('@testing-library/user-event', '^14.5.2', NodeDependencyType.Dev) : noop(),
+      installDependencies(),
+    ]);
+  };
+}
 
-export default function (): Rule {
+function addDependency(packageName: string, version: string, dependencyType: NodeDependencyType) {
   return (tree: Tree, context: SchematicContext) => {
-    const dtlDep = getPackageJsonDependency(tree, dtl);
+    const dtlDep = getPackageJsonDependency(tree, packageName);
     if (dtlDep) {
-      context.logger.info(`Skipping installation of '@testing-library/dom' because it's already installed.`);
+      context.logger.info(`Skipping installation of '${packageName}' because it's already installed.`);
     } else {
-      context.logger.info(`Adding '@testing-library/dom' as a dev dependency.`);
-      addPackageJsonDependency(tree, { name: dtl, type: NodeDependencyType.Dev, overwrite: false, version: '^10.0.0' });
+      context.logger.info(`Adding '${packageName}' as a dev dependency.`);
+      addPackageJsonDependency(tree, { name: packageName, type: dependencyType, overwrite: false, version });
     }
 
+    return tree;
+  };
+}
+
+export function installDependencies(packageManager = 'npm') {
+  return (_tree: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask({ packageManager }));
+
     context.logger.info(
       `Correctly installed @testing-library/angular.
 See our docs at https://testing-library.com/docs/angular-testing-library/intro/ to get started.`,
     );
-
-    return tree;
   };
 }

projects/testing-library/schematics/ng-add/schema.json

@@ -3,6 +3,28 @@
   "$id": "SchematicsTestingLibraryAngular",
   "title": "testing-library-angular",
   "type": "object",
-  "properties": {},
+  "properties": {
+    "installJestDom": {
+      "type": "boolean",
+      "description": "Install jest-dom as a dependency.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "default": false,
+      "x-prompt": "Would you like to install jest-dom?"
+    },
+    "installUserEvent": {
+      "type": "boolean",
+      "description": "Install user-event as a dependency.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "default": false,
+      "x-prompt": "Would you like to install user-event?"
+    }
+  },
+  "additionalProperties": false,
   "required": []
 }

projects/testing-library/schematics/ng-add/schema.ts

@@ -1,2 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Schema {}
+export interface Schema {
+  installJestDom: boolean;
+  installUserEvent: boolean;
+}