Your SlideShare is downloading. ×
Automated Jasmine Tests for JavaScript, Geecon 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Automated Jasmine Tests for JavaScript, Geecon 2014

3,041
views

Published on

Jasmine is one of the most popular JavaScript unit testing frameworks that allows JavaScript developers to develop "descriptive" testing code which does not necessarily need a JavaScript expert to …

Jasmine is one of the most popular JavaScript unit testing frameworks that allows JavaScript developers to develop "descriptive" testing code which does not necessarily need a JavaScript expert to understand it. Although Jasmine is a popular JavaScript unit testing framework and is used in many web applications, it does not have an out-of the box way to automate the running of its tests because it is designed to run from the browser. This session discusses how to develop a "complete" quality tests for the JavaScript code of the web applications using Jasmine as a powerful descriptive JavaScript unit testing tool and how to "automate" running the Jasmine tests on the web browsers. The session also discusses how to generate Jasmine reports from both the build and continuous integration tools.

A note:
If you want to know the JavaScript Unit testing's art of the work especially in the hybrid mobile apps, I recommend you to buy my new book ("JavaScript Mobile Apps Development"):
https://www.packtpub.com/web-development/javascript-native-mobile-apps-development

Published in: Education, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,041
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
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. Automated Jasmine Tests for JavaScript Hazem Saleh
  • 2. 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.
  • 3. O U T L I N E 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)
  • 4. 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.
  • 5. O U T L I N E 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)
  • 6. 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
  • 7. O U T L I N E 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)
  • 8. 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.
  • 9. 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).
  • 10. 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”
  • 11. 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; }); });
  • 12. Jasmine Overview Jasmine First Test Demo
  • 13. O U T L I N E 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)
  • 14. 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).
  • 15. 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
  • 16. 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 specjavascriptsfixtures directory. beforeEach(function() { loadFixtures("registrationFixture.html"); }); (or) beforeEach(function() { jasmine.getFixtures().set('<div id="weatherInformation" class="weatherPanel"></div>'); });
  • 17. O U T L I N E 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)
  • 18. Weather Application Tests Demo Weather Application Test Demo: 1. Loading Fixtures example. 2. Performing asynchronous operation testing example.
  • 19. O U T L I N E 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)
  • 20. 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
  • 21. 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.
  • 22. 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:
  • 23. 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 */ }); };
  • 24. 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:
  • 25. 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' } }); };
  • 26. Demo 1. Automating running Jasmine tests in Karma. 2. Exploring Karma's JUnit XML results.
  • 27. O U T L I N E 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)
  • 28. 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.
  • 29. 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/' } }); };
  • 30. Demo Generating Code Coverage Reports
  • 31. O U T L I N E 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)
  • 32. Demo Integrating tests with Build and Integration Management tools
  • 33. O U T L I N E 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)
  • 34. 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 :).
  • 35. 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>
  • 36. Questions/Contact me Twitter: @hazems Email: hazems@apache.org Example Demo project source code is available in GitHub: https://github.com/hazems/JsUnitTesting