× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Testing Asynchronous Services in Ionic Framework Using Full Q Promises Library

Aaron Saunders
Sep 07, 2015
<p> </p> <p>Using the <strong>done()</strong> function, in your API, you have to call it everytime or else the test will timeout and fail</p> <pre><span style="color:#ffc66d">it</span>(<span style="color:#6a8759">'should login user'</span><span style="color:#cc7832">, </span><strong>function </strong>(done) { <span style="color:#9876aa">userService</span>.<span style="color:#ffc66d">logout</span>()<span style="color:#cc7832">; </span> <span style="color:#cc7832"> </span><span style="color:#9876aa">userService</span>.<span style="color:#ffc66d">login</span>(<span style="color:#6a8759">"a@mail.com"</span><span style="color:#cc7832">, </span><span style="color:#6a8759">"a"</span>).<span style="color:#ffc66d">then</span>(<strong>function </strong>(_resp) { (_resp.<span style="color:#ffc66d">attributes</span>.<span style="color:#9876aa">username</span>).should.<span style="color:#ffc66d">equal</span>(<span style="color:#6a8759">"a@mail.com"</span>)<span style="color:#cc7832">; done(); </span><span style="color:#cc7832"> </span>}, function(_error){   (_error.<span style="color:#9876aa">message</span>).should.<span style="color:#ffc66d">equal</span>(<strong>null</strong>)<span style="color:#cc7832">;   done();</span> })<span style="color:#cc7832">; </span>})<span style="color:#cc7832">;</span> </pre> <p>After some additional research, I was looking for a way to leverage the promises that my services are creating and returning. Since these test support promises, you don't need to use the <strong>done()</strong> function at all, just return the promise from the service call and all is well.</p> <pre><span style="color:#ffc66d">it</span>(<span style="color:#6a8759">'should login user'</span><span style="color:#cc7832">, </span><strong>function </strong>() { <span style="color:#9876aa">userService</span>.<span style="color:#ffc66d">logout</span>()<span style="color:#cc7832">;</span> <span style="color:#cc7832"> </span><strong>return </strong><span style="color:#9876aa">userService</span>.<span style="color:#ffc66d">login</span>(<span style="color:#6a8759">"a@mail.com"</span><span style="color:#cc7832">, </span><span style="color:#6a8759">"a"</span>).<span style="color:#ffc66d">then</span>(<strong>function </strong>(_resp) { (_resp.<span style="color:#ffc66d">attributes</span>.<span style="color:#9876aa">username</span>).should.<span style="color:#ffc66d">equal</span>(<span style="color:#6a8759">"a@mail.com"</span>)<span style="color:#cc7832">; </span><span style="color:#cc7832"> </span>})<span style="color:#cc7832">; </span>})<span style="color:#cc7832">;</span></pre> <p>The other tip is regarding using an alternative to the <a href="https://docs.angularjs.org/api/ng/service/%24q">lite version of the $q library</a> that is provided by default with angularjs, this library does not work properly when running test so you can override it with the complete <a href="https://github.com/kriskowal/q">$q library</a> when setting up your tests.</p> <p>First include install the<a href="https://github.com/kriskowal/q"> $q library</a><span style="color:rgb(95, 99, 102)"> </span>node module into your application</p> <pre>npm install q --save-dev</pre> <p>Then add the source file to your test configuration</p> <pre><span style="color:#808080">// list of files / patterns to load in the browser </span><span style="color:#9876aa">files</span>: [ <span style="color:#6a8759">'../../www/lib/ionic/js/ionic.bundle.js'</span><span style="color:#cc7832">, </span><span style="color:#cc7832"> </span><span style="color:#6a8759">'../../www/lib/angular-mocks/angular-mocks.js'</span><span style="color:#cc7832">,</span><span style="color:#cc7832"> </span><span style="color:#cc7832"> </span><span style="color:#6a8759">"../../www/lib/parse-1.3.5.min.js"</span><span style="color:#cc7832">,</span><span style="color:#cc7832"> </span><span style="color:#cc7832"> </span><span style="color:#6a8759">'../../www/js/**/*.js'</span><span style="color:#cc7832">,</span><span style="color:#cc7832"> </span><span style="color:#cc7832"> </span><span style="color:#6a8759">'../../node_modules/q/q.js'</span><span style="color:#cc7832">, // &lt;== INCLUDE Q LIBRARY </span><span style="color:#cc7832"> </span><span style="color:#6a8759">'../../tests/unit-tests/**/*.js' </span>]<span style="color:#cc7832">,</span></pre> <p>Then inject the library to replace the default <a href="https://docs.angularjs.org/api/ng/service/%24q">angularjs $q library</a></p> <pre><span style="color:#ffc66d">beforeEach</span>(<strong>function </strong>() { module(<strong>function </strong>($provide) { $provide.value(<span style="color:#6a8759">'$q'</span><span style="color:#cc7832">, </span>Q)<span style="color:#cc7832">;</span><span style="color:#cc7832"> </span><span style="color:#cc7832"> </span>})<span style="color:#cc7832">; </span>})<span style="color:#cc7832">;</span></pre>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus