Jak działa Jasmine, jeśli funkcja nie zwraca wartości?

Question

Przede wszystkim jestem nowy w testach Driven Development (TDD) i Behavior Driven Development (BDD) i ciężko jest mi uwierzyć, że jest to dobry sposób na tworzenie stron internetowych, ponieważ strony często muszą być rozwijane w szybki sposób, co jest trudne, jeśli musisz opracować kod testowy, zanim będziesz mógł coś zrobić.

W każdy sposób!

Powód, dla którego piszę ten wątek, nie wynika z tego, co mi się wydaje, problemu (ale jeśli masz dane, to z przyjemnością też to przeczytam!). Czytałem trochę o składni, jak to działa i to wszystko. Odkryłem jednak, że podejście to jest trudne do zrealizowania, jeśli moja funkcja nie zwraca wartości.

Załóżmy na przykład, że mam jedno kliknięcie zdarzenia funkcję jedynie zmienia wartość tekstową wejścia wyzwalane:

$('input[type="text"]').click(function() { 
    $(this).val('Oh, that tickles!'); 
}); 

Jak jaśmin obsłużyć to? Podobnie jak w przypadku następującego kodu:

describe('Input type text is clicked', function() { 
    it('changes text in the input field', function() { 
     expect($('input[type="text"]').val()).toEqual("Oh, that tickles!"); 
    }); 
}); 

Jest to błąd, ponieważ obiekt jQuery może zawierać wiele zmiennych wejściowych, które nie zawierają tej wartości. Czy są jakieś sposoby na znalezienie elementu (np. $(this) lub podobnego), czy też powinienem włożyć test jaszczurki? Tak:

describe('Input type text is clicked', function() { 
    it('changes text in the input field', function() { 
     $('input[type="text"]').click(function() { 
      expect($(this).val()).toEqual("Oh, that tickles!"); 
     } 
    }); 
}); 

Niektóre klarowność byłoby miło :)

Bardzo dziękuję z góry!

/J.

Answer 1

Jednym ze sposobów jest upewnienie się, że podczas uruchamiania testu jest tylko jedno pole wprowadzania tekstu. Można użyć jasmine-jquery stworzyć urządzenie z pola wejściowego:

describe('Input type text is clicked', function() { 
    beforeEach(function() { 
    jasmine.getFixtures().set('<input type="text" />'); 
    bindClickEvent(); 
    }); 
    it('changes text in the input field', function() { 
    $('input[type="text"]').click(); 
    expect($('input[type="text"]').val()).toEqual("Oh, that tickles!"); 
    }); 
}); 

Możesz byłaby swój kod, dzięki czemu można przetestować, że zdarzenie click jest obsługiwane osobno obsługi kliknij sama:

var eventHandlers = { 
    tickle: function() { 
    $(this).val('Oh, that tickles!'); 
    } 
};  
$('input[type="text"]').click(eventHandlers.tickle); 

Następnie masz dwa testy:

describe('Input type text is clicked', function() { 
    beforeEach(function() { 
    jasmine.getFixtures().set('<input type="text" />'); 
    spyOn(eventHandlers, 'tickle'); 
    bindClickEvent(); 
    }); 
    it('should tickle the field', function() { 
    $('input[type="text"]').click(); 
    expect(eventHandler.tickle).toHaveBeenCalled(); 
    }); 
}); 

describe('eventHandlers.tickle', function() { 
    it('should set the field value', function() { 
    var input = $('<input type="text"/>'); 
    eventHandlers.tickle.call(input); 
    expect(input.val()).toBe("Oh, that tickles!"); 
    }); 
});