From 9160da11d4870ea7d4a59e2912bdf75c4022ebe3 Mon Sep 17 00:00:00 2001 From: Mahdi Lazraq <94069699+mlz11@users.noreply.github.com> Date: Tue, 13 Aug 2024 19:48:52 +0200 Subject: [PATCH 1/3] fix: add support for InputSignalWithTransform in inputs property (#484) Closes #483 --- .../22-signal-inputs.component.spec.ts | 25 ++++++++++++------- .../examples/22-signal-inputs.component.ts | 7 +++--- projects/testing-library/src/lib/models.ts | 8 ++++-- 3 files changed, 26 insertions(+), 14 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 cb22ba6..470e639 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 @@ -7,11 +7,12 @@ test('works with signal inputs', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'world', + age: '45', }, }); const inputValue = within(screen.getByTestId('input-value')); - expect(inputValue.getByText(/hello world/i)).toBeInTheDocument(); + expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); }); test('works with computed', async () => { @@ -19,11 +20,12 @@ test('works with computed', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'world', + age: '45', }, }); const computedValue = within(screen.getByTestId('computed-value')); - expect(computedValue.getByText(/hello world/i)).toBeInTheDocument(); + expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); }); test('can update signal inputs', async () => { @@ -31,18 +33,19 @@ test('can update signal inputs', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'world', + age: '45', }, }); const inputValue = within(screen.getByTestId('input-value')); const computedValue = within(screen.getByTestId('computed-value')); - expect(inputValue.getByText(/hello world/i)).toBeInTheDocument(); + expect(inputValue.getByText(/hello world of 45 years old/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 inputValue.findByText(/hello updated/i)).toBeInTheDocument(); - expect(await computedValue.findByText(/hello updated/i)).toBeInTheDocument(); + expect(await inputValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument(); + expect(await computedValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument(); // it's not recommended to access the model directly, but it's possible expect(fixture.componentInstance.name()).toBe('updated'); @@ -54,6 +57,7 @@ test('output emits a value', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'world', + age: '45', }, on: { submit: submitFn, @@ -70,6 +74,7 @@ test('model update also updates the template', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'initial', + age: '45', }, }); @@ -100,22 +105,24 @@ test('works with signal inputs, computed values, and rerenders', async () => { inputs: { ...aliasedInput('greeting', 'Hello'), name: 'world', + age: '45', }, }); const inputValue = within(screen.getByTestId('input-value')); const computedValue = within(screen.getByTestId('computed-value')); - expect(inputValue.getByText(/hello world/i)).toBeInTheDocument(); - expect(computedValue.getByText(/hello world/i)).toBeInTheDocument(); + expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); + expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); await view.rerender({ inputs: { ...aliasedInput('greeting', 'bye'), name: 'test', + age: '0', }, }); - expect(inputValue.getByText(/bye test/i)).toBeInTheDocument(); - expect(computedValue.getByText(/bye test/i)).toBeInTheDocument(); + expect(inputValue.getByText(/bye test of 0 years old/i)).toBeInTheDocument(); + expect(computedValue.getByText(/bye test of 0 years old/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 index ddc0c90..dfe6bd0 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,10 +1,10 @@ -import { Component, computed, input, model, output } from '@angular/core'; +import { Component, computed, input, model, numberAttribute, output } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-signal-input', template: ` -
{{ greetings() }} {{ name() }}
+
{{ greetings() }} {{ name() }} of {{ age() }} years old
{{ greetingMessage() }}
@@ -16,10 +16,11 @@ export class SignalInputComponent { greetings = input('', { alias: 'greeting', }); + age = input.required({ transform: numberAttribute }); name = model.required(); submit = output(); - greetingMessage = computed(() => `${this.greetings()} ${this.name()}`); + greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`); submitName() { this.submit.emit(this.name()); diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts index f7697c5..1956728 100644 --- a/projects/testing-library/src/lib/models.ts +++ b/projects/testing-library/src/lib/models.ts @@ -1,4 +1,4 @@ -import { Type, DebugElement, EventEmitter, Signal } from '@angular/core'; +import { Type, DebugElement, EventEmitter, Signal, InputSignalWithTransform } from '@angular/core'; import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '@angular/core/testing'; import { Routes } from '@angular/router'; import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom'; @@ -94,7 +94,11 @@ export type AliasedInputs = Record>; export type ComponentInput = | { - [P in keyof T]?: T[P] extends Signal ? U : T[P]; + [P in keyof T]?: T[P] extends InputSignalWithTransform + ? U + : T[P] extends Signal + ? U + : T[P]; } | AliasedInputs; From b11b6c3c60a02172ad5bf02e7d3b1d8bb5196f8f Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 13 Aug 2024 19:50:36 +0200 Subject: [PATCH 2/3] docs: add mlz11 as a contributor for code, and test (#485) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 10 ++++++++++ README.md | 1 + 2 files changed, 11 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index a919fb6..198cd09 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -400,6 +400,16 @@ "contributions": [ "code" ] + }, + { + "login": "mlz11", + "name": "Mahdi Lazraq", + "avatar_url": "https://avatars.githubusercontent.com/u/94069699?v=4", + "profile": "https://github.com/mlz11", + "contributions": [ + "code", + "test" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index f542b69..17bffce 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,7 @@ Thanks goes to these people ([emoji key][emojis]): S. Mumenthaler
S. Mumenthaler
💻 ⚠️ Andrei Alecu
Andrei Alecu
💻 🤔 📖 Daniel Ramírez Barrientos
Daniel Ramírez Barrientos
💻 + Mahdi Lazraq
Mahdi Lazraq
💻 ⚠️ From 460fb32da1158dc8adc26ca6acd052078cb747d4 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Tue, 13 Aug 2024 20:04:07 +0200 Subject: [PATCH 3/3]