From 87d02f2714eb0cc8ca6ccf44ade0f781207d8106 Mon Sep 17 00:00:00 2001
From: Torsten Knauf <Torsten.Knauf@gmx.de>
Date: Tue, 30 Jan 2024 16:06:06 +0100
Subject: [PATCH 1/9] docs: Fix example (#433) (#434)

Closes #433
---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 569dff2..eed18ab 100644
--- a/README.md
+++ b/README.md
@@ -98,7 +98,7 @@ counter.component.ts
 
 ```ts
 @Component({
-  selector: 'counter',
+  selector: 'app-counter',
   template: `
     <button (click)="decrement()">-</button>
     <span>Current Count: {{ counter }}</span>
@@ -122,7 +122,7 @@ counter.component.spec.ts
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/angular';
-import { CounterComponent } from './counter.component.ts';
+import { CounterComponent } from './counter.component';
 
 describe('Counter', () => {
   test('should render counter', async () => {
@@ -134,7 +134,7 @@ describe('Counter', () => {
   test('should increment the counter on click', async () => {
     await render(CounterComponent, { componentProperties: { counter: 5 } });
 
-    const incrementButton = screen.getByRole('button', { name: /increment/i });
+    const incrementButton = screen.getByRole('button', { name: '+' });
     fireEvent.click(incrementButton);
 
     expect(screen.getByText('Current Count: 6'));

From b01a93326fd70fdea88676b91951bfeb91a44269 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:33:13 +0100
Subject: [PATCH 2/9] test: add test case for #435 (#436)

Closes #435
---
 package.json                                  |  5 ++-
 .../tests/issues/issue-435.spec.ts            | 40 +++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 projects/testing-library/tests/issues/issue-435.spec.ts

diff --git a/package.json b/package.json
index 4950026..0690a7f 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@angular/compiler-cli": "17.1.0",
     "@angular/forms": "17.1.0",
     "@angular/language-service": "17.1.0",
+    "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",
     "@nx/jest": "17.2.8",
     "@nx/node": "17.2.8",
@@ -77,6 +78,7 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "~2.25.4",
     "eslint-plugin-jasmine": "~4.1.3",
+    "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-jest-dom": "~4.0.1",
     "eslint-plugin-testing-library": "~5.0.1",
     "jasmine-core": "4.2.0",
@@ -102,7 +104,6 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.2.2",
-    "@nx/eslint": "17.2.8"
+    "typescript": "5.2.2"
   }
 }
diff --git a/projects/testing-library/tests/issues/issue-435.spec.ts b/projects/testing-library/tests/issues/issue-435.spec.ts
new file mode 100644
index 0000000..6ca47bb
--- /dev/null
+++ b/projects/testing-library/tests/issues/issue-435.spec.ts
@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import { Component, Inject, Injectable } from '@angular/core';
+import { screen, render } from '../../src/public_api';
+
+// Service
+@Injectable()
+class DemoService {
+  buttonTitle = new BehaviorSubject<string>('Click me');
+}
+
+// Component
+@Component({
+  selector: 'atl-issue-435',
+  standalone: true,
+  imports: [CommonModule],
+  providers: [DemoService],
+  template: `
+    <button>
+      <!-- 👇 I only get the Inject error when I use the async pipe here -->
+      {{ demoService.buttonTitle | async }}
+    </button>
+  `,
+})
+class DemoComponent {
+  constructor(@Inject(DemoService) public demoService: DemoService) {}
+}
+
+// Test
+describe('DemoComponent', () => {
+  it('should render button', async () => {
+    await render(DemoComponent);
+
+    const button = screen.getByRole('button', {
+      name: /Click me/,
+    });
+
+    expect(button).toBeVisible();
+  });
+});

From f78be95d8347d4ae6f72082afacb31742b9261e7 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:47:02 +0100
Subject: [PATCH 3/9] docs: add signal input test

---
 .../22-signal-inputs.component.spec.ts        | 21 +++++++++++++++++++
 .../examples/22-signal-inputs.component.ts    | 13 ++++++++++++
 package.json                                  |  2 +-
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
 create mode 100644 apps/example-app/src/app/examples/22-signal-inputs.component.ts

diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
new file mode 100644
index 0000000..438253a
--- /dev/null
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/angular';
+import { SignalInputComponent } from './22-signal-inputs.component';
+import { Component } from '@angular/core';
+
+test('works with signal inputs using a wrapper component', async () => {
+  @Component({
+    template: `
+      <app-signal-input [greeting]="greeting" [name]="name"/>
+    `,
+    standalone: true,
+    imports: [SignalInputComponent],
+  })
+  class WrapperComponent {
+    greeting = 'Hello';
+    name = 'world';
+  }
+
+  await render(WrapperComponent);
+
+  expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
new file mode 100644
index 0000000..2ba1619
--- /dev/null
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-signal-input',
+  template: ` {{ greetings() }} {{ name() }} `,
+  standalone: true,
+})
+export class SignalInputComponent {
+  greetings = input<string>('', {
+    alias: 'greeting',
+  });
+  name = input.required<string>();
+}
diff --git a/package.json b/package.json
index 0690a7f..d23ba19 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "jasmine-spec-reporter": "7.0.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
-    "jest-preset-angular": "13.1.6",
+    "jest-preset-angular": "14.0.3",
     "karma": "6.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.2.1",

From a709ae52259f81775593f4608f39b89a2fb28f2a Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:47:31 +0100
Subject: [PATCH 4/9] test: add test case for #437 (#438)

Closes #437
---
 .../tests/issues/issue-435.spec.ts            | 15 ++---
 .../tests/issues/issue-437.spec.ts            | 58 +++++++++++++++++++
 2 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 projects/testing-library/tests/issues/issue-437.spec.ts

diff --git a/projects/testing-library/tests/issues/issue-435.spec.ts b/projects/testing-library/tests/issues/issue-435.spec.ts
index 6ca47bb..e1e420f 100644
--- a/projects/testing-library/tests/issues/issue-435.spec.ts
+++ b/projects/testing-library/tests/issues/issue-435.spec.ts
@@ -26,15 +26,12 @@ class DemoComponent {
   constructor(@Inject(DemoService) public demoService: DemoService) {}
 }
 
-// Test
-describe('DemoComponent', () => {
-  it('should render button', async () => {
-    await render(DemoComponent);
+test('issue #435', async () => {
+  await render(DemoComponent);
 
-    const button = screen.getByRole('button', {
-      name: /Click me/,
-    });
-
-    expect(button).toBeVisible();
+  const button = screen.getByRole('button', {
+    name: /Click me/,
   });
+
+  expect(button).toBeVisible();
 });
diff --git a/projects/testing-library/tests/issues/issue-437.spec.ts b/projects/testing-library/tests/issues/issue-437.spec.ts
new file mode 100644
index 0000000..2d0e7c5
--- /dev/null
+++ b/projects/testing-library/tests/issues/issue-437.spec.ts
@@ -0,0 +1,58 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '../../src/public_api';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+test('issue #437', async () => {
+  const user = userEvent.setup();
+  await render(
+    `
+      <ng-container>
+        <mat-sidenav-container>
+            <mat-sidenav [opened]="true" position="end" mode="over" role="complementary">
+                <button data-testid="test-button">test</button>
+            </mat-sidenav>
+            <mat-sidenav-content>
+              <div></div>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
+      </ng-container>
+      `,
+    { imports: [MatSidenavModule] },
+  );
+
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
+  await screen.findByTestId('test-button');
+
+  await user.click(screen.getByTestId('test-button'));
+});
+
+test('issue #437 with fakeTimers', async () => {
+  jest.useFakeTimers();
+  const user = userEvent.setup({
+    advanceTimers: jest.advanceTimersByTime,
+  });
+  await render(
+    `
+      <ng-container>
+        <mat-sidenav-container>
+            <mat-sidenav [opened]="true" position="end" mode="over" role="complementary">
+                <button data-testid="test-button">test</button>
+            </mat-sidenav>
+            <mat-sidenav-content>
+              <div></div>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
+      </ng-container>
+      `,
+    { imports: [MatSidenavModule] },
+  );
+
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
+  await screen.findByTestId('test-button');
+
+  await user.click(screen.getByTestId('test-button'));
+});

From b1ac6b8c855140ff8043f17ab5417ea46559a00e Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:38:02 +0100
Subject: [PATCH 5/9] docs: add signal input component test

---
 .../22-signal-inputs.component.spec.ts        | 40 ++++++++++++-------
 package.json                                  |  2 +-
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
index 438253a..f2500a2 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
@@ -1,21 +1,33 @@
 import { render, screen } from '@testing-library/angular';
 import { SignalInputComponent } from './22-signal-inputs.component';
-import { Component } from '@angular/core';
 
-test('works with signal inputs using a wrapper component', async () => {
-  @Component({
-    template: `
-      <app-signal-input [greeting]="greeting" [name]="name"/>
-    `,
-    standalone: true,
-    imports: [SignalInputComponent],
-  })
-  class WrapperComponent {
-    greeting = 'Hello';
-    name = 'world';
-  }
+test('works with signal inputs', async () => {
+  await render(SignalInputComponent, {
+    componentInputs: {
+      name: 'world',
+      greeting: 'Hello',
+    },
+  });
 
-  await render(WrapperComponent);
+  expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
+
+test('works with signal inputs and rerenders', async () => {
+  const view = await render(SignalInputComponent, {
+    componentInputs: {
+      greeting: 'Hello',
+      name: 'world',
+    },
+  });
 
   expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+
+  await view.rerender({
+    componentInputs: {
+      greeting: 'bye',
+      name: 'test',
+    },
+  });
+
+  expect(screen.getByText(/bye test/i)).toBeInTheDocument();
 });
diff --git a/package.json b/package.json
index d23ba19..4351b5a 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "eslint-plugin-testing-library": "~5.0.1",
     "jasmine-core": "4.2.0",
     "jasmine-spec-reporter": "7.0.0",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "jest-environment-jsdom": "29.5.0",
     "jest-preset-angular": "14.0.3",
     "karma": "6.4.0",

From c0798651b8cb38e135bfabf29e1614fcec9696bc Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Sun, 7 Apr 2024 18:21:31 +0200
Subject: [PATCH 6/9] chore: update to Angular 17.3 (#441)

---
 package.json                                  | 36 +++++++++----------
 .../src/lib/testing-library.ts                | 16 ++++-----
 .../tests/defer-blocks.spec.ts                | 24 ++++++-------
 3 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 4351b5a..f841435 100644
--- a/package.json
+++ b/package.json
@@ -28,15 +28,15 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "17.1.0",
-    "@angular/cdk": "17.1.0",
-    "@angular/common": "17.1.0",
-    "@angular/compiler": "17.1.0",
-    "@angular/core": "17.1.0",
-    "@angular/material": "17.1.0",
-    "@angular/platform-browser": "17.1.0",
-    "@angular/platform-browser-dynamic": "17.1.0",
-    "@angular/router": "17.1.0",
+    "@angular/animations": "17.3.2",
+    "@angular/cdk": "17.3.2",
+    "@angular/common": "17.3.2",
+    "@angular/compiler": "17.3.2",
+    "@angular/core": "17.3.2",
+    "@angular/material": "17.3.2",
+    "@angular/platform-browser": "17.3.2",
+    "@angular/platform-browser-dynamic": "17.3.2",
+    "@angular/router": "17.3.2",
     "@ngrx/store": "17.1.0",
     "@nx/angular": "17.2.8",
     "@testing-library/dom": "^9.0.0",
@@ -45,25 +45,25 @@
     "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.1.0",
-    "@angular-devkit/core": "17.1.0",
-    "@angular-devkit/schematics": "17.1.0",
+    "@angular-devkit/build-angular": "17.3.2",
+    "@angular-devkit/core": "17.3.2",
+    "@angular-devkit/schematics": "17.3.2",
     "@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.1.0",
-    "@angular/compiler-cli": "17.1.0",
-    "@angular/forms": "17.1.0",
-    "@angular/language-service": "17.1.0",
+    "@angular/cli": "~17.3.2",
+    "@angular/compiler-cli": "17.3.2",
+    "@angular/forms": "17.3.2",
+    "@angular/language-service": "17.3.2",
     "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",
     "@nx/jest": "17.2.8",
     "@nx/node": "17.2.8",
     "@nx/plugin": "17.2.8",
     "@nx/workspace": "17.2.8",
-    "@schematics/angular": "17.1.0",
+    "@schematics/angular": "17.3.2",
     "@testing-library/jasmine-dom": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
@@ -93,7 +93,7 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^12.1.6",
     "ng-mocks": "^14.11.0",
-    "ng-packagr": "17.1.0",
+    "ng-packagr": "17.3.0",
     "nx": "17.2.8",
     "postcss": "^8.4.5",
     "postcss-import": "14.1.0",
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 2b3ac75..9b57b50 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -9,11 +9,11 @@ import {
   SimpleChanges,
   Type,
 } from '@angular/core';
-import {ComponentFixture, DeferBlockState, TestBed, tick} from '@angular/core/testing';
-import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {NavigationExtras, Router} from '@angular/router';
-import {RouterTestingModule} from '@angular/router/testing';
-import type {BoundFunctions, Queries} from '@testing-library/dom';
+import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NavigationExtras, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import type { BoundFunctions, Queries } from '@testing-library/dom';
 import {
   configure as dtlConfigure,
   getQueriesForElement as dtlGetQueriesForElement,
@@ -25,8 +25,8 @@ import {
   waitForOptions as dtlWaitForOptions,
   within as dtlWithin,
 } from '@testing-library/dom';
-import {ComponentOverride, RenderComponentOptions, RenderResult, RenderTemplateOptions} from './models';
-import {getConfig} from './config';
+import { ComponentOverride, RenderComponentOptions, RenderResult, RenderTemplateOptions } from './models';
+import { getConfig } from './config';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
 const safeInject = TestBed.inject || TestBed.get;
@@ -95,7 +95,7 @@ export async function render<SutType, WrapperType = SutType>(
     }),
     providers: [...providers],
     schemas: [...schemas],
-    deferBlockBehavior: deferBlockBehavior as any
+    deferBlockBehavior: deferBlockBehavior ?? DeferBlockBehavior.Manual,
   });
   overrideComponentImports(sut, componentImports);
   overrideChildComponentProviders(childComponentOverrides);
diff --git a/projects/testing-library/tests/defer-blocks.spec.ts b/projects/testing-library/tests/defer-blocks.spec.ts
index 147c5c7..7405a4d 100644
--- a/projects/testing-library/tests/defer-blocks.spec.ts
+++ b/projects/testing-library/tests/defer-blocks.spec.ts
@@ -1,7 +1,6 @@
-import {Component} from '@angular/core';
-import {DeferBlockBehavior, DeferBlockState} from '@angular/core/testing';
-import {render, screen} from '../src/public_api';
-import {fireEvent} from "@testing-library/dom";
+import { Component } from '@angular/core';
+import { DeferBlockBehavior, DeferBlockState } from '@angular/core/testing';
+import { render, screen, fireEvent } from '../src/public_api';
 
 test('renders a defer block in different states using the official API', async () => {
   const { fixture } = await render(FixtureComponent);
@@ -30,8 +29,8 @@ test('renders a defer block in different states using ATL', async () => {
 });
 
 test('renders a defer block in different states using DeferBlockBehavior.Playthrough', async () => {
-   await render(FixtureComponent, {
-    deferBlockBehavior: DeferBlockBehavior.Playthrough
+  await render(FixtureComponent, {
+    deferBlockBehavior: DeferBlockBehavior.Playthrough,
   });
 
   expect(await screen.findByText(/loading/i)).toBeInTheDocument();
@@ -39,12 +38,12 @@ test('renders a defer block in different states using DeferBlockBehavior.Playthr
 });
 
 test('renders a defer block in different states using DeferBlockBehavior.Playthrough event', async () => {
-  await render(FixtureComponentWithEvents, {
-    deferBlockBehavior: DeferBlockBehavior.Playthrough
+  await render(FixtureComponentWithEventsComponent, {
+    deferBlockBehavior: DeferBlockBehavior.Playthrough,
   });
 
-  const button = screen.getByRole('button', {name: /click/i});
-  fireEvent.click(button)
+  const button = screen.getByRole('button', { name: /click/i });
+  fireEvent.click(button);
 
   expect(screen.getByText(/empty defer block/i)).toBeInTheDocument();
 });
@@ -91,9 +90,8 @@ class FixtureComponent {}
   template: `
     <button #trigger>Click</button>
     @defer(on interaction(trigger)) {
-        <div>empty defer block</div>
+    <div>empty defer block</div>
     }
   `,
 })
-class FixtureComponentWithEvents {}
-
+class FixtureComponentWithEventsComponent {}

From 8897b4963cb0548c0827eb265f3bf87d53f16b12 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Mon, 8 Apr 2024 18:14:11 +0200
Subject: [PATCH 7/9] docs: add example for output and model (#443)

---
 .../22-signal-inputs.component.spec.ts        | 58 +++++++++++++++++++
 .../examples/22-signal-inputs.component.ts    | 17 +++++-
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
index f2500a2..6a55e61 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
@@ -1,15 +1,73 @@
 import { render, screen } from '@testing-library/angular';
 import { SignalInputComponent } from './22-signal-inputs.component';
+import userEvent from '@testing-library/user-event';
 
 test('works with signal inputs', async () => {
   await render(SignalInputComponent, {
     componentInputs: {
+      greeting: 'Hello',
       name: 'world',
+    },
+  });
+
+  expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
+
+test('can update signal inputs', async () => {
+  const { fixture } = await render(SignalInputComponent, {
+    componentInputs: {
       greeting: 'Hello',
+      name: 'world',
     },
   });
 
   expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+
+  fixture.componentInstance.name.set('updated');
+  // set doesn't trigger change detection within the test, findBy is needed to update the template
+  expect(await screen.findByText(/hello updated/i)).toBeInTheDocument();
+  // it's not recommended to access the model directly, but it's possible
+  expect(fixture.componentInstance.name()).toBe('updated');
+});
+
+test('output emits a value', async () => {
+  const submitFn = jest.fn();
+  await render(SignalInputComponent, {
+    componentInputs: {
+      greeting: 'Hello',
+      name: 'world',
+    },
+    componentOutputs: {
+      submit: { emit: submitFn } as any,
+    },
+  });
+
+  await userEvent.click(screen.getByRole('button'));
+
+  expect(submitFn).toHaveBeenCalledWith('world');
+});
+
+test('model update also updates the template', async () => {
+  const { fixture } = await render(SignalInputComponent, {
+    componentInputs: {
+      greeting: 'Hello',
+      name: 'initial',
+    },
+  });
+
+  expect(screen.getByText(/hello initial/i)).toBeInTheDocument();
+
+  await userEvent.clear(screen.getByRole('textbox'));
+  await userEvent.type(screen.getByRole('textbox'), 'updated');
+
+  expect(screen.getByText(/hello updated/i)).toBeInTheDocument();
+  expect(fixture.componentInstance.name()).toBe('updated');
+
+  fixture.componentInstance.name.set('new value');
+  // set doesn't trigger change detection within the test, findBy is needed to update the template
+  expect(await screen.findByText(/hello new value/i)).toBeInTheDocument();
+  // it's not recommended to access the model directly, but it's possible
+  expect(fixture.componentInstance.name()).toBe('new value');
 });
 
 test('works with signal inputs and rerenders', async () => {
diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
index 2ba1619..ae1e779 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
@@ -1,13 +1,24 @@
-import { Component, input } from '@angular/core';
+import { Component, input, model, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-signal-input',
-  template: ` {{ greetings() }} {{ name() }} `,
+  template: `
+    <div>{{ greetings() }} {{ name() }}</div>
+    <button (click)="submitName()">Submit</button>
+    <input type="text" [(ngModel)]="name" />
+  `,
   standalone: true,
+  imports: [FormsModule],
 })
 export class SignalInputComponent {
   greetings = input<string>('', {
     alias: 'greeting',
   });
-  name = input.required<string>();
+  name = model.required<string>();
+  submit = output<string>();
+
+  submitName() {
+    this.submit.emit(this.name());
+  }
 }

From e49d2ce699c5b56d605a6fa30385b3bc3f680605 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Thu, 11 Apr 2024 15:05:43 +0200
Subject: [PATCH 8/9] docs: remove console.log in example (#446)

---
 .../src/app/examples/login-form.spec.ts               | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/apps/example-app-karma/src/app/examples/login-form.spec.ts b/apps/example-app-karma/src/app/examples/login-form.spec.ts
index 07a1e1d..9c51065 100644
--- a/apps/example-app-karma/src/app/examples/login-form.spec.ts
+++ b/apps/example-app-karma/src/app/examples/login-form.spec.ts
@@ -51,16 +51,7 @@ class LoginComponent {
   });
 
   constructor(private fb: FormBuilder) {}
-
-  blurred() {
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-    console.log('aaaaaaaaac');
-  }
+  
   get email(): FormControl {
     return this.form.get('email') as FormControl;
   }

From c378423b2b52629f71787e23ee9b50f9cbc7af33 Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Thu, 18 Apr 2024 12:37:18 +0200
Subject: [PATCH 9/9] feat: upgrade @testing-library/dom to v10 (#447)

BREAKING CHANGE:

New version of @testing-library/dom changes various roles. Check out the changed tests in testing-library/dom-testing-library@2c57055 to get an overview about what changed.
---
 .github/workflows/ci.yml              | 2 +-
 package.json                          | 2 +-
 projects/testing-library/package.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 78880eb..28aac0d 100644
--- a/.github/workflows/ci.yml
+++ b/.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]' || '[16, 18, 20]') }}
+        node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[20]' || '[18, 20]') }}
         os: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '["ubuntu-latest"]' || '["ubuntu-latest", "windows-latest"]') }}
     runs-on: ${{ matrix.os }}
 
diff --git a/package.json b/package.json
index f841435..6c96abe 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@angular/router": "17.3.2",
     "@ngrx/store": "17.1.0",
     "@nx/angular": "17.2.8",
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "rxjs": "7.8.0",
     "tslib": "~2.3.1",
     "zone.js": "0.14.2"
diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json
index 7ebb6e7..fd3cfac 100644
--- a/projects/testing-library/package.json
+++ b/projects/testing-library/package.json
@@ -35,7 +35,7 @@
     "@angular/core": ">= 17.0.0"
   },
   "dependencies": {
-    "@testing-library/dom": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
     "tslib": "^2.3.1"
   },
   "publishConfig": {