mardi 20 avril 2021

How to test with Jasmine a checkbox that shows an html element

I'm pretty newbie on Angular test, and I think I have a stupid question, but despite a lot of tutorials and guides I can't find out a valid solution.

I have a checkbox that when it's checked it should show a div, and I want to test it with Jasmine. This is my HTML:

<div>
  Check this! <input #cb type="checkbox" (change)="1" id="checkboxToTest"/>

  <div id="divRevealed" *ngIf="cb.checked">Hello!</div>

</div>

And this is the code in spec file:

  it('should test checkbox', () => {
    const dElement = fixture.debugElement;
    const nElement = dElement.nativeElement;
    const checkBoxElement = nElement.querySelector('#checkboxToTest');
    const box = nElement.querySelector('#divRevealed');

    checkBoxElement.click();

    expect(checkBoxElement.checked);

    fixture.detectChanges();

    expect(box).toBeTruthy();
  });

Obviously the test passes without any problem if I remove the *ngIf statement in HTML...

But why it's not working?

Thanks for any help!




Aucun commentaire:

Enregistrer un commentaire