Тестирование Jasmine JQuery не распознает тег p как скрытый

Question

Я пытаюсь использовать Jasmine и Jasmine-JQuery для проверки кода, над которым я работаю. Тем не менее, я написал простой тест, чтобы увидеть, если click слушатель срабатывает. Я следовал руководству, показывающему, как настроить шпионов и использовать их, чтобы увидеть, были ли инициированы события. Хотя это работает нормально, когда я добавил Jasmine-JQuery Matcher toBeHidden() он продолжает возвращать ложь. Я протестировал метод, нажав на кнопку, которая запускает событие, выбрав его и вызвав click() в теме. Я также пытался положить его в setTimeOut обратный вызов, чтобы убедиться, что событие было запущено, но оно также не работает.

Вот мой слушатель

$("#b1").click(function(){
    $("#p1").hide();
});

Вот мой тест

describe("Hide, Show, Toggle Tests", function() {
  var spyEvent;
  function setUpToggleFixture() {
    setFixtures('<div class="container">'
            + '<button id="b1">Hide Paragraph</button> <button id="b2">Show Paragraph</button> <button id="b3">Toggle Paragraph</button>'
            + '<p id="p1">Lorem</p></div>');    
  }

  beforeEach(function() {
    setUpToggleFixture();
  });

  it ("should invoke the hide click event.", function() {
    spyEvent = spyOnEvent('#b1', 'click');
    $('#b1').click());

    expect('click').toHaveBeenTriggeredOn('#b1');
    expect(spyEvent).toHaveBeenTriggered();
    expect($("#p1")).toBeHidden();
  });
});

Answer 1

Если у кого-то еще есть проблемы с тестированием JQuery с Jasmine, имейте в виду, что оборачивая любой код в $(document).ready(function(){ }); это предотвратит его тестирование Жасмином. Мое решение заключалось в том, чтобы обернуть мой селектор в выражение функции JS и вызвать эту функцию в $(document).ready(function(){ }); вот так,

//my js file
$(document).ready(function(){ 
  hide();
});

function hide(){
  $("#b1").click(function(){
    $("#p1").hide();
  });
}

И проверить это так

beforeEach(function() {
  setFixtures('<div class="container">'
            + '<button id="b1">Hide Paragraph</button> <button id="b2">Show Paragraph</button> <button id="b3">Toggle Paragraph</button>'
            + '<p id="p1">Lorem</p></div>');
});

it ("should hide the paragraph.", function() {
  hide();   //I need to call the method before running it now that I wrapped my 
           //method in a function expression
  $('#b1').click();

  expect($("#p1")).toBeHidden();
});