Angular6测试：按钮没有被'By.css'调用捕获

Question

我有一个下面的HTML，我想测试提交按钮事件。我添加了一个id，类名等，并尝试运行。它仍然失败。

 <div *ngIf = 'reportParams' style="width:90%">
  <form (ngSubmit)="onSubmit()" [formGroup]="form"  target="_blank"  method="POST" > 
    <div align ="center">
      <span>
            <button mat-raised-button formControlName = "submitButtonControl" class="submitButtonControl"
            name="submitButtonControl" id = 'submitButtonControl' ngDefaultControl [disabled]="!form.valid" type = 'Submit' color='primary'  >
              {{generateButton}}
            </button>&nbsp;&nbsp;&nbsp;
        <button mat-raised-button (click)="resetButtonClick()" type="reset"  >
          Reset
        </button>
      </span>
    </div>
  </form>
</div>

下面是我试图捕获事件的规范，但返回null。

describe('ReportingFormComponent', () => {
  let component: ReportingFormComponent;
  let fixture: ComponentFixture<ReportingFormComponent>;
  let debugElement: DebugElement;
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [ReportingFormComponent],
    });
    fixture = TestBed.createComponent(ReportingFormComponent);
    component = fixture.componentInstance;
  describe('onSubmit', () => {
    it('makes expected calls', () => {
      const value = {}

    let submitButton = 
      fixture.debugElement.query(By.css('#submitButtonControl')); 
      console.log(submitButton);    //capturing null
    });
  });
});

我在fixture.debugElement.query(By.css('#submitButtonControl'));电话中遗漏了什么。我见过的所有例子都使用相同的例子。我错过了什么？

Answer 1

设置测试床后，检测更改：

beforeEach(async(() => {

TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [ReportingFormComponent],
    }).compileComponents();
}));

beforeEach(() => {    
        fixture = TestBed.createComponent(ReportingFormComponent);
        component = fixture.componentInstance;
        fixture.detectChanges(); // this is what you need
    });