Angular 17 🚀

.github/workflows/ci.yml

@@ -33,7 +33,8 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: install
-        run: npm install
+        # ng-mocks needs to add ng 17 to their peer dependencies
+        run: npm install --force
       - name: build
         run: npm run build -- --skip-nx-cache
       - name: test

.gitignore

@@ -28,6 +28,7 @@
 # misc
 /.angular/cache
 .angular
+.nx
 .cache
 /.sass-cache
 /connect.lock

.prettierignore

@@ -53,3 +53,5 @@ deployment.yaml
 # System Files
 .DS_Store
 Thumbs.db
+
+/.nx/cache

README.md

@@ -164,6 +164,7 @@ You may also be interested in installing `jest-dom` so you can use
 
 | Angular | Angular Testing Library |
 | ------- | ----------------------- |
+| 17.x    | 13.x, 14.x              |
 | 16.x    | 13.x, 14.x              |
 | >= 15.1 | 13.x \|\| 14.x          |
 | < 15.1  | 11.x \|\| 12.x          |

apps/example-app-karma/project.json

@@ -43,16 +43,16 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "example-app-karma:build:production"
+          "buildTarget": "example-app-karma:build:production"
         },
         "development": {
-          "browserTarget": "example-app-karma:build:development"
+          "buildTarget": "example-app-karma:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/example-app-karma/**/*.ts",

apps/example-app-karma/src/test.ts

@@ -1,5 +1,5 @@
 import 'zone.js';
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import JasmineDOM from '@testing-library/jasmine-dom';

apps/example-app/project.json

@@ -44,22 +44,22 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "example-app:build:production"
+          "buildTarget": "example-app:build:production"
         },
         "development": {
-          "browserTarget": "example-app:build:development"
+          "buildTarget": "example-app:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "example-app:build"
+        "buildTarget": "example-app:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html", "apps/example-app/src/**/*.html"]
       },
@@ -68,7 +68,8 @@
     "test": {
       "executor": "@nx/jest:jest",
       "options": {
-        "jestConfig": "apps/example-app/jest.config.ts"
+        "jestConfig": "apps/example-app/jest.config.ts",
+        "passWithNoTests": false
       },
       "outputs": ["{workspaceRoot}/coverage/"]
     }

nx.json

@@ -1,5 +1,4 @@
 {
-  "npmScope": "testing-library",
   "affected": {
     "defaultBase": "main"
   },
@@ -17,13 +16,9 @@
   },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "nx-cloud",
       "options": {
-        "accessToken": "M2Q4YjlkNjMtMzY1NC00ZjkwLTk1ZjgtZjg5Y2VkMzFjM2FifHJlYWQtd3JpdGU=",
-        "cacheableOperations": ["build", "test", "lint", "e2e"],
         "canTrackAnalytics": false,
-        "showUsageWarnings": true,
-        "parallel": 3
+        "showUsageWarnings": true
       }
     }
   },
@@ -69,13 +64,29 @@
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
-      "inputs": ["production", "^production"]
+      "inputs": ["production", "^production"],
+      "cache": true
     },
     "test": {
-      "inputs": ["default", "^production"]
+      "inputs": ["default", "^production"],
+      "cache": true
     },
     "lint": {
-      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
+      "cache": true
+    },
+    "@nx/jest:jest": {
+      "inputs": ["default", "^production"],
+      "cache": true,
+      "options": {
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
     }
   },
   "namedInputs": {
@@ -88,7 +99,10 @@
       "!{projectRoot}/karma.conf.js",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/jest.config.[jt]s",
-      "!{projectRoot}/.eslintrc.json"
+      "!{projectRoot}/.eslintrc.json",
+      "!{projectRoot}/src/test-setup.[jt]s"
     ]
-  }
+  },
+  "nxCloudAccessToken": "M2Q4YjlkNjMtMzY1NC00ZjkwLTk1ZjgtZjg5Y2VkMzFjM2FifHJlYWQtd3JpdGU=",
+  "parallel": 3
 }

package.json

