Javascript 无法在使用Jasmine和Angular的单元测试中获得选择按钮单击

大家好，我在这里使用Angular，并试图为被动形式创建一个单元测试，但未能成功

我所需要的：如何在表单中使用jasmine在angular中填充false和truthy值后执行按钮单击

我所做的：我创造了一个逻辑，但它不起作用

 it('Form check is valid or not if no values entered', () => {

    expect(component.userCreationForm.valid).toBeFalsy();
  });

  it('Form check is valid or not when values entered', () => {

    component.userCreationForm.controls['firstname'].setValue('luther');
    component.userCreationForm.controls['lastname'].setValue('adams');
    component.userCreationForm.controls['email'].setValue('test@gmail.com');
    component.userCreationForm.controls['password'].setValue('123456');
    expect(component.userCreationForm.valid).toBeTruthy();
  });

  it('Form Submitted should check from is submitted', () => {
    // check form is invalid
    expect(component.userCreationForm.invalid).toBeTruthy();
    let btn = fixture.debugElement.query(By.css('button[type=submit]'));
    // Check button is disabled
    expect(btn.nativeElement.disabled).toBeTruthy();
    component.userCreationForm.controls['firstname'].setValue('luther');
    component.userCreationForm.controls['lastname'].setValue('adams');
    component.userCreationForm.controls['email'].setValue('test@gmail.com');
    component.userCreationForm.controls['password'].setValue('testpassword');
    fixture.detectChanges();
    // check button is enabled
    expect(btn.nativeElement.disabled).toBeFalsy();

    component.onUserCreation();
    fixture.detectChanges();

    let success = fixture.debugElement.query(By.css('#success-msg')).nativeElement;
    expect(success.textContent).toBe('Bubba');

 });

html逻辑

<div class="inv-buttons">
          <button mat-raised-button color="primary" [disabled]="userCreationForm.invalid" type="submit">Create User</button>
        </div>

---

下面是我的stackblitz:

你想在哪里单击你创建的btn。使用方法如下：-

 btn.nativeElement.click();

我在下面更改了您的测试用例：-

it('Form Submitted should check from is submitted',async () => {
    // check form is invalid
    expect(component.userCreationForm.invalid).toBeTruthy();
    let btn = fixture.debugElement.query(By.css('button[type=submit]'));
    // Check button is disabled
    expect(btn.nativeElement.disabled).toBeTruthy();
    component.userCreationForm.controls['firstname'].setValue('luther');
    component.userCreationForm.controls['lastname'].setValue('adams');
    component.userCreationForm.controls['email'].setValue('test@gmail.com');
    component.userCreationForm.controls['password'].setValue('testpassword');
    fixture.detectChanges();
    // check button is enabled
    expect(btn.nativeElement.disabled).toBeFalsy();
    await fixture.whenStable();
    console.clear();
    btn.nativeElement.click();
    fixture.detectChanges();
    //component.onUserCreation();
    //fixture.detectChanges();

    //let success = fixture.debugElement.query(By.css('#success-msg')).nativeElement;
    //expect(success.textContent).toBe('Bubba');

 });

---

好吧，如果我理解正确的话，你不会在任何地方给click打电话。您只需检查按钮的启用/禁用状态。尝试btn。如果已启用，请在检查后单击。@dallows您能指给我看吗？添加btn。单击expectbtn.nativeElement.disabled.toBeFalsy下面的按钮；将错误获取为类型“DebugElement”上不存在属性“click”，请尝试以下方法：