type-safe-component-inputs

type-safe-component-inputs - Make your input signals type safe for testing

Angular currently lacks a robust and type-safe approach to set component input signals in test files. This package addresses that gap by providing a solution that enhances type safety and usability. Using the setComponentInputs function, you can conveniently set your component's input signals while ensuring their types are correctly inferred.

Installation

npm install type-safe-component-inputs@latest

Usage

import { Component, input } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { setComponentInputs } from './your-utils-file';
@Component({
  selector: 'app-test',
  template: '{{ name() }} - {{ count() }}',
})
class TestComponent {
  name = input.required<string>();
  count = input.required<number>();
}
   
describe('TestComponent', () => {
  let fixture: ComponentFixture<TestComponent>;
      beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TestComponent],
    }).compileComponents();
        fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });

  it('should set inputs with correct types', () => {
    setComponentInputs(fixture, { name: 'Test Name', count: 123 });
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Test Name - 123');
  });
});

If you like my work, you can

License

This project is licensed under the MIT License - see the LICENSE file for details.