@@ -28,55 +28,53 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "16.0.0",
-    "@angular/cdk": "16.0.0",
-    "@angular/common": "16.0.0",
-    "@angular/compiler": "16.0.0",
-    "@angular/core": "16.0.0",
-    "@angular/material": "16.0.0",
-    "@angular/platform-browser": "16.0.0",
-    "@angular/platform-browser-dynamic": "16.0.0",
-    "@angular/router": "16.0.0",
-    "@ngrx/store": "16.0.0",
-    "@nx/angular": "16.1.4",
+    "@angular/animations": "17.0.2",
+    "@angular/cdk": "17.0.0",
+    "@angular/common": "17.0.2",
+    "@angular/compiler": "17.0.2",
+    "@angular/core": "17.0.2",
+    "@angular/material": "17.0.0",
+    "@angular/platform-browser": "17.0.2",
+    "@angular/platform-browser-dynamic": "17.0.2",
+    "@angular/router": "17.0.2",
+    "@ngrx/store": "17.0.0-rc.0",
+    "@nx/angular": "17.1.1",
     "@testing-library/dom": "^9.0.0",
-    "nx-cloud": "16.0.5",
     "rxjs": "7.8.0",
     "tslib": "~2.3.1",
-    "zone.js": "0.13.0"
+    "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.0.0",
-    "@angular-devkit/core": "16.0.0",
-    "@angular-devkit/schematics": "16.0.0",
-    "@angular-eslint/builder": "16.0.0",
-    "@angular-eslint/eslint-plugin": "16.0.1",
-    "@angular-eslint/eslint-plugin-template": "16.0.1",
-    "@angular-eslint/schematics": "16.0.0",
-    "@angular-eslint/template-parser": "16.0.1",
-    "@angular/cli": "~16.0.0",
-    "@angular/compiler-cli": "16.0.0",
-    "@angular/forms": "16.0.0",
-    "@angular/language-service": "16.0.0",
-    "@nx/eslint-plugin": "16.1.4",
-    "@nx/jest": "16.1.4",
-    "@nx/linter": "16.1.4",
-    "@nx/node": "16.1.4",
-    "@nx/plugin": "16.1.4",
-    "@nx/workspace": "16.1.4",
-    "@schematics/angular": "16.0.0",
+    "@angular-devkit/build-angular": "17.0.0",
+    "@angular-devkit/core": "17.0.0",
+    "@angular-devkit/schematics": "17.0.0",
+    "@angular-eslint/builder": "17.0.1",
+    "@angular-eslint/eslint-plugin": "17.0.1",
+    "@angular-eslint/eslint-plugin-template": "17.0.1",
+    "@angular-eslint/schematics": "17.0.1",
+    "@angular-eslint/template-parser": "17.0.1",
+    "@angular/cli": "~17.0.0",
+    "@angular/compiler-cli": "17.0.2",
+    "@angular/forms": "17.0.2",
+    "@angular/language-service": "17.0.2",
+    "@nx/eslint-plugin": "17.1.1",
+    "@nx/jest": "17.1.1",
+    "@nx/node": "17.1.1",
+    "@nx/plugin": "17.1.1",
+    "@nx/workspace": "17.1.1",
+    "@schematics/angular": "17.0.0",
     "@testing-library/jasmine-dom": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/jasmine": "4.3.1",
     "@types/jest": "29.5.1",
     "@types/node": "20.1.4",
     "@types/testing-library__jasmine-dom": "^1.3.0",
-    "@typescript-eslint/eslint-plugin": "5.58.0",
-    "@typescript-eslint/parser": "5.58.0",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "cpy-cli": "^3.1.1",
-    "eslint": "8.15.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "~2.25.4",
     "eslint-plugin-jasmine": "~4.1.3",
     "eslint-plugin-jest": "~25.3.4",
@@ -86,16 +84,16 @@
     "jasmine-spec-reporter": "7.0.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
-    "jest-preset-angular": "13.1.0",
+    "jest-preset-angular": "13.1.3",
     "karma": "6.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^12.1.6",
     "ng-mocks": "^14.11.0",
-    "ng-packagr": "16.0.0",
-    "nx": "16.1.4",
+    "ng-packagr": "17.0.0",
+    "nx": "17.1.1",
     "postcss": "^8.4.5",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
@@ -105,6 +103,7 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.0.3"
+    "typescript": "5.2.2",
+    "@nx/eslint": "17.1.1"
   }
 }

projects/testing-library/package.json

