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

Question

我正在使用 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();
    });
  
  });