Looking to test whether the content of a label changes based on the checkbox being checked using Jasmine in an Angular 6 project. Is this feasible?
Code snippet:
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 Unit Test
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');
});