Your SlideShare is downloading. ×

Jasmine

482

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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?

×