mardi 18 février 2020

Angular Karma testing with a Parent-to-Grandchild variable using component extends

In Karma testing, I'm having trouble reading a variables value when the variable exists on a grandparent component. I've tried to simplify in the example below.
The "isLoading" variable is defined in the Grandparent.component and used in the Grandchild.component. The variable always resolvs to 'false' in the Grandchild.component, and will resolve correctly in the Parent.component. Would anyone have any thoughts on how to get this working with a parent-Grandchild relationship?

Example:

Grandparent.component.ts

export abstract class GrandparentComponent {...
   public isLoading$: Observable<boolean>;
   this.isLoading$ = this.store.pipe(select(fromStore.isLoading)), 
}

Parent.component.ts

export abstract class ParentComponent extends SmartComponent implements OnInit {...}

Grandchild.component.ts

export class GrandchildComponent extends ParentComponent {...}

GrandchildComponent.html

<button id="myButton"
   (click)="someAction()"
   [disabled]="(isLoading$ | async)"
   <mat-icon svgIcon="edit"></mat-icon>
</button>

Grandchild.component.spec.ts

it('should disable myButton when  isLoading', () => {
   component.isLoading$ = of(true);
   fixture.detectChanges();
   expect(instance.querySelector('#myButton').disabled).toBeTruthy();
});

Aucun commentaire:

Enregistrer un commentaire