为Mat-button [color]的数据绑定属性写一个单元测试

Question

我正在尝试为HTML元素Mat-button的数据绑定属性编写单元测试。

代码如下:

<div fxLayout="row">
<button data-testid="group-button" mat-raised-button *ngFor="let role of user.groups"
[color]="role == 'ADMIN' ? 'warn' : 'primary'">{{role}}</button>
</div>

我需要为[color]属性写一个单元测试，以检查当角色是'ADMIN'时颜色是主要的

我尝试了这个到目前为止使用调试元素:

我在嘲笑用户。组为["ADMIN", "FOO", "BAR"]

it('should change button color based on user groups', () => {
const groups = fixture.debugElement.queryAll(By.css('[data-testid="group-button"]'));
expect(groups[0].nativeElement.getProperty('color')).toBe('Primary'); // Fail
expect(groups[0].nativeElement.getAttribute('color')).toBe('Primary'); // Fail
//expect(groups[0].nativeElement.textContent).toBe('ADMIN')
}

Answer 1

我终于找到解决问题的办法了。

color属性在浏览器中被转换为ng-reflect-color，所以测试没有找到该属性。下面的测试成功了:

it('should change button color based on user groups', () => {
const groups = fixture.debugElement.queryAll(By.css('[data-testid="group-button"]'));
expect(groups[0].nativeElement.getAttribute('ng-reflect-color')).toBe('warn'); // Pass
expect(groups[1].nativeElement.getAttribute('ng-reflect-color')).toBe('primary'); // Pass
}