0
Javascript: Testing the awesome
with Mocha and Jasmine
Speakers
● Nicolas
● Tung
Agenda
●
●
●
●
●

Introduction
Basics (Mocha and Jasmine)
Operators and asserts
Listeners, spies
More advanced examples
Introduction and basics
● Goal 1
○ Make your code solid and future-proof

● Goal 2
○ Have a systematic way to "catch" regr...
Introduction and basics
Mocha:
● fun
● simple
● flexible
● built for JavaScript (and CoffeeScript)
https://github.com/gman...
Introduction and basics
● http://jasmine.github.io/
○ Built and supported by Pivotal Labs

● Latest Version: 2.0
● Runs
○ ...
Basics, Mocha
● solve the async problems
● work with every assertion library
○ that throw exceptions

● extensible reporte...
Basics, Jasmine
● Describe your suites with "Describe" to make
your code clean and reports readable
○ You can even NEST th...
Basics, Jasmine
● Setup a test suite ("describe")
beforeEach(function() {

● Teardown a test suite ("describe")
afterEach(...
Basics, Mocha
●
●
●
●

support lcov (lib coverage)
support only, skip, --grep
highlight slow test, custom timeouts
[BDD | ...
Basics, Jasmine
●
●
●
●

Code Coverage through Karma (node.js)
Gem for testing in Rails
Plays well with CoffeeScript
Plays...
Basic operators, Mocha
Mocha + Chai + CoffeeScript = Awesomeness
● NO bra-ces
● NO repeating keywords
● NO “deep” pains
● ...
Basic operators, Jasmine
Within tests you use "Matchers"
expect(true).toBe(true);
expect(false).not.toBe(true);
expect(a)....
Basic operators, Mocha
back to the demo
Basic operators, Jasmine
● It can be complex scenarios and matchers,
any kind of dynamic code built with
JavaScript.
Listeners, Spies: Mocha
No need for spies and listeners
Just use callback
Listeners, Spies: Jasmine
● You can use Spies to check function calls
spyOn(foo, 'setBar');
foo.setBar(123);
expect(foo.se...
Listeners, Spies: Mocha
Listeners, Spies: Jasmine
… expect(jasmine.Ajax.requests.mostRecent().url).toBe
('/so/cool/');
More advanced examples, Jasmine
Some sugar: Adding Matchers (awesome)
describe('Hello world', function() {
beforeEach(func...
About @Tung Vu
Author: Tung Vu@: @gmail.com
You can follow me at:
○

google.com/+TungVuJS
About @Nicolas
Author: Nicolas Embleton @: nicolas.embleton@gmail.com
You can follow me at:
● https://plus.google.com/+Nic...
Upcoming SlideShare
Loading in...5
×

[Js hcm] Java script- Testing the awesome

239

Published on

Author: Nicolas Embleton @: nicolas.embleton@gmail.com

You can follow Nicolas at:
https://plus.google.com/+NicolasEmbleton
https://twitter.com/nicolasembleton

And the Javascript Ho Chi Minh City Meetup:
http://meetup.com/JavaScript-Ho-Chi-Minh-City/
https://www.facebook.com/JavaScriptHCMC
https://plus.google.com/communities/116105314977285194967
Our group is looking for Projects to mentor. If you have a project you want support for, plz contact us

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
239
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "[Js hcm] Java script- Testing the awesome"

  1. 1. Javascript: Testing the awesome with Mocha and Jasmine
  2. 2. Speakers ● Nicolas ● Tung
  3. 3. Agenda ● ● ● ● ● Introduction Basics (Mocha and Jasmine) Operators and asserts Listeners, spies More advanced examples
  4. 4. Introduction and basics ● Goal 1 ○ Make your code solid and future-proof ● Goal 2 ○ Have a systematic way to "catch" regression problems ● Goal 3 ○ Maintain a code stability throughout the codebase increase
  5. 5. Introduction and basics Mocha: ● fun ● simple ● flexible ● built for JavaScript (and CoffeeScript) https://github.com/gmanvn/jshcm-testing
  6. 6. Introduction and basics ● http://jasmine.github.io/ ○ Built and supported by Pivotal Labs ● Latest Version: 2.0 ● Runs ○ In the browser natively ○ With Node.js through a runner (Karma, Protractor, …) ● Simple, elegant, descriptive, full-featured
  7. 7. Basics, Mocha ● solve the async problems ● work with every assertion library ○ that throw exceptions ● extensible reporters ○ nyan cat included https://github.com/gmanvn/jshcm-testing
  8. 8. Basics, Jasmine ● Describe your suites with "Describe" to make your code clean and reports readable ○ You can even NEST them describe("mocking ajax", function() { ● Describe each test with "it" and a descriptive comment to explain what the test is doing it("specifies response when you need it", function() {
  9. 9. Basics, Jasmine ● Setup a test suite ("describe") beforeEach(function() { ● Teardown a test suite ("describe") afterEach(function() { ● "Expect" things to be (or not) as they should (or not) expect(doneFn).not.toHaveBeenCalled();
  10. 10. Basics, Mocha ● ● ● ● support lcov (lib coverage) support only, skip, --grep highlight slow test, custom timeouts [BDD | TDD | QUnit | exports] interface https://github.com/gmanvn/jshcm-testing
  11. 11. Basics, Jasmine ● ● ● ● Code Coverage through Karma (node.js) Gem for testing in Rails Plays well with CoffeeScript Plays well with MVC Framework (AngularJS for example)
  12. 12. Basic operators, Mocha Mocha + Chai + CoffeeScript = Awesomeness ● NO bra-ces ● NO repeating keywords ● NO “deep” pains ● Focus only on the test
  13. 13. Basic operators, Jasmine Within tests you use "Matchers" expect(true).toBe(true); expect(false).not.toBe(true); expect(a).toBe(b); expect(a).not.toBe(null); expect(message).toMatch(/bar/); expect(message).toMatch("bar"); expect(message).not.toMatch(/quux/);
  14. 14. Basic operators, Mocha back to the demo
  15. 15. Basic operators, Jasmine ● It can be complex scenarios and matchers, any kind of dynamic code built with JavaScript.
  16. 16. Listeners, Spies: Mocha No need for spies and listeners Just use callback
  17. 17. Listeners, Spies: Jasmine ● You can use Spies to check function calls spyOn(foo, 'setBar'); foo.setBar(123); expect(foo.setBar).toHaveBeenCalled(); ● You can mock Ajax calls via Ajax.js jasmine.Ajax.install(); var doneFn = jasmine.createSpy("success"); var xhr = new XMLHttpRequest();
  18. 18. Listeners, Spies: Mocha
  19. 19. Listeners, Spies: Jasmine … expect(jasmine.Ajax.requests.mostRecent().url).toBe ('/so/cool/');
  20. 20. More advanced examples, Jasmine Some sugar: Adding Matchers (awesome) describe('Hello world', function() { beforeEach(function() { this.addMatchers({ toBeDivisibleByTwo: function() { return (this.actual % 2) === 0; } }); }); it('is divisible by 2', function() { expect(gimmeANumber()).toBeDivisibleByTwo(); }); });
  21. 21. About @Tung Vu Author: Tung Vu@: @gmail.com You can follow me at: ○ google.com/+TungVuJS
  22. 22. About @Nicolas Author: Nicolas Embleton @: nicolas.embleton@gmail.com You can follow me at: ● https://plus.google.com/+NicolasEmbleton ● https://twitter.com/nicolasembleton And the Javascript Ho Chi Minh City Meetup: ● http://meetup.com/JavaScript-Ho-Chi-Minh-City/ ● https://www.facebook.com/JavaScriptHCMC ● https://plus.google.com/communities/116105314977285194967 ○ Our group is looking for Projects to mentor. If you have a project you want support for, contact me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×