[英]Why do my tests fail at ngxpagination when my pagination works?
I have created pagination for my list of car with ngxpagination.我已经使用 ngxpagination 为我的汽车列表创建了分页。 It also works very well.
它也很好用。 But unfortunately my "npm test" fail with the error message below.
但不幸的是,我的“npm 测试”失败并显示以下错误消息。
HTML: HTML:
<ion-list id="list">
<ion-item id="list-item" button *ngFor="let carGroup of carGroups | orderByCarGroupName | filter: searchTerm
| paginate: {itemsPerPage: 8, currentPage: cp}" class="listMargin" (click)="openCarGroup(carGroup.id)">
<ion-label>{{carGroup.id}}</ion-label>
<ion-label>{{carGroup.carGroupName}}</ion-label>
</ion-item>
</ion-list>
MODULE:模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ListViewPageRoutingModule } from './list-view-routing.module';
import { ListViewPage } from './list-view.page';
import { ComponentsModule } from '../components.module';
import { NgxPaginationModule } from 'ngx-pagination';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { ListViewPipe } from './list-view.pipe';
@NgModule({
imports: [
CommonModule,
FormsModule,
NgxPaginationModule,
IonicModule,
ComponentsModule,
ListViewPageRoutingModule,
Ng2SearchPipeModule
],
declarations: [ListViewPage,
ListViewPipe
]
})
export class ListViewPageModule {}
ERROR:错误:
ListViewPage should open Details FAILED
Failed: NG0302: The pipe 'paginate' could not be found!. Find more at https://angular.io/errors/NG0302
error properties: Object({ code: '302' })
Error: NG0302: The pipe 'paginate' could not be found!. Find more at https://angular.io/errors/NG0302
at getPipeDef$1 (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25786:1)
at ɵɵpipe (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25743:1)
at ListViewPage_Template (ng:///ListViewPage.js:58:9)
at executeTemplate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9600:1)
at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9404:1)
at renderComponent (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10684:1)
at renderChildComponents (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9269:1)
at renderView (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9429:1)
at ComponentFactory$1.create (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25127:1)
at initComponent (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1740:1)
Can anyone tell me why my tests are failing?谁能告诉我为什么我的测试失败?
UPDATE 1更新 1
This is my Test Class I did not change anything in the class because of pagination.这是我的测试类,由于分页,我没有在类中更改任何内容。 I am also not sure how to test pagination properly.
我也不确定如何正确测试分页。
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { IonicModule } from '@ionic/angular';
import { MockListClientServiceService } from 'src/app/Mock/MockListClientServiceService';
import { ListClientServiceService } from 'src/app/services/list-client-service.service';
import { ListViewPage } from './list-view.page';
describe('ListViewPage', () => {
let component: ListViewPage;
let fixture: ComponentFixture<ListViewPage>;
let router: Router;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ ListViewPage, MockHeaderComponent],
schemas: [NO_ERRORS_SCHEMA],
imports: [IonicModule.forRoot(), RouterTestingModule],
providers: [ListClientServiceService]
}).compileComponents();
// Ersetze den Service mit einen Mock
TestBed.overrideComponent(
ListViewPage,
{
set: {
providers: [
{
provide: Router, useClass: class {
navigate = jasmine.createSpy('detail-view');
}
},
{ provide: ListClientServiceService, useClass: MockListClientServiceService }
]
}
}
);
fixture = TestBed.createComponent(ListViewPage);
router = fixture.debugElement.injector.get(Router);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
it('should open Details', async (done) => {
component.openCarGroup(component.carGroups[0].id);
expect(router.navigate).toHaveBeenCalledWith(['/detail-view', { carGroupId: component.carGroups[0].id }]);
done();
});
});
@Component({
selector: 'app-header',
template: ''
})
class MockHeaderComponent {
}
UPDATE 2:更新 2:
ListViewPage should open Details FAILED
Failed: Unexpected pipe 'ListViewPipe' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
Error: Unexpected pipe 'ListViewPipe' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
at verifySemanticsOfNgModuleImport (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27114:1)
at node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27012:1
at <Jasmine>
at verifySemanticsOfNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27011:1)
at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26975:1)
at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1074:1)
at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1319:1)
at R3TestBedCompiler.finalize (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:928:1)
at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1763:1)
at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1686:1)
Unhandled promise rejection: TypeError: Cannot read properties of undefined (reading 'openStructureGroup')
TypeError: Cannot read properties of undefined (reading 'openStructureGroup')
at src/app/components/list-view/list-view.page.spec.ts:55:15
at <Jasmine>
at node_modules/tslib/tslib.es6.js:76:1
at new ZoneAwarePromise (node_modules/zone.js/dist/zone-evergreen.js:960:1)
at __awaiter (node_modules/tslib/tslib.es6.js:72:1)
at UserContext.<anonymous> (src/app/components/list-view/list-view.page.spec.ts:54:46)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:363:1)
at Zone.run (node_modules/zone.js/dist/zone-evergreen.js:123:1)
i think you are not importing the right module in your test我认为您没有在测试中导入正确的模块
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [],
imports: [
NgxPaginationModule, // make sure you have this
],
providers: [ AppRoutingModule],
}).compileComponents();
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.