当我的分页工作时，为什么我的测试在ngxpagination失败?

Question

我已经用ngxpagination为我的汽车列表创建了分页。它也很好用。但不幸的是，我的npm test如果失败，将出现下面的错误信息。

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>

模块:

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 {}

错误:

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)

谁能告诉我为什么我的考试不及格?更新1

这是我的测试类我没有因为分页而改变课堂上的任何东西。我也不知道如何正确地测试分页。

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 {
}

更新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)

Answer 1

我认为您没有在测试中导入正确的模块

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [],
imports: [ 
NgxPaginationModule, // make sure you have this
],
providers: [ AppRoutingModule],
}).compileComponents();
}));