如何在Protractor中编写检查css类的预期条件？

Question

我有一个id ='public1'的按钮。当我点击那个元素时，类状态从ng-pristine变为ng-dirty：

<input id="public1" class="tile-checkbox ng-valid ng-dirty> Some Text</input>

如何编写expect（）条件来检查特定类的布尔表达式？  这样我可以说：如果单击id为'public1'的输入（例如），则期望类ng-dirty为true且ng-pristine为false /

Answer 1

我会使用toHaveClass() matcher：

var elm = element(by.id("public1"));
expect(elm).toHaveClass("ng-pristine");

elm.click();
expect(elm).toHaveClass("ng-dirty");

Answer 2

这样的东西（使用ES6函数.includes（）），如果你不想在jasmine中添加其他匹配器：

let input = $('#public1');
expect(input.getAttribute('class').then(classes => classes.includes('ng-pristine') && !classes.includes('ng-dirty')).toBeTruthy('Should have "ng-pristine" class ');
input.click();
expect(input.getAttribute('class').then(classes => !classes.includes('ng-pristine') && classes.includes('ng-dirty')).toBeTruthy('Should have "ng-dirty" class after click');