Question

我有一个在content选择器中设置了:before的标签，并且根据是否选中了与此标签关联的复选框，它将更改标签的content属性。。是否可以在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';
}

茉莉花单元测试

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

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

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

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

1 个答案: