Geek asks and answers

Testing the click event with Jasmine that adds a stylesheet to the head

JQuery

$(".theme-picker").click(function () {
      $('head').append('<link rel="stylesheet" href="" type="text/css" media="screen" id="theme_switcher"/>');
});

jasmine

describe("style.switcher", function() {

beforeEach( function() {
    jasmine.getFixtures().set(
        '<head></head>' +
        '<div class="switcher">' +
          '<a class="theme-picker" title="theme-picker"></a>' +
          '<a class="folder-picker" title="folder-picker"></a>' +
          '<a class="font-picker" title="font-picker"></a>' +
          '<a class="color-picker" title="color-picker"></a>' +
        '</div>' );
  });

it("loads themes switcher link in head", function() {
  $('.theme-picker').trigger('click');
  expect( $('head') ).toContain("theme_switcher");
});
});

I'm new to jasmine, and the test is currently failing. I'm not sure if this is a device, a trigger event, or something else.

+5
source share
3 answers

I think the selected answer (even if it is OP!) Is misleading and incorrect. I'm not sure why this would be a “bad form” to test the effect of the javascript part on some kind of target html. Often this is the only conclusion you can use to check if the method works.

, , : , , ! , , -, , . DOM , ( ) .

(https://github.com/pivotal/jasmine/wiki/Asynchronous-specs), DOM, , Ruby Capybara (https://github.com/jnicklas/capybara/):

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

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

, , .

() :

describe("zen switcher", function() {

beforeEach( function() {
  loadFixtures('zen_switcher.html');
  spyOnEvent($('.theme-picker'), 'click');
});

it("clicks the .theme-picker", function() {
  $('.theme-picker').click();
  expect('click').toHaveBeenTriggeredOn($('.theme-picker'));
});
});
+2

theme_switcher - . toContain , .. toContain('#theme_switcher').

, , , .

EDIT:

, jasmine-jquery

0
source

More articles:


All Articles