Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
413
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Jasmine
  • 2. Qué es?
  • 3. Qué es?"behavior-driven development framework fortesting JavaScript code"
  • 4. Qué es?"behavior-driven development framework fortesting JavaScript code"http://github.com/pivotal/jasmine
  • 5. Qué es?"behavior-driven development framework fortesting JavaScript code"http://github.com/pivotal/jasmine● sintaxis simple● no depende de otros frameworks js ni de existencia de DOM
  • 6. Ejemplofunction helloWorld(){return Hello World!}describe(HelloWorld, function(){it(returns hello world message, function(){expect(helloWorld()).toEqual(Hello World!)});});
  • 7. Ejemplo - Passing
  • 8. Ejemplofunction helloWorld(){return Bye Bye World!}describe(HelloWorld, function(){it(returns hello world message, function(){expect(helloWorld()).toEqual(Hello World!)});});
  • 9. Ejemplo - Failing
  • 10. Suite - Spec - ExpectationUna suite está compuesta por:● al menos un bloque describe● que contiene bloques it (specs)● que contienen expectationsdescribe(HelloWorld, function(){it(returns hello world message, function(){expect(helloWorld()).toEqual(Hello World!)});});
  • 11. Setup and Teardowndescribe(MyObject, function() {var obj = new MyObject();beforeEach(function() {obj.setState(fixed);});it(changes state, function() {obj.setState(broken);expect(obj.getState()).toEqual(broken);})it("adds states", function() {obj.addState(packaged);expect(obj.getState()).toEqual([fixed, packaged]);})});
  • 12. Matchersexpects(x).toEqual(y)expects(x).toBe(y)expect(x).toContain(y)expect(x).toBeTruthy()expect(x).toBeFalsy(expect(x).toBeDefined()expect(x).toBeUndefined()expect(x).toBeNull()
  • 13. Matchersexpects(x).toEqual(y)expects(x).toBe(y)expect(x).toBeTruthy()expect(x).toBeFalsy()expect(x).toBeDefined()expect(x).toBeUndefined()expect(x).toBeNull()expect(x).toContain(y)
  • 14. Matchersexpects(x).toEqual(y)expects(x).toBe(y)expect(x).toBeTruthy()expect(x).toBeFalsy()expect(x).toBeDefined()expect(x).toBeUndefined()expect(x).toBeNull()expect(x).toContain(y)
  • 15. Matchersexpects(x).toEqual(y)expects(x).toBe(y)expect(x).toBeTruthy()expect(x).toBeFalsy()expect(x).toBeDefined()expect(x).toBeUndefined()expect(x).toBeNull()expect(x).toContain(y)
  • 16. Matchersexpect(x).toBeLessThan(y)expect(x).toBeGreaterThan(y)expect(x).toMatch(pattern);expect(function(){fn();}).toThrow(e);// todos los matchers se pueden invertirexpect(x).not.toEqual(y)expect(x).not.toMatch(pattern)
  • 17. Matchersexpect(x).toBeLessThan(y)expect(x).toBeGreaterThan(y)expect(x).toMatch(pattern);expect(function(){fn();}).toThrow(e);// todos los matchers se pueden invertirexpect(x).not.toEqual(y)expect(x).not.toMatch(pattern)
  • 18. Matchersexpect(x).toBeLessThan(y)expect(x).toBeGreaterThan(y)expect(x).toMatch(pattern);expect(function(){fn();}).toThrow(e);// todos los matchers se pueden invertirexpect(x).not.toEqual(y)expect(x).not.toMatch(pattern)
  • 19. Matchersexpect(x).toBeLessThan(y)expect(x).toBeGreaterThan(y)expect(x).toMatch(pattern);expect(function(){fn();}).toThrow(e);// todos los matchers se pueden invertirexpect(x).not.toEqual(y)expect(x).not.toMatch(pattern)
  • 20. Custom matchersdescribe(Numbers Module, function() {beforeEach(function() {this.addMatchers({toBeDivisibleByTwo: function() {return (this.actual % 2) === 0;}});});it(is divisible by 2, function() {expect(gimmeANumber()).toBeDivisibleByTwo();});});
  • 21. Spies● test doubles
  • 22. Spies● test doubles● reportar que fueron invocados
  • 23. Spies● test doubles● reportar que fueron invocados● reportar cuantas veces fueron invocados
  • 24. Spies● test doubles● reportar que fueron invocados● reportar cuantas veces fueron invocados● reportar con qué parámetros fueron invocados
  • 25. Spies● test doubles● reportar que fueron invocados● reportar cuantas veces fueron invocados● reportar con qué parámetros fueron invocados● si se quiere, invocar al método que están reemplazando
  • 26. Spies - Ejemplofunction Player() {this.isPlaying = false;}Player.prototype.play = function(song) {this.currentlyPlayingSong = song;this.isPlaying = true;};Player.prototype.pause = function() {this.isPlaying = false;};
  • 27. Spies - EjemploPlayer.prototype.togglePlay = function(song) {if (this.isPlaying) {this.pause();}else {this.play(song);}}
  • 28. Spies - Ejemplodescribe(tooglePlay, function() {beforeEach(function() {player.play(song);});it(should pause if its playing, function() {spyOn(player, pause); // define the spyplayer.togglePlay(song);expect(player.pause).toHaveBeenCalled();});});
  • 29. Spies - ComportamientoLos spies pueden configurarse para responder de diferentesmaneras cuando son invocados:
  • 30. Spies - Comportamiento// spies on AND calls the original function spied onspyOn(x, method).andCallThrough()Los spies pueden configurarse para responder de diferentesmaneras cuando son invocados:
  • 31. Spies - Comportamiento// spies on AND calls the original function spied onspyOn(x, method).andCallThrough()// returns passed arguments when spy is calledspyOn(x, method).andReturn(arguments)Los spies pueden configurarse para responder de diferentesmaneras cuando son invocados:
  • 32. Spies - Comportamiento// spies on AND calls the original function spied onspyOn(x, method).andCallThrough()// returns passed arguments when spy is calledspyOn(x, method).andReturn(arguments)// throws passed exception when spy is calledspyOn(x, method).andThrow(exception)Los spies pueden configurarse para responder de diferentesmaneras cuando son invocados:
  • 33. Spies - Comportamiento// spies on AND calls the original function spied onspyOn(x, method).andCallThrough()// returns passed arguments when spy is calledspyOn(x, method).andReturn(arguments)// throws passed exception when spy is calledspyOn(x, method).andThrow(exception)// calls passed function when spy is calledspyOn(x, method).andCallFake(function)Los spies pueden configurarse para responder de diferentesmaneras cuando son invocados:
  • 34. Spies - Matchers y propiedadesexpect(x.method).toHaveBeenCalled()expect(x.method).toHaveBeenCalledWith(args)matchers
  • 35. Spies - Matchers y propiedadescallCountmostRecentCall.argsargsForCall[i]expect(x.method).toHaveBeenCalled()expect(x.method).toHaveBeenCalledWith(args)matcherspropiedades
  • 36. Spies - Matchers y propiedadescallCountmostRecentCall.argsargsForCall[i]expect(x.method.callCount).toEqual(1)expect(x.method).toHaveBeenCalled()expect(x.method).toHaveBeenCalledWith(args)matcherspropiedades
  • 37. Ajax - EjemploPlayer.prototype.getNewSongs = function() {var _this = this;$.ajax({url: /songs,dataType: json,success: function(data) {_this.displaySongs(data.songs);},error: function(data) {_this.displayErrorMessage();}});}
  • 38. Ajax - Ejemploit(displays songs if getNewSongs is successful, function() {var player = new Player();spyOn($, ajax).andCallFake(function(e) {e.success({songs: [Some]});});spyOn(player, displaysSongs);player.getNewSongs();expect(player.displaySongs).toHaveBeenCalledWith([Some]);});
  • 39. Mocking JavaScript ClockbeforeEach(function() {timerCallback = jasmine.createSpy(timerCallback);jasmine.Clock.useMock();});it(causes a timeout to be called synchronously, function() {setTimeout(function() { timerCallback(); }, 100);expect(timerCallback).not.toHaveBeenCalled();jasmine.Clock.tick(101);expect(timerCallback).toHaveBeenCalled();});
  • 40. Asynchronous Supportvar foo = 0;it(should be an async test, function() {runs(function() {setTimeout(function() { foo++ }, 250);});waits(500);runs(function() {expect(foo).toEqual(1);});});
  • 41. jasmine-jquerycustom matchers para usar con jqueryexpect($(<div id="some-id"></div>)).toBe(div)var $div = $(<div><span class="a-class"></span></div>)expect($div).toContain(span.a-class)var $div = $(<div><h1>header</h1></div>)expect($div).toContainText(header)
  • 42. jasmine-jqueryloadFixtures(my_fixture.html);manejo de fixtures html, css y jsonloadStyleFixtures(my_fixture.css);var data = getJSONFixture(my_json_fixture.json);
  • 43. jasmine-jquery - Ejemplo<div id="player-content">some complex content</div>loadFixtures(player_fixture.html);player.init();expect($(#player-content)).to...;player_fixture.html
  • 44. Para tener en cuenta...jasmine gemhttps://github.com/pivotal/jasmine-gembrowser + rake tasksinon.jshttp://sinonjs.org/Fake XMLHttpRequest, Fake Servertry jasminehttp://tryjasmine.com/
  • 45. Preguntas?