Issue
When I run the ng test
on this spec file it fail with this error:
Failed: The pipe 'async' could not be found!
I have tried to fakesync()
the test and still the same
describe('ProductSinglePage', () => {
let component: ProductSinglePage;
let fixture: ComponentFixture<ProductSinglePage>;
let store: MockStore;
const initialState = { keyvalue: false };
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProductFormPage],
imports: [CommonModule, RouterTestingModule, IonicModule.forRoot()],
providers: [
provideMockStore({
initialState,
selectors: [
{
selector: getProductById,
value: 1
}
]
}),
],
}).compileComponents();
store = TestBed.inject(MockStore);
fixture = TestBed.createComponent(ProductSinglePage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
afterEach(() => {
fixture.destroy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Very Simple Html
<ion-list>
<ion-item *ngFor="let product of (product$ | async) ">
<ion-label> <b>{{product.key}}</b> : <b>{{product.value}}</b></ion-label>
</ion-item>
</ion-list>
Very Simple ts file used NGRX
@Component({
selector: 'app-product-single',
templateUrl: './product-single.page.html',
styleUrls: ['./product-single.page.scss'],
})
export class ProductSinglePage implements OnInit {
product$: Observable<ProductInterface>;
constructor(private store: Store<AppState>) {}
ngOnInit() {
this.product$ = this.store.select(getProductById);
}
}
Solution
I was thinking that the testing unit has an error, but actually, the HTML was not right
it passes the test after removed async
from the HTML ngFor
<ion-list>
<ion-item *ngFor="let product of product$ ">
<ion-label> <b>{{product.key}}</b> : <b>{{product.value}}</b></ion-label>
</ion-item>
</ion-list>
Answered By - Mansour Alnasser
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.