diff --git a/projects/spectator/jest/test/set-input-alias-names.spec.ts b/projects/spectator/jest/test/set-input-alias-names.spec.ts new file mode 100644 index 00000000..e9880e8b --- /dev/null +++ b/projects/spectator/jest/test/set-input-alias-names.spec.ts @@ -0,0 +1,72 @@ +import { Component, Input, input } from '@angular/core'; +import { createComponentFactory } from '@ngneat/spectator/jest'; + +describe('SetInputAliasNames', () => { + describe('input decorators', () => { + @Component({ + selector: 'app-root', + template: ` +
{{ name }}
+
{{ numOfYears }}
+ `, + standalone: true, + }) + class DummyComponent { + @Input('userName') name!: string; + @Input({ alias: 'age' }) numOfYears!: number; + } + + const createComponent = createComponentFactory(DummyComponent); + + it('setInput should respect the alias names', () => { + // Arrange + const spectator = createComponent(); + + const nameElement = spectator.query('[data-test="set-input--name"]')!; + const ageElement = spectator.query('[data-test="set-input--age"]')!; + + // Act + spectator.setInput('userName', 'John'); + spectator.setInput('age', '123'); + + // Assert + expect(nameElement.innerHTML).toBe('John'); + expect(ageElement.innerHTML).toBe('123'); + }); + }); + + describe('signal inputs', () => { + @Component({ + selector: 'app-root', + template: ` +
{{ name() }}
+
{{ numOfYears() }}
+ `, + standalone: true, + }) + class DummyComponent { + name = input.required({ alias: 'userName' }); + numOfYears = input(0, { alias: 'age' }); + } + + const createComponent = createComponentFactory(DummyComponent); + + it('setInput should respect the alias names', () => { + // Arrange + const spectator = createComponent({ + detectChanges: false, + }); + + const nameElement = spectator.query('[data-test="set-input--name"]')!; + const ageElement = spectator.query('[data-test="set-input--age"]')!; + + // Act + spectator.setInput('userName', 'John'); + spectator.setInput('age', '123'); + + // Assert + expect(nameElement.innerHTML).toBe('John'); + expect(ageElement.innerHTML).toBe('123'); + }); + }); +}); diff --git a/projects/spectator/src/lib/spectator/spectator.ts b/projects/spectator/src/lib/spectator/spectator.ts index c97e291a..26fd4dca 100644 --- a/projects/spectator/src/lib/spectator/spectator.ts +++ b/projects/spectator/src/lib/spectator/spectator.ts @@ -42,6 +42,7 @@ export class Spectator extends DomSpectator { public setInput(input: InferInputSignals): void; public setInput(input: K, inputValue: InferInputSignal): void; + public setInput(input: string, inputValue: unknown): void; public setInput(input: any, value?: any): void { setProps(this.fixture.componentRef, input, value); // Force cd on the host component for cases such as: https://github.com/ngneat/spectator/issues/539 @@ -66,7 +67,7 @@ export class Spectator extends DomSpectator { const renderedDeferFixture = await this._renderDeferStateAndGetFixture( DeferBlockState.Complete, deferBlockIndex, - deferBlockFixtures + deferBlockFixtures, ); return this._childrenDeferFixtures(renderedDeferFixture); @@ -75,7 +76,7 @@ export class Spectator extends DomSpectator { const renderedDeferFixture = await this._renderDeferStateAndGetFixture( DeferBlockState.Placeholder, deferBlockIndex, - deferBlockFixtures + deferBlockFixtures, ); return this._childrenDeferFixtures(renderedDeferFixture); @@ -84,7 +85,7 @@ export class Spectator extends DomSpectator { const renderedDeferFixture = await this._renderDeferStateAndGetFixture( DeferBlockState.Loading, deferBlockIndex, - deferBlockFixtures + deferBlockFixtures, ); return this._childrenDeferFixtures(renderedDeferFixture); @@ -108,7 +109,7 @@ export class Spectator extends DomSpectator { private async _renderDeferStateAndGetFixture( deferBlockState: DeferBlockState, deferBlockIndex = 0, - deferBlockFixtures: Promise + deferBlockFixtures: Promise, ): Promise { const deferFixture = (await deferBlockFixtures)[deferBlockIndex]; diff --git a/projects/spectator/test/set-input-alias-names.spec.ts b/projects/spectator/test/set-input-alias-names.spec.ts new file mode 100644 index 00000000..82f4af06 --- /dev/null +++ b/projects/spectator/test/set-input-alias-names.spec.ts @@ -0,0 +1,72 @@ +import { Component, Input, input } from '@angular/core'; +import { createComponentFactory } from '@ngneat/spectator'; + +describe('SetInputAliasNames', () => { + describe('input decorators', () => { + @Component({ + selector: 'app-root', + template: ` +
{{ name }}
+
{{ numOfYears }}
+ `, + standalone: true, + }) + class DummyComponent { + @Input('userName') name!: string; + @Input({ alias: 'age' }) numOfYears!: number; + } + + const createComponent = createComponentFactory(DummyComponent); + + it('setInput should respect the alias names', () => { + // Arrange + const spectator = createComponent(); + + const nameElement = spectator.query('[data-test="set-input--name"]')!; + const ageElement = spectator.query('[data-test="set-input--age"]')!; + + // Act + spectator.setInput('userName', 'John'); + spectator.setInput('age', '123'); + + // Assert + expect(nameElement.innerHTML).toBe('John'); + expect(ageElement.innerHTML).toBe('123'); + }); + }); + + describe('signal inputs', () => { + @Component({ + selector: 'app-root', + template: ` +
{{ name() }}
+
{{ numOfYears() }}
+ `, + standalone: true, + }) + class DummyComponent { + name = input.required({ alias: 'userName' }); + numOfYears = input(0, { alias: 'age' }); + } + + const createComponent = createComponentFactory(DummyComponent); + + it('setInput should respect the alias names', () => { + // Arrange + const spectator = createComponent({ + detectChanges: false, + }); + + const nameElement = spectator.query('[data-test="set-input--name"]')!; + const ageElement = spectator.query('[data-test="set-input--age"]')!; + + // Act + spectator.setInput('userName', 'John'); + spectator.setInput('age', '123'); + + // Assert + expect(nameElement.innerHTML).toBe('John'); + expect(ageElement.innerHTML).toBe('123'); + }); + }); +});