.all-contributorsrc

@@ -419,6 +419,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "FabienDehopre",
+      "name": "Fabien Dehopré",
+      "avatar_url": "https://avatars.githubusercontent.com/u/97023?v=4",
+      "profile": "https://github.com/FabienDehopre",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For format details, see https://aka.ms/devcontainer.json.
 {
   "name": "angular-testing-library",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-20-bullseye",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:22-bullseye",
 
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
@@ -13,7 +13,7 @@
   // "forwardPorts": [],
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "npm i",
+  "postCreateCommand": "npm install --force",
   "onCreateCommand": "sudo cp .devcontainer/welcome-message.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt",
   "waitFor": "postCreateCommand",
 

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[20]' || '[18, 20]') }}
+        node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[18, 20, 22]') }}
         os: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '["ubuntu-latest"]' || '["ubuntu-latest", "windows-latest"]') }}
     runs-on: ${{ matrix.os }}
 
@@ -38,6 +38,8 @@ jobs:
         run: npm run build -- --skip-nx-cache
       - name: test
         run: npm run test
+      - name: lint
+        run: npm run lint
       - name: Release
         if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
         run: npx semantic-release

.node-version

@@ -1 +1 @@
-20.9
+22

README.md

@@ -98,7 +98,7 @@ counter.component.ts
 
 ```ts
 @Component({
-  selector: 'app-counter',
+  selector: 'atl-counter',
   template: `
     <span>{{ hello() }}</span>
     <button (click)="decrement()">-</button>
@@ -179,6 +179,7 @@ You may also be interested in installing `jest-dom` so you can use
 
 | Angular | Angular Testing Library      |
 | ------- | ---------------------------- |
+| 19.x    | 17.x, 16.x, 15.x, 14.x, 13.x |
 | 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                   |
@@ -272,6 +273,7 @@ Thanks goes to these people ([emoji key][emojis]):
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://arthurpetrie.com"><img src="https://avatars.githubusercontent.com/u/16376476?v=4?s=100" width="100px;" alt="Arthur Petrie"/><br /><sub><b>Arthur Petrie</b></sub></a><br /><a href="https://github.com/testing-library/angular-testing-library/commits?author=Arthie" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/FabienDehopre"><img src="https://avatars.githubusercontent.com/u/97023?v=4?s=100" width="100px;" alt="Fabien Dehopré"/><br /><sub><b>Fabien Dehopré</b></sub></a><br /><a href="https://github.com/testing-library/angular-testing-library/commits?author=FabienDehopre" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

apps/example-app-karma/eslint.config.cjs

@@ -0,0 +1,7 @@
+// @ts-check
+
+// TODO - https://github.com/nrwl/nx/issues/22576
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
+const config = (async () => (await import('./eslint.config.mjs')).default)();
+module.exports = config;

apps/example-app-karma/eslint.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
+import rootConfig from "../../eslint.config.mjs";
+
+export default tseslint.config(
+  ...rootConfig,
+);

apps/example-app-karma/jasmine-dom.d.ts

@@ -1,5 +1,4 @@
 declare module '@testing-library/jasmine-dom' {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   const JasmineDOM: any;
   export default JasmineDOM;
 }

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -29,7 +29,7 @@ it('should display invalid message and submit button must be disabled', async ()
 });
 
 @Component({
-  selector: 'app-login',
+  selector: 'atl-login',
   standalone: true,
   imports: [ReactiveFormsModule, NgIf],
   template: `
@@ -51,7 +51,7 @@ class LoginComponent {
   });
 
   constructor(private fb: FormBuilder) {}
-  
+
   get email(): FormControl {
     return this.form.get('email') as FormControl;
   }

apps/example-app-karma/src/app/issues/rerender.spec.ts

@@ -7,9 +7,9 @@ it('can rerender component', async () => {
     },
   });
 
-  expect(screen.getByText('Hello Sarah')).toBeTruthy();
+  expect(screen.getByText('Hello Sarah')).toBeInTheDocument();
 
   await rerender({ componentProperties: { name: 'Mark' } });
 
-  expect(screen.getByText('Hello Mark')).toBeTruthy();
+  expect(screen.getByText('Hello Mark')).toBeInTheDocument();
 });

apps/example-app/eslint.config.cjs

@@ -0,0 +1,7 @@
+// @ts-check
+
+// TODO - https://github.com/nrwl/nx/issues/22576
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
+const config = (async () => (await import('./eslint.config.mjs')).default)();
+module.exports = config;

apps/example-app/eslint.config.mjs

@@ -0,0 +1,8 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
+import rootConfig from "../../eslint.config.mjs";
+
+export default tseslint.config(
+  ...rootConfig,
+);

apps/example-app/jest.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 export default {
   displayName: {
     name: 'Example App',

apps/example-app/src/app/examples/00-single-component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   standalone: true,
   template: `
     <button (click)="value = value - 1">Decrement</button>