automated jasmine tests for javascripts3-eu-west-1.amazonaws.com/presentations2014/37... ·...
TRANSCRIPT
![Page 1: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/1.jpg)
Automated Jasmine Tests for JavaScript
Hazem Saleh
![Page 2: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/2.jpg)
About Me
- Ten years of experience in Java enterprise, portal, and mobile solutions.
- Apache Committer and an open source guy.
- Author of three books
- Author of many articles about web development best practices.
- DeveloperWorks Contributing author.
- Technical Speaker (JavaOne, ApacheCon, JSFDays, Confess, JDC ...etc)
- Advisory Software Engineer in IBM.
![Page 3: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/3.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 4: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/4.jpg)
JavaScript Testing Challenges
Requires a lot of time to test on all the browsers.
JavaScript code that works on a browser X does not mean that it will work on browser Y.
Supporting a new browser on an existing system means allocating a new budget:
For testing this system on this browser.
For fixing newly discovered defects on this browser.
![Page 5: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/5.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 6: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/6.jpg)
Picking your JS Unit Testing framework
JavaScript unit testing tool
Executable across browsers (Automated
preferred)
Easy to setup
Easy to configure
Fast Execution
Integrated
Provides a good testing mechanism for
Asynchronous code
![Page 7: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/7.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 8: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/8.jpg)
Jasmine Overview
Jasmine is a powerful JavaScript unit testing framework.
Jasmine describes its tests in a simple natural language.
Jasmine tests can be read by Non-programmers.
Jasmine provides a clean mechanism for testing synchronous and asynchronous code.
![Page 9: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/9.jpg)
Jasmine Overview
Sample Jasmine Test:
describe("A sample suite", function() { it("contains a spec with an expectation", function() { expect(true).toEqual(true); });});
Main Jasmine Constructs:
TestSuite begins with a call to describe().
TestCase “or spec” begins with a call to it().
TestCase can contain one or more matcher(s).
![Page 10: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/10.jpg)
Jasmine Overview
Jasmine Main Matchers:
expect(x).toEqual(y) expect(x).toBe[Un]Defined()
expect(x).toBeNull()expect(x).toBeTruthy()expect(x).toBeFalsy()
expect(x).toContain(y)expect(x).toBeLessThan(y) expect(x).toBeGreaterThan(y)
expect(x).toMatch(pattern)expect(x).toWhatEver(Y) “custom matcher”
![Page 11: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/11.jpg)
Jasmine Overview
beforeEach and afterEach example:
describe("SimpleMath", function() { var simpleMath; beforeEach(function() { simpleMath = new SimpleMath(); }); it("should be able to find factorial for positive number", function() { expect(simpleMath.getFactorial(3)).toEqual(6); }); it("should be able to find factorial for zero", function() { expect(simpleMath.getFactorial(0)).toEqual(1); }); afterEach(function() { simpleMath = null; });});
![Page 12: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/12.jpg)
Jasmine Overview
Jasmine First Test Demo
![Page 13: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/13.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 14: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/14.jpg)
Asynchronous Jasmine Tests
Asynchronous JavaScript code refers to the code whose caller will NOT to wait until the execution completes.
In order to get the results, the caller should pass callbacks which will be called with data results parameters in case of operation success or failure.
Asynchronous JavaScript code mainly refers to Ajax code.
In order to support Asynchronous operation testing, Jasmine provides:
1. An optional single parameter for its single spec. 2. This parameter has to be called if the asynchronous operation completes. 3. If this parameter is not called for by default 5 seconds then the test will fail
(means operation timeout).
![Page 15: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/15.jpg)
Asynchronous Jasmine Tests
describe("when doing asynchronous operation", function() { it("should be able to do the asynchronous operation", function(done) {
var data = {};var successCallBack = function(result) {
console.log("success");/* validate result parameter */done();
};
var failureCallBack = function() {console.log("failure");expect("Operation").toBe("passing"); /* force failing test */done();
};
AsyncObject.asyncOperation(data, successCallBack, failureCallBack); });
});
Testing an Async Operation
![Page 16: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/16.jpg)
Loading Jasmine Fixtures
Fixture module of jasmine-jquery (use jQuery core) allows loading the HTML content to be used by the tests.
Put the fixtures you want to load for your tests in the spec\javascripts\fixtures directory.
beforeEach(function() { loadFixtures("registrationFixture.html");});
(or)
beforeEach(function() {jasmine.getFixtures().set('<div id="weatherInformation" class="weatherPanel"></div>');
});
![Page 17: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/17.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 18: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/18.jpg)
Weather Application Tests Demo
Weather Application Test Demo:
1. Loading Fixtures example.2. Performing asynchronous operation testing example.
![Page 19: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/19.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 20: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/20.jpg)
Automating Jasmine Tests using Karma JS
Jasmine is very cool and powerful JavaScript Unit Testing framework.
However, Jasmine is designed to work from browsers.
In order to automate Jasmine tests, we need to use a JavaScript test runner.
You have two great options from many options:
JsTestDriver Karma JS
![Page 21: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/21.jpg)
Automating Jasmine Tests using Karma JS
Karma JS is a modern JavaScript test runner that can be used for automating JavaScript tests.
Karma JS is designed to bring a productive test environment for web developers.
It is based on Node JS and is distributed as a node package.
It provides an easy-to-use command line interface.
![Page 22: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/22.jpg)
Automating Jasmine Tests using Karma JS
In order to use Karma JS:
Install Karma JS:
npm install karma
Jasmine QUnit
Generate your test configuration file:
karma init config.js
Start your Karma server:
karma start config.js
Fortunately, Karma JS supports popular testing frameworks, some of them are:
![Page 23: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/23.jpg)
Automating Jasmine Tests using Karma JS
Sample Karma JS Jasmine configuration file:
module.exports = function(config) { config.set({ frameworks: ['jasmine'], /* Used testing frameworks */ files: [ 'js-test/jasmine/lib/plugins/jasmine-jquery/jquery.js', 'js-test/jasmine/lib/plugins/jasmine-jquery/jasmine-jquery.js', 'js-src/*.js', 'js-test/jasmine/spec/*.js'], /* Files to be loaded in the browser */ reporters: ['progress'], port: 9876, autoWatch: true, /* Execute tests when a file changes */ browsers: ['Chrome'], /* Captured startup browsers */ });};
![Page 24: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/24.jpg)
Automating Jasmine Tests using Karma JS
By Default, Karma ONLY outputs the tests results on the console.
In order to output the test results in JUnit XML format, we need to install karma-junit-reporter plugin.
npm install karma-junit-reporter --save-dev
Add JUnit reporter parameters to your configuration.
In order to include JUnit reporter plugin to your project:
![Page 25: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/25.jpg)
Automating Jasmine Tests using Karma JS
module.exports = function(config) { config.set({ //... reporters: ['progress', 'junit'],
// Generate test results in this file junitReporter: {
outputFile: 'test-results.xml' }
});};
![Page 26: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/26.jpg)
Demo
1. Automating running Jasmine tests in Karma.2. Exploring Karma's JUnit XML results.
![Page 27: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/27.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 28: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/28.jpg)
Jasmine Code Coverage using Karma JS
Karma JS code coverage can be performed using Istanbul module.
Istanbul supports:
Line coverage
In order to include Istanbul in your test project:
Function coverage Branch coverage
npm install karma-coverage --save-dev
Add Istanbul parameters to your configuration.
![Page 29: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/29.jpg)
Jasmine Code Coverage using Karma JS
module.exports = function(config) { config.set({ //... reporters: ['progress', 'coverage'], preprocessors: { // src files to generate coverage for 'src/*.js': ['coverage'] }, // The reporter configuration coverageReporter: { type : 'html', dir : 'coverage/' } });};
![Page 30: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/30.jpg)
Demo
Generating Code Coverage Reports
![Page 31: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/31.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 32: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/32.jpg)
Demo
Integrating tests with Build and Integration Management tools
![Page 33: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/33.jpg)
OUTLINE
JavaScript Testing Challenges
Picking your JS Unit Testing framework
Jasmine Overview
Asynchronous Jasmine Tests
Weather Application Tests Demo
Automating Jasmine Tests using Karma JS (Demo)
Jasmine Code Coverage using Karma JS (Demo)
Conclusion
Integrating Jasmine tests with Build and CI tools (two Demos)
![Page 34: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/34.jpg)
Conclusion
Jasmine is a powerful unit testing framework that allows you to develop read-able maintainable JavaScript tests.
Karma JS is a modern Node JS test runner which allows automating JavaScript tests.
Thanks to Karma JS, we can now have automated Jasmine tests.
Thanks to Karma JS and Jasmine, testing JavaScript code becomes fun :).
![Page 35: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/35.jpg)
JavaScript Quiz
<script> var number = 50; var obj = { number: 60, getNum: function () {
var number = 70; return this.number; }
};
alert(obj.getNum()); alert(obj.getNum.call());
alert(obj.getNum.call({number:20}));
</script>
![Page 36: Automated Jasmine Tests for JavaScripts3-eu-west-1.amazonaws.com/presentations2014/37... · 2014-05-31 · Jasmine is a powerful unit testing framework that allows you to develop](https://reader035.vdocument.in/reader035/viewer/2022081405/5f0cdd8d7e708231d4378433/html5/thumbnails/36.jpg)
Questions/Contact me
Twitter: @hazems
Email: [email protected]
Example Demo project source code is available in GitHub:
https://github.com/hazems/JsUnitTesting