微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何测试在 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 举报,一经查实,本站将立刻删除。