Angular 单元测试选择 onChange 监视空值

Question

我想测试一个选择的 onChange 事件使用 spy on 但我收到错误

Expected spy onSelect to have been called with [ 'en' ] but actual calls were [ '' ].

组件

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

模板

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

测试

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();
    fixture = TestBed.overrideComponent(LanguagesComponent, {
      set: {
        selector: 'languages',
        templateUrl: './languages.component.html',
        changeDetection: ChangeDetectionStrategy.Default
      }
    })
      .createComponent(LanguagesComponent);

    fixture.detectChanges();
  }));

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

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

  it('should show `Italiano English` as option', async(() => {
    component.languages = languages;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      const options = debugEl.queryAll(By.css('select option'));
      expect(options[0].nativeElement.text).toBe('Italiano');
      expect(options[1].nativeElement.text).toBe('English');
    });
  }));

  it('should show `Italiano English` as option', async(() => {
    component.languages = languages;
    fixture.whenStable().then(() => {
      spyOn(component, 'onSelect');
      const select = debugEl.query(By.css('select')).nativeElement;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onSelect).toHaveBeenCalled();
      //expect(component.onSelect).toHaveBeenCalledWith('en');
    });
  }));

  it('should emit on change', fakeAsync(() => {
    component.languages = languages;
    fixture.whenStable().then(() => {
      spyOn(component.change, 'emit');
      const select = debugEl.query(By.css('select')).nativeElement;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.change.emit).toHaveBeenCalled();
      expect(component.change.emit).toHaveBeenCalledWith('en');
    });
  }));
});

你能帮帮我吗？

已解决

作为@Ayala的回复但他/她只是忘记了fixture.detectChanges();

it('should show `Italiano English` as option', async(() => {
    component.languages = languages;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      spyOn(component, 'onSelect');
      const select = debugEl.query(By.css('select')).nativeElement;
      select.value = select.options[1].value;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onSelect).toHaveBeenCalled();
      expect(component.onSelect).toHaveBeenCalledWith('en');
    });
  }));

更新

我认为这是要走的路摆脱异步和稳定

it('should emit on change', () => {
    component.languages = languages;
    fixture.detectChanges();
    spyOn(component.change, 'emit');
    const select = debugEl.query(By.css('select')).nativeElement;
    select.value = select.options[1].value;
    select.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    expect(component.change.emit).toHaveBeenCalled();
    expect(component.change.emit).toHaveBeenCalledWith('en');
  });

Answer 1

在发送 'change' 事件之前，您似乎没有更改选择值。

如果您尝试选择“en”选项，请尝试执行以下操作:

it('should show `Italiano English` as option', async(() => {
    component.languages = languages;
    fixture.whenStable().then(() => {
      spyOn(component, 'onSelect');
      const select = debugEl.query(By.css('select')).nativeElement;
      select.value = select.options[1].value;  // <-- select a new value
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onSelect).toHaveBeenCalled();
      expect(component.onSelect).toHaveBeenCalledWith('en');
    });
}));