如何测试在 Angular 中实现 cdk/table/DataSource 的自定义 DataSource 类

问题描述

我正在使用 MatTable 和 MatPaginator，因为我需要服务器端分页，所以我创建了一个自定义 DataSource 类，它正在实现 cdk/table/DataSource 类。

分页工作正常。但是现在当我测试自定义 DataSource 类时出现错误：无法解析 AccountDetailsDatasource 的所有参数

我怀疑该类没有获得 MatPaginator 实例。我做错了什么

CustomDataSource 的代码是：

import { CollectionViewer } from '@angular/cdk/collections';
import { DataSource } from '@angular/cdk/table';
import { MatPaginator } from '@angular/material';
import { BehaviorSubject,Observable,of } from 'rxjs';

import { AccountDetails } from '../models/account-details.interface';

import { AccountDetailsService } from './account-details.service';

export class AccountDetailsDatasource implements DataSource<AccountDetails> {
  private accountDetailsSubject: BehaviorSubject<AccountDetails[]> = new BehaviorSubject<AccountDetails[]>([]);
  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  private paginator: MatPaginator;

  constructor(private accountService: AccountDetailsService) {}

  connect(collectionViewer: CollectionViewer): Observable<AccountDetails[]> {
    console.log('Connecting data source.');
    return this.accountDetailsSubject.asObservable();
  }

  loadAccounts(
    headersMap: Map<string,string>,page: number,pageCount: number
  ): void {
    this.loadingSubject.next(true);
    this.accountService
      .getAccountDetails(headersMap,page + 1,pageCount)
      .subscribe(response => {
        this.accountDetailsSubject.next(response.data.accountDetailsResponse);
        this.paginator.length = response.data.totalRecords;
      });
  }

  disconnect(collectionViewer: CollectionViewer): void {
    console.log('disconnect');
    this.accountDetailsSubject.complete();
    this.loadingSubject.complete();
  }

  setPaginator(paginator: MatPaginator): void {
    this.paginator = paginator;
  }

  getPaginator(): MatPaginator {
    return this.paginator;
  }
}

我的测试类的代码是：

import { AccountDetailsDatasource } from './account-details-datasource';
import { Testbed } from '@angular/core/testing';
import { AccountDetailsService } from './account-details.service';
import { of } from 'rxjs';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatPaginator,MatPaginatorModule,MatTableModule } from '@angular/material';

  describe('AccountDetailsDatasource',() => {
    let dataService: AccountDetailsDatasource;
    let getSpy;
    const accountDetailsServiceMock = jasmine.createSpyObj('AccountDetailsService',[
      'getAccountDetails'
    ]);

    getSpy = accountDetailsServiceMock.getAccountDetails.and.returnValue(
      of({ status: 'ERROR',errors: [{ code: '0200',message: 'NO DATA FOUND !!' }] })
    );
  
    beforeEach(() => {
      Testbed.configureTestingModule({
        imports: [HttpClientTestingModule,MatTableModule,MatPaginatorModule],providers: [AccountDetailsDatasource,{ provide: AccountDetailsService,useValue: accountDetailsServiceMock },{ provide: MatPaginator,useVaue: {}}
      ]  
      });

      dataService= Testbed.get(AccountDetailsDatasource);
  
    });
  
    it('should create',() => {
      console.log(dataService.getPaginator)
      expect(dataService).toBeTruthy();
    });
  
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）