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