Question

我仍然对Angular及其测试框架Jasmine和Karma还是陌生的。

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

最初，该表单为空，并且“创建新帐户”按钮被禁用，用户无法点击该按钮来创建帐户。当用户在这三个文本字段中输入有效信息时，将激活按钮，以使用户将请求发送到Trello的后端以注册帐户。

例如，假设我是Trello的一名开发人员，他想测试这种情况，即当用户填写正确的信息时启用按钮，并使用Jasmine和Karma将Angular 5组件用作我的组件。布局，功能和外观。我要解决的问题是将“创建新帐户”按钮的状态更改为启用的时间，因为从本质上来说，我正在测试以确保在正确填写表格后，该按钮被激活，并且。 toBeFalsy（）断言通过。

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

// 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();
    });
  });

});

但是，这是行不通的，因为then函数调用主体中的两个Expect语句会抛出错误，表明Disabled属性实际上是正确的。

我确实环顾四周，以找出是否有解决此问题的方法，包括其他StackOverflow问题like this one。但不幸的是，我没有任何运气。

我最初的猜测是，whenStable（）函数和then函数调用的主体是异步执行的，但是我很确定我对此是错误的。

我该怎么办？

Answer 1

显然，我是一只傻大熊。

我正在与他人合作的人检查了代码并指出了我不知道的内容：在使用模拟对象单独测试函数调用时，仅使用spyOn函数强>。因此，我对此进行了注释，并且测试用例按预期工作。

我认为附在模板上的组件对象是致动的

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

1 个答案: