Testing a click event with Jasmine that appends a style sheet to the head

Question

jQuery ``` $(".theme-picker").click(function () { $('head').append(''); }); ``` Jasmine ``` describe("style.switcher", function() { beforeEach( function() { jasmine.getFixtures().set( '' + '

' + '' + '' + '' + '' + '

' ); }); it("loads themes switcher link in head", function() { $('.theme-picker').trigger('click'); expect( $('head') ).toContain("theme_switcher"); }); }); ``` I am new to jasmine and the test is currently failing. I am unsure if it is the fixture, the trigger event or something else entirely.

Accepted Answer

I think the chosen answer (even though it's by the OP!) is misleading and incorrect. I'm not sure why it would be "poor form" to test the effect that a piece of JavaScript has on some targeted HTML. Often that's the only output that you can use to verify whether a method works.

The test that's used as an example doesn't actually prove anything: of course click was triggered, you just triggered it! What you want to do is prove something that follows from that click, e.g. a change in a DOM or other data structure, which was the original (IMO correct) instinct.

What you want is to use an asynchronous test to wait for a change in the DOM and then give up, similar to the way the Ruby library Capybara works:

```
it('loads themes switcher link in head', function() {
  $('.theme-picker').trigger('click');

waitsFor(function() {
    return $('head').contains('theme_switcher');
  }, 'theme switcher never loaded', 10000);
});
```

Testing a click event with Jasmine that appends a style sheet to the head

Solution

Problem