Angular 角度测试与NGM模型
我正在用Angular编写我的第一个组件测试,我有一些困难使ngModel绑定工作。 以下是我的测试模块定义:Angular 角度测试与NGM模型,angular,testing,ngmodel,Angular,Testing,Ngmodel,我正在用Angular编写我的第一个组件测试,我有一些困难使ngModel绑定工作。 以下是我的测试模块定义: beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ LdapLoginComponent, ], imports: [ CommonModule, FormsModule, No
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
LdapLoginComponent,
],
imports: [
CommonModule,
FormsModule,
NoopAnimationsModule,
MatInputModule,
MatFormFieldModule,
RouterTestingModule,
],
providers: [
{
provide: AuthorizationService,
useValue: { login() {} },
},
]
}).compileComponents();
}));
下面是我的测试用例:
it('should bind form fields with class', fakeAsync(() => {
// Given
const username = 'username';
const password = 'password';
const usernameField = de.query(By.css('input[name=username]')).nativeElement;
const passwordField = de.query(By.css('input[name=password]')).nativeElement;
// When
usernameField.value = username;
passwordField.value = password;
usernameField.dispatchEvent(new Event('input'));
passwordField.dispatchEvent(new Event('input'));
tick();
fixture.detectChanges();
// Then
expect(comp.username).toEqual(username);
expect(comp.password).toEqual(password);
}));
我的组件类:
export class LdapLoginComponent {
username: string;
password: string;
errorMessage: string;
submitDisabled = false;
constructor(
private authorizationService: AuthorizationService,
private router: Router,
) {
}
login(): void {
delete this.errorMessage;
this.submitDisabled = true;
this.authorizationService.login(AuthorizationProvider.LDAP, this.username, this.password)
.subscribe(
() => {
this.router.navigate(['/']);
},
(err: Error) => {
this.errorMessage = err.message;
this.submitDisabled = false;
},
);
}
}
和我的组件模板:
<form class="form-container" (submit)="login()">
<mat-form-field color="warn">
<input
matInput
type="text"
name="username"
placeholder="Insert your username"
[(ngModel)]="username"
required
i18n-placeholder="@@input.placeholder.username">
</mat-form-field>
<mat-form-field color="warn">
<input
matInput
type="password"
name="password"
placeholder="Insert your password"
[(ngModel)]="password"
required
i18n-placeholder="@@input.placeholder.password">
</mat-form-field>
<button
mat-raised-button
type="submit"
color="warn"
[disabled]="submitDisabled"
i18n="@@input.submit">Submit</button>
</form>
<article>{{errorMessage}}</article>
提交
{{errorMessage}}
我正在更改测试中用户名和密码字段的值,我希望类的用户名和密码字段会相应地更新。如果我在浏览器中手动测试,但在测试中没有,那么一切都可以正常工作
有什么想法吗
谢谢。问题在于,在调用dispatchEvent之前,您没有实际设置输入字段的值。您可以直接设置组件属性
comp.username = username;
usernameField.dispatchEvent(new Event('input'));
应该是
let usernameFieldElement = usernameField.nativeElement;
usernameFieldElement.value = username;
usernameField.dispatchEvent(new Event('input'));
密码也一样
另一件事是您正在同时测试三件事,将文本输入到输入区域,单击按钮运行登录和登录功能本身。我建议将其分为三种主张
这样,如果出现问题,您将能够更轻松地找到它。对于mat输入字段,我们需要在更改输入之前进行聚焦()
it('should bind form fields with class', fakeAsync(() => {
// Given
const username = 'username';
const password = 'password';
const usernameField = de.query(By.css('input[name=username]')).nativeElement;
const passwordField = de.query(By.css('input[name=password]')).nativeElement;
usernameField.focus();
passwordField.focus();
// When
usernameField.value = username;
passwordField.value = password;
usernameField.dispatchEvent(new Event('input'));
passwordField.dispatchEvent(new Event('input'));
tick();
fixture.detectChanges();
// Then
expect(comp.username).toEqual(username);
expect(comp.password).toEqual(password);
}));
代码中有一个输入错误,你是对的。是的,我完全同意你的观点,我应该分开测试。我用新代码更新了我的帖子,但仍然存在相同的绑定问题:-(