Angular 5-Jasmine/Karma测试用例：通过输入验证启用/禁用按钮

我对Angular及其测试框架Jasmine和Karma仍然是新手

我一直在测试一个按钮，以确保当用户输入正确的信息时，它总是处于启用状态；主要是在表单组验证控件激活按钮之前过早调用.toBeFalsy（）现在，出于保密原因，我无法分享我的代码，也无法完整描述问题，但我可以给出的一个公开示例是Trello的注册页面

最初，表单是空的，“创建新帐户”按钮被禁用，用户不能点击它来创建帐户。当用户在这三个文本字段中输入有效信息时，该按钮被激活，以允许用户向Trello的后端发送注册帐户的请求

比如说，我是Trello的一名开发人员，他想测试这个案例，当用户填写正确的信息时，按钮就会被启用，使用Jasmine和Karma以及Angular 5组件作为我的布局、功能和外观组件。我要解决的问题是“createnewaccount”按钮的状态被更改为enable的时间，因为本质上我正在测试以确保在正确填写表单时，该按钮被激活，.toBeFalsy（）断言通过

我在create-account.component.spec.ts中为该测试用例编写的代码以及包含该用例的测试套件如下所示。（假设持有Trello帐户页面MVC的组件称为CreateAccountComponent，并且该组件的所有属性都在create account.component.ts中声明）

//导入测试所需的所有组件。
//对于这种情况，有些是多余的，但是对于测试整个前端页面还是有用的。
从“@angular/core/testing”导入{async，ComponentFixture，TestBed，getTestBed}；
从“./create account.component”导入{CreateAccountComponent}；
从'@angular/forms'导入{Validators，AbstractControl，ValidatorFn，Validator，FormsModule，FormGroup，FormControl，ReactiveFormsModule}；
从“@angular/common/HTTP”导入{HttpHeaders、HttpRequest、HttpResponse、HttpInterceptor、HTTP_INTERCEPTORS、HttpClient、HttpErrorResponse、HttpClientModule}；
从“@angular/Router”导入{Router}”；
从“@angular/router/testing”导入{RouterTestingModule}；
从“@angular/platform browser”导入{By}”
描述（'Trello创建帐户'，（）=>{
//测试单元字段
让createAccountPageComponent:CreateAccountComponent；
让createAccountPage:ComponentFixture；
让组件的根元素：任意；
让根\u调试\u组件的\u元素\u:any；
//创建并设置测试模块。
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[CreateAccountComponent]，
导入：[ReactiveFormsModule、HttpClientModule、RouterTestingModule]
})
.compileComponents（）；
}));
//在每个测试用例之前，根据需要初始化套件字段。
在每个之前（（）=>{
createAccountPage=TestBed.createComponent（CreateAccountComponent）；
createAccountPageComponent=createAccountPage.componentInstance；
createAccountPage.detectChanges（）；
rootElementOfComponent=createAccountPage.nativeElement；
rootDebugElementOfComponent=createAccountPage.debugElement；
});
它（'在表单字段有效时应具有创建新帐户，（）=>{
//当密码、电子邮件地址的值
//和改名。
spyOn（CreateCountPageComponent，'updateCreateNewAccount'）；
//模拟用户输入其全名。
RootDebuggementOfComponent查询（By.css（“#fullNameField”）.nativeElement.dispatchEvent（新事件（'input'））；
createAccountPageComponent.createAccountPageForm.get（'fullName'）.MarkaTouched（）；
createAccountPageComponent.accountFullName=“匿名人士”；
//模拟用户输入其电子邮件地址。
RootDebuggementOfComponent查询（By.css（'#emailAddressField'））.nativeElement.dispatchEvent（新事件（'input'））；
createAccountPageComponent.createAccountPageForm.get（'emailAddress'）.MarkaTouched（）；
createAccountPageComponent accountEmailAddress=”anonymous@person.com";
//模拟用户输入密码。
RootDebuggementOfComponent查询（By.css（'#passwordField'））.nativeElement.dispatchEvent（新事件（'input'））；
createAccountPageComponent.createAccountPageForm.get（'password'）.MarkaTouched（）；
createAccountPageComponent.accountPassword=“匿名”；
//更新“新帐户”按钮，并获得更改的屏幕截图跟踪。
createAccountPageComponent.updateNewAccountButton（）；
createAccountPage.detectChanges（）；
//检测到更改后，测试“创建新帐户”按钮是否已启用。
createAccountPage.whenStable（）。然后（（）=>{
expect（rootElementOfComponent.querySelector（'#createNewAccountButton'）.disabled）.toBeFalsy（）；
expect（rootDebuggementOfcomponent.query（By.css（'#createNewAccountButtonButton'））.nativeElement.disabled.toBeFalsy（）；
});
});
});

