javascript - 如何测试 :before selector with Jasmine in an Angular 6 project? 的内容

Question

我有一个标签，其 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');
});

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