Jasmine - A BDD test framework for JavaScript
-
Upload
sumanth-krishna -
Category
Technology
-
view
2.596 -
download
0
Transcript of Jasmine - A BDD test framework for JavaScript
![Page 1: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/1.jpg)
BDD - Jasmine
![Page 2: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/2.jpg)
Agenda
• Need of TDD/BDD• Steps to BDD• Familiarize terminology• Installation• Executing jasmine • Write tests in jasmine• What next?
![Page 3: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/3.jpg)
TDD
• Involves writing tests before writing the code being tested
• Write a small test first (at this point of time no code being written!)
• Run the test (obviously, it fails!)• Now make the test pass (well write some code)• Observe the design, refactor
![Page 4: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/4.jpg)
TDD - Challenges
• As the code size increases more refactor becomes critical
• Since most of the time the features are not pre-determined reviewing/refactoring does prove as time consuming and becomes expensive
![Page 5: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/5.jpg)
So what next???
• In real time objects are the carriers• They extend the behavior of classes• This would be mean, “what an object does is
significantly more important!”• It’s all behavior
![Page 6: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/6.jpg)
BDD
• Behaviour Driven Development is an Agile development process that comprises aspects of – Acceptance Test Driven Planning, – Domain Driven Design – Test Driven Development
![Page 7: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/7.jpg)
BDD
• BDD puts the focus on Behavior rather than structure
• Examples– User inputting values– Awaiting for the feedback– Calculations/logic
• It’s all behavior
![Page 8: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/8.jpg)
BDD Triad
• For better communication across the levels (Business analysts, Developers, Testers) in software development we narrate/describe the logical chunks as scenarios
• Given/When/Then – called as BDD triad
![Page 9: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/9.jpg)
BDD Cycle
![Page 10: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/10.jpg)
Jasmine
![Page 11: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/11.jpg)
Jasmine
• It’s a BDD Framework for testing JavaScript
• Does not depend on other frameworks• Does not require a DOM• Clean & Obvious syntax• Influenced by Rspec, JSSpec, Jspec• Available as stand-alone, ruby gem, Node.js module, as
Maven plugin
![Page 12: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/12.jpg)
Principles
• Should not be tied to any browser, framework, platform or host language
• Should have idiomatic and unsurprising syntax• Should work wherever JavaScript runs• Should play well with IDE’s
![Page 13: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/13.jpg)
Goals
• It should encourage good testing practices• It should be simple to get start with• It should integrate easily with continuous build
systems
![Page 14: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/14.jpg)
Terminology
•Specs•Suites•describe•it•expect•matchers•mocks•spies
![Page 15: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/15.jpg)
Installation
•Required files/structure•Download stand alone zip file include the lib files <script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.0.0.rc1/jasmine-html.js"></script>
•Include styles as well<link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.0.rc1/jasmine.css">
![Page 16: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/16.jpg)
Implementation/File structure
•jasmine-example/
• lib/• jasmine-1.3.1/jasmine.js• jasmine-1.3.1/jasmine-html.js• jasmine-1.0.0.rc1/jasmine.css
• specs/• SpecHelper.js• BasicMathSpec.js
• scripts/• BasicMath.js
![Page 17: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/17.jpg)
http://tryjasmine.com/
![Page 18: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/18.jpg)
describe ... it
describe accepts a string or class. Helps in organizing specs
it is what describes the spec. It optionally takes a string
// Jasminedescribe “Calculate”, function() { describe “#Add”, function(){ it “should give sum”, function(){ -----
----- }; });});
![Page 19: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/19.jpg)
Filters
// Jasminevar calc;beforeEach(function(){ calc = new Calculator();});
afterEach(function(){ calc.reset();});
Pretty handy to create data for each test
before runs the specified block before each test.
after runs the specified block after each test.
![Page 20: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/20.jpg)
Expectations
//Jasmine
it (“should return the sum”, function(){calc = new Calculator();expect(calc.Add(4,5).toEqual(9));expect(calc.Add(4,4).not.toEqual(9));
});
![Page 21: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/21.jpg)
http://tryjasmine.com/
![Page 22: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/22.jpg)
Specs - variables
Spec - describe('panda',function(){
it('is happy',function(){ expect(panda).toBe('happy');
});});
JavaScriptpanda = “happy”;
![Page 23: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/23.jpg)
Specs - variables
Spec - describe('panda',function(){
it('is happy',function(){ expect(panda).toBe('happy');
});});
JavaScriptpanda = “happy”;
![Page 24: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/24.jpg)
Specs - functions
Specdescribe('Hello World function',function(){
it('just prints a string',function(){ expect(helloWorld()).toEqual("Hello world!");
});});JavaScriptfunction helloWorld(){
return "Hello world!";}
![Page 25: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/25.jpg)
Specs –matchers
Specdescribe('Hello World function',function(){
it('just prints a string',function(){ expect(helloWorld()).toContain("world!");
});});
JavaScriptfunction helloWorld(){
return "Hello world!";}
![Page 26: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/26.jpg)
Specs –Custom matchers
Spec
describe('Hello world', function() {
beforeEach(function() { this.addMatchers({ toBeDivisibleByTwo: function() { return (this.actual % 2) === 0; } }); });
it('is divisible by 2', function() { expect(guessANumber()).toBeDivisibleByTwo(); });
});
![Page 27: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/27.jpg)
Spy
• Spy are handy in tracking down the usage of dependent or functions that are being invoked by other functions
• Take a scenario, where on the website I would like to wish the user like Hi, Hello along with salutation Mr, Ms, Mrs
• Say I have a simple function greet() which returns plain string
• Another function which returns the salutation()
• spyOn(obj, 'method')
• expect(obj.method).toHaveBeenCalled()
![Page 28: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/28.jpg)
Spy - usage
• spyOn(obj, 'method')
• expect(obj.method).toHaveBeenCalled()
• expect(obj.method).toHaveBeenCalled(“Hello”,”Mr”)
• obj.method.callCount
![Page 29: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/29.jpg)
Specs – Spy
describe("User", function() {
it("calls the salutation function", function() {
var visitor = new User();
spyOn(visitor, "greetUser");
visitor.greetUser("Hello");
expect(visitor.greetUser).toHaveBeenCalled(); });
});
![Page 30: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/30.jpg)
Specs – Functions
User = function(){};
User.prototype.greetUser = function(salutation){ return this.sayHello() + "" + salutation; }
User.prototype.sayHello = function(){ return "Hello"; }
![Page 31: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/31.jpg)
DEMO
![Page 32: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/32.jpg)
What next?
• Spies• Mocking/Faking• coffee-script • jasmine-jquery • jasmine-fixture • jasmine-stealth
![Page 33: Jasmine - A BDD test framework for JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062823/5879c06a1a28abb42a8b4f55/html5/thumbnails/33.jpg)
Thanks
References:
http://blog.bandzarewicz.com/blog/2012/03/08/jasmine-cheat-sheet/
http://evanhahn.com/how-do-i-jasmine/
http://tobyho.com/2011/12/15/jasmine-spy-cheatsheet/
https://github.com/pivotal/jasmine/wiki/Spies