在 angular 7 单元测试中测试转换

Question

我正在尝试对我的组件进行单元测试，但出现错误 -

TypeError: this.oprl10nPipe.transform is not a function

我无法在我的规范文件中模拟转换。

我的组件代码-

import { Component, Input, OnInit, OnChanges, SimpleChanges,  ChangeDetectionStrategy} from '@angular/core';
import { DatePipe } from '@angular/common';
import { Severity } from "../../../../../../app-shared/src/lib/types/severity.enum";
import {Oprl10nPipe} from "../../../../../../app-shared/src/lib/l10n-translation/oprl10n.pipe";

@Component({
  selector: 'opr-watchlist-card',
  templateUrl: './watchlist-card.component.html',
  styleUrls: ['./watchlist-card.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WatchlistCardComponent implements OnInit, OnChanges {

  @Input() cardLabel: string;
  @Input() typeLabel: string;
  @Input() severity: number;
  @Input() lastUpdatedTime: number;
  @Input() isSelected: boolean = false;
  @Input() zoomLevel: number;
  title: string;
  severityName: string;

  constructor(private oprl10nPipe: Oprl10nPipe) { }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.zoomLevel) {
      this.zoomLevel = changes.zoomLevel.currentValue;
    }
    this.populateTitleData();
  }

  populateTitleData() {
    this.severityName = this.isSeverityNormal == true ? this.oprl10nPipe.transform('opr.watchlist.normal') :
      (this.isSeverityCritical == true ? this.oprl10nPipe.transform('opr.watchlist.critical') :
        (this.isSeverityMajor == true ? this.oprl10nPipe.transform('opr.watchlist.major') :
          (this.isSeverityMinor == true ? this.oprl10nPipe.transform('opr.watchlist.minor') :
            (this.isSeverityWarning == true ? this.oprl10nPipe.transform('opr.watchlist.warning') :
              (this.isSeverityDowntime == true ? this.oprl10nPipe.transform('opr.watchlist.downtime') :
                (this.isSeverityUnknown == true ? this.oprl10nPipe.transform('opr.watchlist.unknown') : ''))))));

    let datePipe = new DatePipe("en-US");
    let displayedLastUpdatedTime = (this.lastUpdatedTime) ? datePipe.transform(this.lastUpdatedTime, 'h:mm a') : '';
    this.title = `[${this.severityName}] ${this.cardLabel}
${this.oprl10nPipe.transform('opr.watchlist.type')} ${this.typeLabel}
${this.oprl10nPipe.transform('opr.watchlist.statusChanged')} ${displayedLastUpdatedTime}`;
  }

}

我的组件规范文件 -

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SimpleChange } from '@angular/core';
import { Oprl10nPipe } from "../../../../../../app-shared/src/lib/l10n-translation/oprl10n.pipe";
import { of } from 'rxjs';
import { WatchlistCardComponent } from './watchlist-card.component';
import { TRANSLATIONS } from '@angular/core';

export class Oprl10nPipeStub {
  public get(key: any): any {
    return of(key);
  }
}

const translations = '....';

// export class TranslateServiceStub {
//   public get(key: any): any {
//     return of(key);
//   }
// }

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: Oprl10nPipe, useClass: Oprl10nPipeStub },
        { provide: TRANSLATIONS, useValue: translations }
      ],
      declarations: [WatchlistCardComponent]
    })
      .compileComponents();
  }));

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

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

  it('should call ngOnChanges', () => {
    component.zoomLevel = 3;
    component.ngOnChanges({
      zoomLevel: new SimpleChange(null, component.zoomLevel, true)
    });
    fixture.detectChanges();
  })
});

我正在尝试像这样模拟提供，但它不起作用。

{ provide: Oprl10nPipe, useClass: Oprl10nPipeStub },
{ provide: TRANSLATIONS, useValue: translations }

我正在测试我的 ngOnChange，这是正确的方法吗 -

component.ngOnChanges({
          zoomLevel: new SimpleChange(null, component.zoomLevel, true)
        });

请指导我。

Answer 1

你可以试试：

const Oprl10nPipeStub = {
  transform: key => of(key)
};

Answer 2

我已将其添加到我的组件规范文件中并且它正在运行 -

    export class Oprl10nPipeStub {
      public get(key: any): any {
        return of(key);
      }

      public transform(key: any): any {
        return of(key);
      }
    }

在 beforeEach 里面 -

providers: [
   { provide: Oprl10nPipe, useClass: Oprl10nPipeStub }
],

在 angular 7 单元测试中测试转换

Testing transform in angular 7 unit test

unit-testing

karma-jasmine

angular

angular7