Тест работает, потому что он основан на ложных значениях.
Попробуйте использовать это:
expect(comp.cardInput.nativeElement.valid).toEqual(false);
expect(comp.cardInput.nativeElement.invalid).toEqual(true);
expect(comp.cardInput.nativeElement.invalid).toBeTruthy();
Ни один из них не будет работать.
Почему это так?
comp.cardInput.nativeElement
означает HTMLElement
.Он содержит такие свойства, как className
, onclick
, querySelector
и т. Д.
valid
, с другой стороны, не является частью стандарта HTML: это концепция Angular.
Это означает, что когда вы пишете
expect(comp.cardInput.nativeElement.valid).toBeFalsy()
, выводится
expect(undefined).toBeFalsy()
Что верно, потому что undefined - это ложь.
Правильный способ проверить это - проверить, содержит ли элемент специальный класс Angular, ng-invalid
(или проверить, что он не содержит ng-valid
).
Прежде чем дать код, я бы посоветовал вам перейти к реактивным формам, они гораздо более мощные и простые в тестировании.
Но в любом случае, вот как вы можете это сделать.
it('should be invalid given a value of over 20 chars', () => {
// NEVER use the nativeElement to set values. It's bad practice.
component.paciente.tarjetaSanitaria = 'dddddddddddddddddddddddddd';
// Detect changes, it's not automatic
fixture.detectChanges();
// Test (bad practice)
expect(component.cardInput.nativeElement.className.includes('ng-invalid').toEqual(true);
// Test (good practice)
expect(fixture.nativeElement.querySelector('input[name="tarjetaSanitaria"]').className.includes('ng-invalid')).toEqual(true);
});