mercredi 2 mai 2018

Testing component template with Angular and Redux

I'm using Angular (5) & @angular/redux-store (7.0.0) to manage my application. For the tests, I'm using Jasmine (2.99.1) library.

I want to write a test that check if an element is present into the DOM of my component template. This DOM element presence is determined by a *ngIf like this : product-list.component.html

<div class="product-list"
  *ngIf="(basket$ | async).length > 0">
...
</div>

In my component.ts file, I have the following variable declared : product-list.component.ts

 @select(['saleState', 'basket'])
 readonly basket$: Observable<Product[]>;

And finally, in my test file, I'm using MockNgRedux to provide me the mock of this Observable : product-list.component.spec.ts

it('should show the product list when a product is added to basket', done => {
   const basket$ = MockNgRedux.getSelectorStub<RootStateInterface, Product[]>(['saleState', 'basket']);

   basket$.next([
     new Product('name', 12.0) // simplified for example purpose
   ]);
   basket$.complete();

   fixture.componentInstance.basket$
      .filter(val => val && val.length > 0)
      .subscribe(val => {
        console.log(val); // it works I see my inserted product
        fixture.detectChanges();
        const container = fixture.debugElement.query(By.css('div.product-list')); // <- container is null
        expect(container).toBeDefined();
        done();
   });
});

I tried few things to see if template would be updated, but I never could make a debugElement.query works on this div ! (Tried in fixture.whenStable, out of the subscribe, subscribing to the const Observable, ...).

It's almost like whatever I do in the test case, it'll never update the template... Thanks for your help

Aucun commentaire:

Enregistrer un commentaire