1

Inside of one the component of my angular (4) application, I have a template with an checkbox input in it, with the disabled attribute bind to a variable :

<input type="checkbox" name="test" [disabled]=isDisabled">

This input has the behavior we wouls expect : if the "isDisabled" variable is true, the checkbox is disabled and the oppposite.

But, when I try to test this behavior, I always get the disabled attribute of my input to false. So this test is always false (checkbox() sending my checkbox): 

expect(checkbox().disabled).toBeTruthy();

The only way I can check is to verify the attribute "ng-reflect-is-disabled". Like this : 

expect(checkbox().getAttribute('ng-reflect-is-disabled').toBeTruthy();

It works, but I find it quite ugly.

I wonder if this is a normal behavior when the disabled attribute is managed by angular ? Thank you !

Orodan
  • 1,047
  • 2
  • 13
  • 24
  • Change to [disabled]="isDisabled" to test – Vega Aug 18 '17 at 15:29
  • Does not change a thing. "disabled" or "isDisabled" is just a name given to the variable checked to disable the input or not. – Orodan Aug 21 '17 at 07:48
  • I meant that disabled should be a reserved word, try to rename it. But I am dubitative that it will work – Vega Aug 21 '17 at 07:51
  • Yeah true, I upadted the post, but it does not change the problem, I still can't check the "disabled" attribute ^^' – Orodan Aug 21 '17 at 08:32
  • You are testing angular functionality. I think it is enough to test if `isDisabled` has the desired value. If the element is actually disabled is something angular has to take care of, not you. Therefore it is something that is already covered somewhere in the angular tests – Marv Aug 21 '17 at 08:36
  • Hum I get why you say that, but here my intent is to test the behavior of my component. My test is here to make sure that is some situation, my component does not allow the user to write something, independently of how angular works. That's why I'm bothered that I can't just checked the "disabled" attribute. – Orodan Aug 21 '17 at 08:47
  • I think you can rely on angular to disable it properly when providing a correct value through `isDisabled` – Marv Aug 21 '17 at 08:55
  • 1
    Yeah for sure ^^ but i want to test first: that I correctly binded the disabled attribute to my variable ; second : I correctly change the value of my variable. I just found it strange that I can' t simply checked "disabled". – Orodan Aug 21 '17 at 09:15
  • You do not have to test if you bound it correctly, that is something you can see when launching the application in your browser. You do not want to test for syntax errors. You are testing if your component works as intended. – Marv Aug 21 '17 at 09:33
  • It looks like we do not have the same opinion about what the unit tests should be used for, and here is not the place to debate about it. In my opinion I'm just testing one of my component functionality, and when component testing, I believe you should test the state of your variables but also what's rendered in your view. Indeed, if there is a problem with my view, it might come from a syntax error for example, but it still an error I would like my tests to tell me about :) – Orodan Aug 21 '17 at 09:59
  • You can check here some solutions https://stackoverflow.com/questions/37159827/is-there-any-alternative-for-ng-disabled-in-angular2 Hope it helps – Cassius Horvath Jan 30 '19 at 17:09

0 Answers0