在管道單元測試中進行模擬時服務未定義

Question

我正在嘗試在Pipe的單元測試中模擬服務。 我面臨的問題是，即使遵循多種指南並使用了許多方法，我仍然會遇到TypeError: Cannot read property 'transformDateToApi' of undefined執行測試時TypeError: Cannot read property 'transformDateToApi' of undefined錯誤的TypeError: Cannot read property 'transformDateToApi' of undefined 。

我見過其他人在組件上執行此任務，但是對於Pipe，它略有不同，對嗎？

date.pipe.spec.ts

import { TestBed } from '@angular/core/testing';
import { DatePipe } from './date.pipe';
import { DateFormat } from '@app/enums';
import { ApiService } from '@app/services';
import { MainService } from '@app/state';

class MockApiService extends ApiService {
    transformDateToApi(date: Date = new Date()): string {
        return '13-08-1996T22:10:32';
    }
}

describe('DatePipe', () => {
    const testDate = new Date('13-08-1996T22:10:32');
    const testDateAsString = '13-08-1996 22:10:32';

    const pipe = new DatePipe();
    let apiService: ApiService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                { provide: ApiService, useClass: MockApiService },
                { provide: MainService, useValue: {} }
            ]
        });
        apiService = TestBed.get(ApiService);
    });

    // Date object test
    it('date (as Date object) will be properly transformed in DateFormat.Xshort format', () => {
        expect(pipe.transform(testDate, DateFormat.Xshort)).toBe('13-08-\'96');
    });
    it('date (as Date object) will be properly transformed in DateFormat.Short format', () => {
        expect(pipe.transform(testDate, DateFormat.Short)).toBe('13-08-1996');
    });
    it('date (as Date object) will be properly transformed in DateFormat.Pretty format', () => {
        expect(pipe.transform(testDate, DateFormat.Pretty)).toBe('13 augustus 1996');
    });
    it('date (as Date object) will be properly transformed in DateFormat.WithTime format', () => {
        expect(pipe.transform(testDate, DateFormat.WithTime)).toBe('13 augustus 1996 22:10:32');
    });
});

date.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { ApiService } from '@app/services';
import { DateFormat } from '@app/enums';
import { DateSegments } from '@app/interfaces';

@Pipe({
    name: 'formatDate'
})
export class DatePipe implements PipeTransform {
    private date: DateSegments;

    constructor (
        private apiService: ApiService
    ) { }

    transform(date: Date | string, format: DateFormat = DateFormat.Pretty): string {
        if ( date instanceof Date ) {
            console.log(this.apiService);
            console.log(ApiService);
            date = this.apiService.transformDateToApi(date);
        }

..... (irrelevant code to this question)

我收到的錯誤是TypeError: Cannot read property 'transformDateToApi' of undefined 。

至此，我的反復試驗策略已被重新帶到一起粉碎代碼，這種策略對我沒有任何幫助。

Answer 1

你這樣做是錯的。

管道非常簡單，您不應使用測試台對其進行測試。 而是模擬您的服務，並通過注入服務來簡單地創建它。 這樣的事情。

import { TestBed } from '@angular/core/testing';
import { DatePipe } from './date.pipe';
import { DateFormat } from '@app/enums';
import { ApiService } from '@app/services';
import { MainService } from '@app/state';

const apiServiceMock = {
  transformDateToApi(date: Date = new Date()): string {
    return '13-08-1996T22:10:32';
  }
};

describe('DatePipe', () => {
  const testDate = new Date('13-08-1996T22:10:32');
  const testDateAsString = '13-08-1996 22:10:32';

  let pipe: DatePipe;
  let apiService: ApiService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: ApiService, useValue: apiServiceMock },
        { provide: MainService, useValue: {} }
      ]
    });
    apiService = TestBed.get(ApiService);
  });

  beforeEach(() => {
    pipe = new DatePipe(apiServiceMock as any);
  });

  // Date object test
  it('date (as Date object) will be properly transformed in DateFormat.Xshort format', () => {
    expect(pipe.transform(testDate, DateFormat.Xshort)).toBe('13-08-\'96');
  });
  it('date (as Date object) will be properly transformed in DateFormat.Short format', () => {
    expect(pipe.transform(testDate, DateFormat.Short)).toBe('13-08-1996');
  });
  it('date (as Date object) will be properly transformed in DateFormat.Pretty format', () => {
    expect(pipe.transform(testDate, DateFormat.Pretty)).toBe('13 augustus 1996');
  });
  it('date (as Date object) will be properly transformed in DateFormat.WithTime format', () => {
    expect(pipe.transform(testDate, DateFormat.WithTime)).toBe('13 augustus 1996 22:10:32');
  });
});