Javascript 在测试中未设置正确的表单验证类

在单元测试环境中应用验证类似乎存在问题。我所说的验证类是指

ng有效

和

ng无效

。我使用的角度版本是

8.2.14

让我们以该组件为例：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <form ngForm>
    <input type="text" required name="firstName" [(ngModel)]="firstName"/>
    <button type="submit">Submit</button>
  </form>
  `
})
export class AppComponent {
  firstName = '';
}

记录的元素将具有类名：

ng未触及ng原始ng有效

。我希望输入在测试浏览器中无效，就像在没有测试配置的情况下呈现一样

我的问题是，为什么在验证类中存在这样的差异，以及如何在测试环境中实现正确的验证

---

提前谢谢

我认为您需要使

it

spec异步，因为它里面有一些异步代码

此外，您还需要使用

fixture.autoDetectChanges（）

或在

稳定时运行
fixture.detectChanges（）

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should apply the correct validation classes', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();

    fixture.detectChanges();

    fixture.whenStable().then(() => {
      console.log(fixture.nativeElement.querySelector('input'));
    });
  });
});