Angular Material 2 - 在单元测试的 md-checkbox 中触发更改事件 [英] Angular Material 2 - Trigger change event in md-checkbox in a Unit Test
问题描述
我在使用 Angular CLI 提供的测试框架设置为 Angular 单元测试中的 md-checkbox 触发更改"事件时遇到问题.
I am having problems triggering a 'change' event for a md-checkbox in an Angular Unit Test, using the test framework setup provided by the Angular CLI.
我有一个简单的组件:
ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
checkedValue = 'false';
result = false;
checkValueChange(event) {
console.log('CheckBox clicked: ' + event.checked);
this.result = true;
}
}
模板:
<md-checkbox [checked]="true" [(ngModel)]="checkedValue" (change)="checkValueChange($event)">Check Box</md-checkbox>
这是我试图通过模拟点击触发更改事件的单元测试代码:
And here is the unit test code I am trying to cause the change event to be emitted - via a simulated click:
测试代码:
import {TestBed, async, fakeAsync} from '@angular/core/testing';
import { AppComponent } from './app.component';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MaterialModule} from '@angular/material';
import {FormsModule} from '@angular/forms';
import {tick} from '@angular/core/testing';
let de: DebugElement;
let el: HTMLElement;
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [MaterialModule, FormsModule]
}).compileComponents();
}));
it('should create the app', fakeAsync(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
de = fixture.debugElement.query(By.css('md-checkbox'));
el = de.nativeElement;
// Neither click appears to trigger the change event to occur, or update the model
de.triggerEventHandler('click', {});
el.click();
tick(100);
expect(app.result).toBe(true);
}));
});
所以也许试图通过点击触发更改事件是不正确的?有人有什么想法吗?
So maybe trying to get the change event to trigger via a click is incorrect? Anyone got any ideas?
谢谢.
推荐答案
句柄不在 md-checkbox 中,而是在它的标签元素中
The handle is not in the md-checkbox but in its label element
de = fixture.debugElement.query(By.css('md-checkbox label'));
el = de.nativeElement;
el.click();
应该做的伎俩
您也可以只导入 MdCheckboxModule 而不是 MaterialModule.
You can also import only MdCheckboxModule instead of MaterialModule.
这篇关于Angular Material 2 - 在单元测试的 md-checkbox 中触发更改事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!