角度单位测试输入ChangeDetectionStrategy.OnPush on select

Question

我有两个关于如何测试选项的问题

1） 有没有更好的方法来测试

使用ChangeDetectionStrategy.OnPush输入

（如果我评论该行，下面的测试很有效 与OnPush）

使用TestBed.overrideComponent，如

https://medium.com/@juliapassynkova/how-to-test-onpush-components-c9b39871fe1e

TestBed.overrideComponent(TestComponent, {
  set: new Component({
    selector: 'test',
    template: `test id = <span>{{id}}</span>`,
    changeDetection: ChangeDetectionStrategy.Default
  })
});

2）

与 const option = debugEl.query（By.css（＆＃39; select option＆＃39;））。nativeElement; 它只返回第一个（我等待两个） 那么如何以我可以测试的方式获得所有选项 喜欢

expect(option[0].text).toBe('Italiano');
expect(option[1].text).toBe('English');

我的组件

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

import { Language } from './language.model';

@Component({
  selector: 'languages',
  templateUrl: './languages.component.html',
  styleUrls: ['./languages.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LanguagesComponent {
  @Input() languages: Language[];
  @Output()
  change: EventEmitter<Language> = new EventEmitter<Language>();
  constructor() { }
  onSelect(language: Language) {
    this.change.emit(language);
  }
}

组件html

<select #selectLanguage (change)="onSelect(selectLanguage.value)">
  <option  *ngFor="let language of languages" [ngValue]="language">
    {{language.label}}
  </option>
</select>

测试

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { LanguagesComponent } from './languages.component';
import { Language } from './language.model';

const languages: Language[] = [{
  id: 1,
  label: 'Italiano',
  locale: 'it',
  default: false
}, {
  id: 2,
  label: 'English',
  locale: 'en',
  default: true
}];

fdescribe('LanguagesComponent', () => {
  let component: LanguagesComponent;
  let debugEl: DebugElement;
  let element: HTMLElement;
  let fixture: ComponentFixture<LanguagesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [BrowserModule, FormsModule],
      declarations: [LanguagesComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LanguagesComponent);
    component = fixture.componentInstance;
    debugEl = fixture.debugElement;
    element = debugEl.nativeElement;
    fixture.detectChanges();
  });

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

  it('should render `Hello World!`', async(() => {
    component.languages = languages;
    //trigger change detection
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      const option = debugEl.query(By.css('select option')).nativeElement;
      expect(option.text).toBe('Italiano');
    });
  }));
});