Expected true to equal false

Question

I want to test something in angular that really is not in teh Anguar tutorial.

I am trying to test that when the value of this input is invalid teh error message is outputted, so the hidden atributte is false in the case of putting a wor with more than 20 haracters.

  <input #cardInput type="text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria"
	                [(ngModel)]="paciente.tarjetaSanitaria" maxlength="20"/>
	            <div [hidden]="!(editForm.controls.tarjetaSanitaria?.dirty && editForm.controls.tarjetaSanitaria?.invalid)">
	                <small class="form-text text-danger"  id="ref"
	                   [hidden]="!editForm.controls.tarjetaSanitaria?.errors?.maxlength"  translateValues="{ max: 20 }">
	                   This field cannot be longer than 20 characters.
	                </small>

My component has this:

 paciente: Paciente = {tarjetaSanitaria: 'ddd'} as Paciente;

And my test:

       fit ('Blank input is not valid', async(() => {
               
                comp.paciente.tarjetaSanitaria = 'ddddddddddddddddddddddddddddddddddddddddddd' ;
                spyOn(comp, 'save');
              var1 = comp.submitButton.nativeElement;
              var1.click();
              fixture.detectChanges();
              expect(comp.save).toHaveBeenCalledTimes(1);
expect(fixture.debugElement.query(By.css('#ref')).nativeElement.hasAttribute('hidden')).toEqual(false);

                })); 

It always fails saying Expected true to qual false.IF I remove fixture.detectChanges it aways passes. Have I done something wrong?

Answer 1

The expression

 fixture.debugElement.query(By.css('#ref')).nativeElement.hasAttribute('hidden')

reads as if it's testing if the #ref element has an attribute named hidden. If so, the result is unlikely to depend on the value of the attribute.

If the nativeElement property is an HTMLElement in the DOM which always has a 'hidden' attribute, you should be able to get its value using

fixture.debugElement.query(By.css('#ref')).nativeElement.getAttribute('hidden')

However I have no way of conveniently verifying the data type of the attribute. If it is a string you should expect its value to be the string "false". If it is a boolean you probably need to expect its value to be the boolean value false.

If you don't know the data type of the "hidden" attribute already, or how true and false are stored in the attribute, add some debugging code to establish the data type before proceeding further. Good luck!