Expected true to equal false

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?