chore: unit test the signal inputs

ngneat · Mar 21, 2024 · d92c833 · d92c833
1 parent c07ac8c
commit d92c833
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 60 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
@@ -1,35 +1,72 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, input } from '@angular/core';
 import { createComponentFactory } from '@ngneat/spectator/jest';
 
 describe('SetInputAliasNames', () => {
-  @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('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/test/set-input-alias-names.spec.ts b/projects/spectator/test/set-input-alias-names.spec.ts
@@ -1,35 +1,72 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, input } from '@angular/core';
 import { createComponentFactory } from '@ngneat/spectator';
 
 describe('SetInputAliasNames', () => {
-  @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('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');
+    });
   });
 });