Adding installJestDom and installUserEvent as option to the ng-add schematic

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,18 @@
  "$id": "SchematicsTestingLibraryAngular",
  "title": "testing-library-angular",
  "type": "object",
- "properties": {},
+ "properties": {
+ "installJestDom": {
+ "type": "boolean",
+ "description": "Would you like to install jest-dom?",
+ "default": false
+ },
+ "installUserEvent": {
+ "type": "boolean",
+ "description": "Would you like to install user-event?",
+ "default": false
+ }
+ },
+ "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;
+}