@@ -29,10 +29,10 @@
     "migrations": "./schematics/migrations/migration.json"
   },
   "peerDependencies": {
-    "@angular/common": ">= 15.1.0 || >= 16.0.0",
-    "@angular/platform-browser": ">= 15.1.0 || >= 16.0.0",
-    "@angular/router": ">= 15.1.0 || >= 16.0.0",
-    "@angular/core": ">= 15.1.0 || >= 16.0.0"
+    "@angular/common": ">= 15.1.0 || >= 16.0.0 || >= 17.0.0",
+    "@angular/platform-browser": ">= 15.1.0 || >= 16.0.0 || >= 17.0.0",
+    "@angular/router": ">= 15.1.0 || >= 16.0.0 || >= 17.0.0",
+    "@angular/core": ">= 15.1.0 || >= 16.0.0 || >= 17.0.0"
   },
   "dependencies": {
     "@testing-library/dom": "^9.0.0",

projects/testing-library/project.json

@@ -9,8 +9,7 @@
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/@testing-library/angular"],
       "options": {
-        "project": "projects/testing-library/ng-package.json",
-        "updateBuildableProjectDepsInPackageJson": false
+        "project": "projects/testing-library/ng-package.json"
       },
       "configurations": {
         "production": {
@@ -23,7 +22,7 @@
       "defaultConfiguration": "production"
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": ["projects/testing-library/**/*.ts", "projects/testing-library/**/*.html"]
       },
@@ -49,7 +48,8 @@
     "test": {
       "executor": "@nx/jest:jest",
       "options": {
-        "jestConfig": "projects/testing-library/jest.config.ts"
+        "jestConfig": "projects/testing-library/jest.config.ts",
+        "passWithNoTests": false
       },
       "outputs": ["{workspaceRoot}/coverage/projects/testing-library"]
     }

projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts

@@ -1,11 +1,6 @@
 import { Component } from '@angular/core';
 import { render, screen } from '../../src/public_api';
 
-test('child', async () => {
-  await render(FixtureComponent);
-  expect(screen.getByText('Hello from child')).toBeInTheDocument();
-});
-
 test('stub', async () => {
   await render(FixtureComponent, {
     componentImports: [StubComponent],
@@ -31,6 +26,11 @@ test('configure', async () => {
   expect(screen.getByText('Hello from stub')).toBeInTheDocument();
 });
 
+test('child', async () => {
+  await render(FixtureComponent);
+  expect(screen.getByText('Hello from child')).toBeInTheDocument();
+});
+
 @Component({
   selector: 'atl-child',
   template: `Hello from child`,
@@ -42,6 +42,8 @@ class ChildComponent {}
   selector: 'atl-child',
   template: `Hello from stub`,
   standalone: true,
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property, @typescript-eslint/naming-convention
+  host: { 'collision-id': StubComponent.name },
 })
 class StubComponent {}
 

projects/testing-library/tests/render.spec.ts

@@ -68,6 +68,8 @@ describe('standalone with child', () => {
     selector: 'atl-child-fixture',
     template: `<span>A mock child fixture</span>`,
     standalone: true,
+    // eslint-disable-next-line @angular-eslint/no-host-metadata-property, @typescript-eslint/naming-convention
+    host: { 'collision-id': MockChildFixtureComponent.name },
   })
   class MockChildFixtureComponent {}
 
@@ -80,18 +82,18 @@ describe('standalone with child', () => {
   })
   class ParentFixtureComponent {}
 
-  it('renders the standalone component with child', async () => {
-    await render(ParentFixtureComponent);
-    expect(screen.getByText('Parent fixture')).toBeInTheDocument();
-    expect(screen.getByText('A child fixture')).toBeInTheDocument();
-  });
-
   it('renders the standalone component with a mocked child', async () => {
     await render(ParentFixtureComponent, { componentImports: [MockChildFixtureComponent] });
     expect(screen.getByText('Parent fixture')).toBeInTheDocument();
     expect(screen.getByText('A mock child fixture')).toBeInTheDocument();
   });
 
+  it('renders the standalone component with child', async () => {
+    await render(ParentFixtureComponent);
+    expect(screen.getByText('Parent fixture')).toBeInTheDocument();
+    expect(screen.getByText('A child fixture')).toBeInTheDocument();
+  });
+
   it('rejects render of template with componentImports set', () => {
     const view = render(`<div><atl-parent-fixture></atl-parent-fixture></div>`, {
       imports: [ParentFixtureComponent],