CODEWITHSUNDEEP
angularjsjasminekarma-runner
user1703761
user1703761

Reputation: 1104

How do I test HTML that has to be rendered with testacular and jasmine

I want to test if a directive binds the correct jquery functions to the DOM and that they work.

For instance i want to test if an element is visible after it was slid up with $.slideUp() or i want to execute a click event on an html input.

It seems that i need to somehow attach the compiled directive to the DOM to make this happen. I've watched the testing directives video on youtube where he says that it is possible but he doesnt mention how you do it.

I'm kinda stuck.

Heres the link to the failing test: http://plnkr.co/edit/PojXf8?p=preview

Upvotes: 4

Views: 1093

Answers (1)

satchmorun
satchmorun

Reputation: 12477

Couple of things:

First, if you want to use jQuery with Angular, it needs to be loaded before Angular is, so move its script tag before Angular's.

Second, you're right about attaching the directive to the DOM. In a beforeEach call, you can use jQuery to create a host div and then remove that div in an afterEach call.

Here that is in a fork of your plunk.

That said, you only need your div in the DOM to check for visibility, which I'm not even sure you need to do in most cases. For example, you could use Sinon to spy on the slideUp call to make sure it happens and rely on jQuery's tests that it actually works.

And you can always trigger clicks directly just by calling elm.click() using jQuery.

Upvotes: 5

Related Questions