In a component’s template, I’m using an <ion-range [(ngModel)]="value">, which works perfectly.
But my Karma test for that component fails in beta.10 (first version that offers <ion-range>)
The error the karma test fails with is:
FAILED TESTS:
pages/record:RecordPage
✖ initializes
PhantomJS 2.1.1 (Linux 0.0.0)
Failed: EXCEPTION: Error in build/pages/record/record.html:25:15
ORIGINAL EXCEPTION: No value accessor for ''
ERROR CONTEXT:
[object Object]
If I remove [(ngModel)]="value" from the <ion-range> in the template, the test passes fine and there is no error whatsoever. It’s only when I add the ngModel that the test begins to fail. I think the tests are missing some provider, I tried to add every possible provider to the test spec but it didn’t help. Has anybody seen similar issues with testing and ionic2 / angular2 in a typescript project?
Addition:
Just tried this by commenting the <ion-range> out completely. Of course, no error. Then I added another ngModel to the template, this time, just added this line
<ion-input type="text" [(ngModel)]="question" placeholder="Ask a question..."></ion-input>`
while also adding a question: string member to the component class. It works, yes. But the karma test barfs with the exact same error: No value accessor for '' pointing to the HTML line that has the <ion-input ... [(ngModel)] ...>.
It must be some provider I’m missing to give to the test. Does anybody know how to set up providers so that karma tests can proceed with ngModel components?
See also the discussion here (the lathonez clicker project that has set up testing, typescript and ionic2 together and has saved us so much time figuring out how to do unit testing in our ionic2 projects):
This problem only happened in the Karma testing part, not in the app itself. It only happened when we used an Ionic2 directive with an [(ngModel)] property (no karma error when the [(ngModel)] property was missing). The Karma error was: No value accessor for ‘’.
Solution, in short, as you’ve found out: add a directives: [Range] to your component (this problem of tests failing when this directives line is not included, only happens in page components, it seems).
This directives line is not necessary to run the app. The app runs just fine without it. It is needed only for the Karma tests not to barf and only when the directive has an [(ngModel)] property.
I get the exact same issue but with the Ionic Checkbox directive with ngModel. Works like a charm when the app’s running, but unit tests with Karma it throws that exact error - No value accessor for ‘’. I’ve already got the Checkbox listed in the directives array in the component annotation as well.
The first thing I noticed in your question is that your package.json uses @angular/-rc.3 instead of rc.4 together with ionic-angularbeta.11.
But if you look at the current starter apps or the ionic-conference-app, they use @angular/*-rc.4
Who knows, this may be the reason. It’s possible that keeping your package.json up to date would solve your problem. Don’t forget to npm install after you change your package.json.