代码之家 › 专栏 › 技术社区 › J-man

在Angular6项目中,如何使用Jasmine在选择器之前测试:的内容?

karma-jasmine jasmine angular css javascript

J-man · 技术社区 · 6 年前

我有个标签 content 正在设置 :before 选择器将更改标签的内容属性,具体取决于是否选中与此标签关联的复选框。这可以用茉莉在我的角6项目?

这是我的代码:

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

1 回复 | 直到 6 年前

J-man 6 年前

找到了一种方法 :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');
});

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前