如何在 Angular 6 项目中使用 Jasmine 测试 :before 选择器的内容？答案

【问题标题】：How can I test content of :before selector with Jasmine in an Angular 6 project?如何在 Angular 6 项目中使用 Jasmine 测试 :before 选择器的内容？
【发布时间】：2018-07-26 00:14:34
【问题描述】：

我有一个标签，其content 正在:before 选择器中设置，并且根据是否选中与此标签关联的复选框，将更改标签的内容属性。这是否可以在我的 Angular 6 项目中使用 Jasmine 进行测试？

这是我的代码：

HTML

<input id="myCheck" class="checkbox" type="checkbox" />
<label for="myCheck" class="label"></label>

CSS

.label{
    color: black;
    font-size: 14px;
}
.label:before{
    content: 'NOT Checked';
}

.checkbox {
    display: none;
}
.checkbox:checked + label:before {
    content: 'Checked';
}

Jasmine 单元测试

it('should say "Checked" when checkbox is checked and "NOT Checked" when not checked', () => {
    const check = el.query(By.css('#myCheck')).nativeElement;
    expect(el.query(By.css('#myCheck + label:before'))).toBe('NOT Checked');

    check.click();
    fixture.detectChanges();

    expect(el.query(By.css('#myCheck + label:before'))).toBe('Checked');
});

【问题讨论】：

标签： javascript css angular jasmine karma-jasmine

【解决方案1】：

找到了一种使用window 对象和getComputedStyle 获取:before 选择器的方法：

it('should say "Checked" when checkbox is checked and "NOT Checked" when not checked', () => {
    const check = el.query(By.css('#myCheck')).nativeElement;
    let content = window.getComputedStyle('.label')).nativeElement, ':before').getPropertyValue('content');
    expect(content).toBe('NOT Checked');

    check.click();
    fixture.detectChanges();
    content = window.getComputedStyle('.label')).nativeElement, ':before').getPropertyValue('content');
    expect(content).toBe('Checked');
});

【讨论】：