角度 5 - 茉莉花/业力测试用例:按钮启用/禁用输入验证

Question

我对 Angular 及其测试框架 Jasmine 和 Karma 还是新手。

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

最初，表单为空，"创建新帐户"按钮被禁用，用户无法单击它来创建帐户。当用户在这三个文本字段中输入有效信息时，该按钮将被激活，以允许用户将请求发送到 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 = "[e-mail]";
// 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 语句会抛出错误，指出禁用的属性实际上是真的。

我确实环顾四周，看看是否有办法解决这个问题，包括像这样的其他StackOverflow问题。但不幸的是，我没有任何运气。

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

我应该怎么做？

Answer 1

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

与我一起工作的人审查了代码并指出了一些我不知道的事情：spyOn 函数只应在使用模拟对象隔离测试函数调用时使用。所以我把它注释掉了，测试用例可以按预期工作。

我认为发生的事情是我的组件对象，它附加到模板，是 actua