javascript - Angular Material 2 - Utløse endringshendelse i md-checkbox i en enhetstest

Jeg har problemer med å utløse en 'change'-hendelse for en md-checkbox i en Angular enhetstest, ved bruk av testoppsettet som er levert av Angular CLI.

Jeg har en enkel komponent:

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;
  }
}

mal :

<md-checkbox [checked]="true" [(ngModel)]="checkedValue" (change)="checkValueChange($event)">Check Box</md-checkbox>

Og her er enhetstestkoden der jeg prøver å få endringshendelsen til å utløses - via et simulert klikk:

testkode:

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

Så kanskje det å prøve å få endringshendelsen til å utløses via et klikk er feil? Noen som har noen ideer?

Takk.

Svar #1

Håndtaket er ikke i md-checkboxen, men i etikettelementet dens

de = fixture.debugElement.query(By.css('md-checkbox label'));
el = de.nativeElement;
el.click();

bør gjøre susen

Du kan også importere kun MdCheckboxModule i stedet for MaterialModule.

Relaterte artikler