From 4d02fb60346aba9d9bd9f67f8173c16c18eb8052 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Fri, 21 Jun 2024 18:51:25 +0200 Subject: [PATCH 1/6] feat: move dtl to peerDeps (#456) BREAKING CHANGE: `@testing-library/dom` is now a peer dependency of `@testing-library/angular`. This means that you need to install `@testing-library/dom` separately. --- projects/testing-library/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json index fd3cfac..4aea894 100644 --- a/projects/testing-library/package.json +++ b/projects/testing-library/package.json @@ -32,10 +32,10 @@ "@angular/common": ">= 17.0.0", "@angular/platform-browser": ">= 17.0.0", "@angular/router": ">= 17.0.0", - "@angular/core": ">= 17.0.0" + "@angular/core": ">= 17.0.0", + "@testing-library/dom": "^10.0.0" }, "dependencies": { - "@testing-library/dom": "^10.0.0", "tslib": "^2.3.1" }, "publishConfig": { From 67adc5c4a6f130db794484a784c153485b86dfda Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Fri, 21 Jun 2024 19:59:34 +0200 Subject: [PATCH 2/6] feat: add DTL as devDependency on ng-add (#457) --- .../schematics/ng-add/index.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/projects/testing-library/schematics/ng-add/index.ts b/projects/testing-library/schematics/ng-add/index.ts index 68b9dfa..24a0a3d 100644 --- a/projects/testing-library/schematics/ng-add/index.ts +++ b/projects/testing-library/schematics/ng-add/index.ts @@ -1,11 +1,27 @@ import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; +import { + addPackageJsonDependency, + getPackageJsonDependency, + NodeDependencyType, +} from '@schematics/angular/utility/dependencies'; + +const dtl = '@testing-library/dom'; export default function (): Rule { - return (host: Tree, context: SchematicContext) => { + return (tree: Tree, context: SchematicContext) => { + const dtlDep = getPackageJsonDependency(tree, dtl); + if (dtlDep) { + context.logger.info(`Skipping installation of '@testing-library/dom' 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( `Correctly installed @testing-library/angular. See our docs at https://testing-library.com/docs/angular-testing-library/intro/ to get started.`, ); - return host; + + return tree; }; } From ef10fbfed2738cef7b3e912557eb6f89d39c443b Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Fri, 21 Jun 2024 20:11:36 +0200 Subject: [PATCH 3/6] feat: add migration to add DTL as devDependency (#458) --- projects/testing-library/package.json | 2 +- .../dtl-as-dev-dependency/index.spec.ts | 44 +++++++++++++++++++ .../migrations/dtl-as-dev-dependency/index.ts | 20 +++++++++ .../schematics/migrations/migration.json | 3 -- .../schematics/migrations/migrations.json | 10 +++++ projects/testing-library/test-setup.ts | 4 ++ .../testing-library/tsconfig.lib.prod.json | 2 +- .../testing-library/tsconfig.schematics.json | 3 +- 8 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts create mode 100644 projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.ts delete mode 100644 projects/testing-library/schematics/migrations/migration.json create mode 100644 projects/testing-library/schematics/migrations/migrations.json diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json index 4aea894..2852d02 100644 --- a/projects/testing-library/package.json +++ b/projects/testing-library/package.json @@ -26,7 +26,7 @@ "save": "devDependencies" }, "ng-update": { - "migrations": "./schematics/migrations/migration.json" + "migrations": "./schematics/migrations/migrations.json" }, "peerDependencies": { "@angular/common": ">= 17.0.0", diff --git a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts new file mode 100644 index 0000000..a3c0fd1 --- /dev/null +++ b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts @@ -0,0 +1,44 @@ +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; +import * as path from 'path'; +import { EmptyTree } from '@angular-devkit/schematics'; + +test('adds DTL to devDependencies', async () => { + const tree = await setup({}); + const pkg = tree.readContent('package.json'); + + expect(pkg).toMatchInlineSnapshot(` + "{ + \\"devDependencies\\": { + \\"@testing-library/dom\\": \\"^10.0.0\\" + } + }" + `); +}); + +test('ignores if DTL is already listed as a dev dependency', async () => { + // eslint-disable-next-line @typescript-eslint/naming-convention + const tree = await setup({ devDependencies: { '@testing-library/dom': '^9.0.0' } }); + const pkg = tree.readContent('package.json'); + + expect(pkg).toMatchInlineSnapshot(`"{\\"devDependencies\\":{\\"@testing-library/dom\\":\\"^9.0.0\\"}}"`); +}); + +test('ignores if DTL is already listed as a dependency', async () => { + // eslint-disable-next-line @typescript-eslint/naming-convention + const tree = await setup({ dependencies: { '@testing-library/dom': '^11.0.0' } }); + const pkg = tree.readContent('package.json'); + + expect(pkg).toMatchInlineSnapshot(`"{\\"dependencies\\":{\\"@testing-library/dom\\":\\"^11.0.0\\"}}"`); +}); + +async function setup(packageJson: object) { + const collectionPath = path.join(__dirname, '../migrations.json'); + const schematicRunner = new SchematicTestRunner('schematics', collectionPath); + + const tree = new UnitTestTree(new EmptyTree()); + tree.create('package.json', JSON.stringify(packageJson)); + + await schematicRunner.runSchematic(`atl-add-dtl-as-dev-dependency`, {}, tree); + + return tree; +} diff --git a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.ts b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.ts new file mode 100644 index 0000000..1c06e2f --- /dev/null +++ b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.ts @@ -0,0 +1,20 @@ +import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; +import { + addPackageJsonDependency, + getPackageJsonDependency, + NodeDependencyType, +} from '@schematics/angular/utility/dependencies'; + +const dtl = '@testing-library/dom'; + +export default function (): Rule { + return async (tree: Tree, context: SchematicContext) => { + const dtlDep = getPackageJsonDependency(tree, dtl); + if (dtlDep) { + context.logger.info(`Skipping installation of '@testing-library/dom' because it's already installed.`); + } else { + context.logger.info(`Adding '@testing-library/dom' as a peer dependency.`); + addPackageJsonDependency(tree, { name: dtl, type: NodeDependencyType.Dev, overwrite: false, version: '^10.0.0' }); + } + }; +} diff --git a/projects/testing-library/schematics/migrations/migration.json b/projects/testing-library/schematics/migrations/migration.json deleted file mode 100644 index 63001b4..0000000 --- a/projects/testing-library/schematics/migrations/migration.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "schematics": {} -} diff --git a/projects/testing-library/schematics/migrations/migrations.json b/projects/testing-library/schematics/migrations/migrations.json new file mode 100644 index 0000000..711b7ae --- /dev/null +++ b/projects/testing-library/schematics/migrations/migrations.json @@ -0,0 +1,10 @@ +{ + "$schema": "../../../../node_modules/@angular-devkit/schematics/collection-schema.json", + "schematics": { + "atl-add-dtl-as-dev-dependency": { + "description": "Add @testing-library/dom as a dev dependency", + "version": "17.0.0-beta.3", + "factory": "./dtl-as-dev-dependency/index" + } + } +} diff --git a/projects/testing-library/test-setup.ts b/projects/testing-library/test-setup.ts index 0da94a0..600d085 100644 --- a/projects/testing-library/test-setup.ts +++ b/projects/testing-library/test-setup.ts @@ -1,2 +1,6 @@ import 'jest-preset-angular/setup-jest'; import '@testing-library/jest-dom'; +import { TextEncoder, TextDecoder } from 'util'; + +// eslint-disable-next-line @typescript-eslint/naming-convention +Object.assign(global, { TextDecoder, TextEncoder }); diff --git a/projects/testing-library/tsconfig.lib.prod.json b/projects/testing-library/tsconfig.lib.prod.json index 1f041c9..752ed5e 100644 --- a/projects/testing-library/tsconfig.lib.prod.json +++ b/projects/testing-library/tsconfig.lib.prod.json @@ -8,5 +8,5 @@ "angularCompilerOptions": { "compilationMode": "partial" }, - "exclude": ["jest.config.ts"] + "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"] } diff --git a/projects/testing-library/tsconfig.schematics.json b/projects/testing-library/tsconfig.schematics.json index 481a34b..1311558 100644 --- a/projects/testing-library/tsconfig.schematics.json +++ b/projects/testing-library/tsconfig.schematics.json @@ -13,5 +13,6 @@ "skipLibCheck": true, "sourceMap": false }, - "include": ["schematics/**/*.ts"] + "include": ["schematics/**/*.ts"], + "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"] } From 8ffed7c829ddd414abca514419fa095fd84aa742 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sat, 22 Jun 2024 14:22:42 +0200 Subject: [PATCH 4/6] docs: update docs for v17 (#459) --- README.md | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2ba3f84..7ab5040 100644 --- a/README.md +++ b/README.md @@ -147,10 +147,18 @@ describe('Counter', () => { ## Installation This module is distributed via [npm][npm] which is bundled with [node][node] and -should be installed as one of your project's `devDependencies`: +should be installed as one of your project's `devDependencies`. +Starting from ATL version 17, you'll also need to install `@testing-library/dom`: ```bash -npm install @testing-library/angular --save-dev +npm install --save-dev @testing-library/angular @testing-library/dom +``` + +Or, you can use the `ng add` command. +This includes the installation of `@testing-library/dom`. + +```bash +ng add @testing-library/angular ``` You may also be interested in installing `jest-dom` so you can use @@ -160,14 +168,14 @@ You may also be interested in installing `jest-dom` so you can use ## Version compatibility -| Angular | Angular Testing Library | -| ------- | ----------------------- | -| 18.x | 16.x, 15.x, 14.x, 13.x | -| 17.x | 16.x, 15.x, 14.x, 13.x | -| 16.x | 14.x, 13.x | -| >= 15.1 | 14.x, 13.x | -| < 15.1 | 12.x, 11.x | -| 14.x | 12.x, 11.x | +| Angular | Angular Testing Library | +| ------- | ---------------------------- | +| 18.x | 17.x, 16.x, 15.x, 14.x, 13.x | +| 17.x | 17.x, 16.x, 15.x, 14.x, 13.x | +| 16.x | 14.x, 13.x | +| >= 15.1 | 14.x, 13.x | +| < 15.1 | 12.x, 11.x | +| 14.x | 12.x, 11.x | ## Guiding Principles From 83151096a6d60edf65297dbff5b6a553f5b44e83 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Sat, 22 Jun 2024 15:20:44 +0200 Subject: [PATCH 5/6] fix: schematics output folder (#461) --- projects/testing-library/tsconfig.schematics.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/testing-library/tsconfig.schematics.json b/projects/testing-library/tsconfig.schematics.json index 1311558..c011851 100644 --- a/projects/testing-library/tsconfig.schematics.json +++ b/projects/testing-library/tsconfig.schematics.json @@ -8,7 +8,7 @@ "esModuleInterop": true, "resolveJsonModule": true, "forceConsistentCasingInFileNames": true, - "outDir": "../../dist/@testing-library/angular/schematics/ng-add", + "outDir": "../../dist/@testing-library/angular/schematics", "removeComments": true, "skipLibCheck": true, "sourceMap": false From 88d9bfe01617dc76f88e78a39e5a0f8637d82b62 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Mon, 24 Jun 2024 15:40:37 +0200 Subject: [PATCH 6/6] docs: reword installation steps (#463) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7ab5040..ce2e906 100644 --- a/README.md +++ b/README.md @@ -148,14 +148,14 @@ describe('Counter', () => { This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's `devDependencies`. -Starting from ATL version 17, you'll also need to install `@testing-library/dom`: +Starting from ATL version 17, you also need to install `@testing-library/dom`: ```bash npm install --save-dev @testing-library/angular @testing-library/dom ``` Or, you can use the `ng add` command. -This includes the installation of `@testing-library/dom`. +This sets up your project to use Angular Testing Library, which also includes the installation of `@testing-library/dom`. ```bash ng add @testing-library/angular