Testing Directives with templateUrl

[Matt....@powerdms.com]

So I am trying to test a directive and I have come across a problem where using a templateUrl. When it makes the request for the template file I can't seem to just let that request pass through. Here is a simplified version of my test http://pastebin.com/ACvJqmD6

The odd part is if I replace 

$httpBackend.whenGET('Templates/my-directive.html').passThrough(); 

 

with 

$httpBackend.whenGET('Templates/my-directive.html').respond('<div>template text</div>');

then the test runs and passes. I feel like I am doing something weird but I can't figure it out.

Thanks! 

[Pawel Kozlowski]

Hi Matt!

Under unit tests (when including angular-mocks) you will get
automatically a fake implementation of the $httpBackend from the
ngMock module:
http://docs.angularjs.org/api/ngMock.$httpBackend

This is really a mock implementation that has certain methods only. If
you inspect closely the whenGET method description you will see that
it returns:
{requestHandler} – Returns an object with respond method that control
how a matched request is handled.
so there is no passThrough() method defined on the requestHandler and
for a good reason!

The thing is that you definitively _don't_ want to hit a real http
back-end in unit tests. This would make them slow and unnecessarily
complex. Having templates as string is the good thing, I mean your
approach is correct:

$httpBackend.whenGET('Templates/my-directive.html').respond('<div>template
text</div>');

The only other approach would be to fill in $templateCache before each test.

Hope this helps,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Matt....@powerdms.com]

So then any time you change Templates/my-directive.html you also have to copy and paste that into this test for the response of that request? That seems not great. Is that really the only option.

[Peter Bacon Darwin]

Check out Vojta's https://github.com/vojtajina/ng-directive-testing.  It shows how you can simply load up your templates directly into the templateCache for testing, which means that no requests need to be made.

On 9 October 2012 18:28, <Matt....@powerdms.com> wrote:

So then any time you change Templates/my-directive.html you also have to copy and paste that into this test for the response of that request? That seems not great. Is that really the only option.

--

[Pawel Kozlowski]

Hi!

On Tue, Oct 9, 2012 at 7:28 PM, <Matt....@powerdms.com> wrote:
> So then any time you change Templates/my-directive.html you also have to
> copy and paste that into this test for the response of that request? That
> seems not great.

Well, since you've decided to use templateUrl I presume that that you
want to give people a way of customizaing this template, right? So
when using your directive people could change this template so in the
end you don't know what your directive is going to get. And unit tests
are great for this since you can easily test for corner cases (invalid
template, no template etc.).

If you don't want people to change your template just put it as string
in the 'template' attribute.

> Is that really the only option.

Technically there are other options: you could load the template in a
test. But once again, for me the whole purpose of using templateUrl is
to decouple directive's markup from a directive code. As such people
can change a template and you should test for this instead assuming
that there is only one 'true template'.

Cheers,
Pawel

[Matt....@powerdms.com]

That is exactly what I was looking for. 

I modified my testacular.conf.js and my test as this example shows and I cant seem to get it running. Is the html2js preprocessor not in testacular stable? I tried getting the 0.3.10 package and it is throwing out some odd errors and wont run. :/

[Peter Bacon Darwin]

The preprocessor is in his grunt file or nearby

Pete
...from my mobile.

--

[pierre....@gmail.com]

you also have to adapt your grunt file to put the html2js task:

https://github.com/vojtajina/ng-directive-testing/blob/master/grunt.js

P

[Garrett Everding]

I use jade so would it work the same way if I compiled them to jade javascript functions and included the jade client side file?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

--

Garrett Everding

2B Computer Engineering

Cell: (226) 868-5820

Email: garrett.e...@gmail.com

[Jason Drake]

This gave me some problems, but I discovered what the problem was by contrasting the templates from ng-directive-test is the templates only had LF line feeds, whereas since my templates were created on Windows with netbeans, they were LFCR.  Upon removing/converting the CRs I was able to get them to compile correctly.  So if you get errors like

 

       Uncaught SyntaxError: Unexpected token ILLEGAL
       at C:/dev/netbeans_projects/stamp-web/app/html/pagingToolbar.html.js:3

 

This is why. 

 

Cheers

 

Jason

[Brian Lenzo]

I ran into this issue too and submitted a pull request in Karma to fix it.  It should be fixed in the next release.

https://github.com/karma-runner/karma/issues/286

Brian