Cómo escribir testcase para la propiedad @Input. Y verifique si hay algún valor presente usando la directiva ngIf dentro de ng-container. Entonces, ¿cómo escribir una prueba para tal escenario?
Aquí está mi código. Por favor, ayúdame.
ChildComponent.ts
@Input() myInput;ChildComponent.html
<ng-container *ngIf="myInput?.value1"> - Display some code </ng-container> <ng-container *ngIf="myInput?.value2"> - Display some code </ng-container>En este código, ¿cómo podemos verificar si estos ngIf realmente funcionan? Realmente necesito una pequeña pista aquí para escribir un caso de prueba. Dado que Angular es nuevo para mí.
Muchas gracias
Puede verificar la presencia de elementos html dentro de su dispositivo de prueba en sus pruebas angulares, en su prueba haga algo como esto:
beforeEach(() => { fixture = TestBed.createComponent(MyComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should be present if color is blue', () => { component.color = 'blue'; fixture.detectChanges(); expect(fixture.nativeElement.querySelector('#elementThatIsPresentIfBlue')).not.toBeNull(); });La variable @input i:e myInput se establece desde el componente host. Para verificar la representación de html específico, puede simular el padre configurando la propiedad de entrada.
En su archivo de prueba, puede acceder fácilmente a la variable @Input usando [componentInstance.myInput] y después de cambiar el valor de entrada, puede verificar la representación del elemento html condicional.
// In your test block component.myInput = {value1: 'Val', value2: undefined}; // trigger manual data binding fixture.detectChanges(); let firstEle = fixture.debugElement.nativeElement.querySelector(`selector`); expect(firstEle).toBeTruthy(); component.myInput = {value1: undefined, value2: 'val'}; // trigger manual data binding fixture.detectChanges(); let secondEle = fixture.debugElement.nativeElement.querySelector(`selector`); expect(secondEle ).toBeTruthy();Referencias https://angular.io/guide/testing-components-scenarios#component-with-inputs-and-outputs
https://angular.io/guide/testing-components-basics#debugelement