在 angular 中进行运行测试时出错：找不到管道 'paginate'（“

Question

我正在运行进行 angular 测试，但出现以下错误。

UserActivitiesComponent should create
Failed: Template parse errors:
The pipe 'paginate' could not be found ("

    <div class="row row-style"
      *ngFor="let [ERROR ->]item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsC"): ng:///DynamicTestModule/UserActivitiesComponent.html@160:18
Error: Template parse errors:
The pipe 'paginate' could not be found ("

    <div class="row row-style"
      *ngFor="let [ERROR ->]item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsC"): ng:///DynamicTestModule/UserActivitiesComponent.html@160:18
    at syntaxError (http://localhost:9877/_karma_webpack_/webpack:/Users/kannan/openmindcvs/primecast-web/node_modules/@angular/compiler/esm5/compiler.js:485:22)
    a

以下是我的angular测试class.

describe('UserActivitiesComponent', () => {
  let component: UserActivitiesComponent;
  let fixture: ComponentFixture<UserActivitiesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule(
      
      {
      imports: [
         HttpClientTestingModule,
         ReactiveFormsModule,
         TranslateModule.forRoot(),
         RouterTestingModule
      ],
      declarations: [ UserActivitiesComponent ,
                MomentDateTimePipe
      ],
      providers: [ 
        AccountsService,
        UsersService,
        AuditService,
        AuthenticationService,
        { provide: ConfigService, useClass: ConfigServiceMock }
      ],
      schemas: [NO_ERRORS_SCHEMA]

      }
    )
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserActivitiesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我只是提供我的部分用户-activities.component.ts如下。

@Component({
  selector: 'pc-user-activities',
  templateUrl: './user-activities.component.html',
  styleUrls: ['./user-activities.component.scss']
})
export class UserActivitiesComponent implements OnInit {

  pageNumber: number = 1;
  result: any[] ; 
  totalItemsCount = 0;
  pageSizes = [10, 25, 50, 100];
  pageSize = 10;
  offset = 0;

  sortBy="createdOn"
  sortDir="desc"

  minStartDate: Moment;
  maxEndDate: Moment;

  constructor(private fb: FormBuilder, private accountService: AccountsService, 
    private usersService: UsersService, private auditService: AuditService,
    private authenticationService: AuthenticationService, private configService: ConfigService) {
  }


  ngOnInit() {
}

}

组件html模板使用ngx-pagination。

  <ng-container *ngIf="result && result.length > 0">


    <div class="row row-style"
      *ngFor="let item of result | paginate: { itemsPerPage: pageSize, currentPage: pageNumber, totalItems: totalItemsCount }">

      <div class="col-2 row-cell">
        {{ item['createdOn'] | date: 'medium' }} 
      </div>

      <div class="col-2 row-cell">
        {{ item['firstName'] }} 
      </div>

      <div class="col-2 row-cell">
         {{ item['lastName'] }} 
      </div>

      <div class="col-2 row-cell">
        {{ 'LABELS.AUDIT.ACTION.' + item['type'] | translate }}
      </div>
  </ng-container>

 <div class="row">
      
      <div class="col-3 row-cell text-left text-muted">

          <span>
            {{ 'DATA_GRID.SHOWING' | translate }}
            <strong>
              {{ calculateLowerRange() }} - {{ calculateUpperRange() }}</strong
            >
            {{ 'DATA_GRID.OF' | translate }}
            <strong>{{ totalItemsCount }}</strong>
            <select
              class="custom-select custom-select-sm page-size-select"
              #pageSizeSelect
              (change)="pageSizeChanged($event.target.value)"
            >
              <option *ngFor="let size of pageSizes" [ngValue]="size">{{
                size
              }}</option>
            </select>
          </span>
      </div>

      <div class="col-9 row-cell">
        <p class="float-right">
          <pagination-controls class="my-pagination" previousLabel="Previous" nextLabel="Next"
            (pageChange)="pageChanged($event)"></pagination-controls>
        </p>
      </div>
    </div>

我在 app.module.ts 中添加了 NgxPaginationModule。

如果你能帮我解决这个问题，我将不胜感激。

Answer 1

在 TestBed.configureTestingModule 的导入中添加 NgxPaginationModule。 – 永顺

Answer 2

在 app.module.ts 中添加 NgxPaginationModule 不会解决单元测试问题。因为 unittest 创建了自己的测试模块，所以它也应该像使用 NgModule 一样注册。

试试下面的代码：

beforeEach(async(() => {
    TestBed.configureTestingModule(
      
      {
      imports: [
         HttpClientTestingModule,
         ReactiveFormsModule,
         TranslateModule.forRoot(),
         RouterTestingModule,
         NgxPaginationModule
      ],
...

在 angular 中进行运行测试时出错：找不到管道 'paginate'（“

Error while running test in angular : The pipe 'paginate' could not be found ("

angular

karma-runner

angular-test

在 angular 中进行 运行 测试时出错：找不到管道 'paginate'（“

Error while running test in angular : The pipe 'paginate' could not be found ("

angular

karma-runner

angular-test

在 angular 中进行运行测试时出错：找不到管道 'paginate'（“