但是，这不起作用，因为then函数调用主体中的两个expect语句抛出错误，表示disabled属性实际上为true

我环顾四周，想知道是否有办法解决这个问题，包括其他问题。但不幸的是，我没有任何运气

我最初的猜测是whenStable（）函数和then函数调用的主体是异步执行的，但我很确定我在这一点上是错的

---

我该怎么办？

显然，我是一只愚蠢的老熊

和我一起工作的人审阅了代码并指出

// Import all the required components for the test.
// Some are redundant for this case, but are useful for testing the whole frontend page anyway.
import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';
import { CreateAccountComponent } from './create-account.component';
import { Validators, AbstractControl, ValidatorFn, Validator, FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpHeaders, HttpRequest, HttpResponse, HttpInterceptor, HTTP_INTERCEPTORS, HttpClient, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
import { Router } from "@angular/router";
import { RouterTestingModule } from '@angular/router/testing';
import { By } from '@angular/platform-browser'

describe(‘Trello Create Account’, () => {

  // Test unit fields
  let createAccountPageComponent: CreateAccountComponent;
  let createAccountPage: ComponentFixture< CreateAccountComponent >;
  let rootElementOfComponent: any;
  let root_Debug_Element_Of_Component: any;

  // Create and set up the testing module.
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [CreateAccountComponent],
      imports: [ ReactiveFormsModule , HttpClientModule, RouterTestingModule ]
    })
    .compileComponents();
  }));

  // Before each test case, initialize the suite fields as needed.
  beforeEach(() => {
    createAccountPage = TestBed.createComponent(CreateAccountComponent);
    createAccountPageComponent = createAccountPage.componentInstance;
    createAccountPage.detectChanges();
    rootElementOfComponent = createAccountPage.nativeElement;
    rootDebugElementOfComponent = createAccountPage.debugElement;
  });

  it('should have the Create New Account when the form fields are valid, () => {
    // Watch for the ngModelChange function call when the value of the password, e-mail address
    // and name change.
    spyOn(createAccountPageComponent, 'updateCreateNewAccount');

    // Simulate the user entering their full name.
    rootDebugElementOfComponent query(By.css('#fullNameField')).nativeElement.dispatchEvent(new Event('input'));
    createAccountPageComponent.createAccountPageForm.get(‘fullName').markAsTouched();
    createAccountPageComponent.accountFullName= "Anonymous Person";

    // Simulate the user entering their e-mail address.
    rootDebugElementOfComponent query(By.css('#emailAddressField')).nativeElement.dispatchEvent(new Event('input'));
    createAccountPageComponent.createAccountPageForm.get(‘emailAddress').markAsTouched();
    createAccountPageComponent accountEmailAddress = "anonymous@person.com";

    // Simulate the user entering a password.
    rootDebugElementOfComponent query(By.css('#passwordField')).nativeElement.dispatchEvent(new Event('input'));
    createAccountPageComponent.createAccountPageForm.get(‘password’).markAsTouched();
    createAccountPageComponent.accountPassword = "anonymous";


    // Update the new account button and have the screenshot track for changes.
    createAccountPageComponent.updateNewAccountButton();
    createAccountPage.detectChanges();

    // Once the changes are detected, test to see if the 'Create New Account' button is enabled.
    createAccountPage.whenStable().then(() => {
      expect(rootElementOfComponent.querySelector('#createNewAccountButton').disabled).toBeFalsy();
      expect(rootDebugElementOfComponent.query(By.css('#createNewAccountButtonButton')).nativeElement.disabled).toBeFalsy();
    });
  });

});