fix(spectator): set input accepts alias names (#652)

* fix(spectator): set input accepts alias names * chore: unit test the signal inputs
ngneat · Mar 21, 2024 · 13c8bf1 · 13c8bf1
1 parent bd3f6f6
commit 13c8bf1
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 4 deletions.
diff --git a/projects/spectator/jest/test/set-input-alias-names.spec.ts 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: `
+        <div data-test="set-input--name">{{ name }}</div>
+        <div data-test="set-input--age">{{ numOfYears }}</div>
+      `,
+      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: `
+        <div data-test="set-input--name">{{ name() }}</div>
+        <div data-test="set-input--age">{{ numOfYears() }}</div>
+      `,
+      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
@@ -42,6 +42,7 @@ export class Spectator<C> extends DomSpectator<C> {
 
   public setInput<K extends keyof C>(input: InferInputSignals<C>): void;
   public setInput<K extends keyof C>(input: K, inputValue: InferInputSignal<C[K]>): 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<C> extends DomSpectator<C> {
         const renderedDeferFixture = await this._renderDeferStateAndGetFixture(
           DeferBlockState.Complete,
           deferBlockIndex,
-          deferBlockFixtures
+          deferBlockFixtures,
         );
 
         return this._childrenDeferFixtures(renderedDeferFixture);
@@ -75,7 +76,7 @@ export class Spectator<C> extends DomSpectator<C> {
         const renderedDeferFixture = await this._renderDeferStateAndGetFixture(
           DeferBlockState.Placeholder,
           deferBlockIndex,
-          deferBlockFixtures
+          deferBlockFixtures,
         );
 
         return this._childrenDeferFixtures(renderedDeferFixture);
@@ -84,7 +85,7 @@ export class Spectator<C> extends DomSpectator<C> {
         const renderedDeferFixture = await this._renderDeferStateAndGetFixture(
           DeferBlockState.Loading,
           deferBlockIndex,
-          deferBlockFixtures
+          deferBlockFixtures,
         );
 
         return this._childrenDeferFixtures(renderedDeferFixture);
@@ -108,7 +109,7 @@ export class Spectator<C> extends DomSpectator<C> {
   private async _renderDeferStateAndGetFixture(
     deferBlockState: DeferBlockState,
     deferBlockIndex = 0,
-    deferBlockFixtures: Promise<DeferBlockFixture[]>
+    deferBlockFixtures: Promise<DeferBlockFixture[]>,
   ): Promise<DeferBlockFixture> {
     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
@@ -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: `
+        <div data-test="set-input--name">{{ name }}</div>
+        <div data-test="set-input--age">{{ numOfYears }}</div>
+      `,
+      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: `
+        <div data-test="set-input--name">{{ name() }}</div>
+        <div data-test="set-input--age">{{ numOfYears() }}</div>
+      `,
+      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');
+    });
+  });
+});