从 HTML DOM 元素获取切换组件的值

Question

我有一个简单的组件，它由一个切换开关和一些其他元素组成：

<mat-slide-toggle (change)="toggle($event)" [checked]="false" attX="test"> ... </mat-slide-toggle>
<p> ... </p>

为了测试，我希望能够从 DOM 中知道切换开关是打开还是关闭。为此，我创建了 nativeElement 并将其用于我的测试。一切都按预期工作，但我不确定如何使用toggleButtonElement 变量获取我的切换值（true/false）。

let toggleButtonElement = fixture.nativeElement.querySelector('my-container').querySelector('mat-slide-toggle') as HTMLElement;

toggleElement.getAttribute('attX') //returns 'test' :)
toggleElement.getAttribute('checked') //returns null :(

我对 Angular/Jasmine 还是很陌生，所以如果我遗漏了一些明显的东西，请原谅我。

Answer 1

您需要对expect 进行单元测试以判断其为真或假。

试试这个：

let toggleButtonElement = fixture.debugElement.query(
      By.css('my-container mat-slide-toggle')
    ).nativeElement;

    expect(toggleButtonElement.checked).toBeFalsy(); // default state
    toggleButtonElement.click();
    fixture.detectChanges();
    expect(toggleButtonElement.checked).toBeTruthy(); // state after click

希望这会有所帮助。