How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
0 likes436 views
The document outlines best practices for writing testable JavaScript, including various testing methods, styles, and tools such as Jasmine, Mocha, and QUnit. It discusses the importance of unit and integration testing, provides examples of test-driven and behavior-driven development, and highlights common pitfalls in JavaScript code organization that lead to 'spaghetti' code. Additionally, it illustrates how to set up and run tests within different environments and workflows, emphasizing the integration of testing in development routines.
![β
Installing Jasmine
with NodeJS
Edit Jasmine.json to update Locations for Spec Files and Helper Files
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"helpers/**/*.js"
]
}](https://image.slidesharecdn.com/2016-devobj-testable-js-160620165837/85/How-do-I-write-Testable-Javascript-Presented-at-dev-Objective-June-16-2016-56-320.jpg)
![β
Configuring Jasmine
with Grunt Watcher
// gruntfile.js - https://gist.github.com/gpickin/1e1e7902d1d3676d23c5
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('node_modules/grunt/package.json'),
jasmine: {
all: {
src: ['js/*.js' ],
options: {
//'vendor': ['path/to/vendor/libs/*.js'],
'specs': ['specs/*.js' ]
}
}
},](https://image.slidesharecdn.com/2016-devobj-testable-js-160620165837/85/How-do-I-write-Testable-Javascript-Presented-at-dev-Objective-June-16-2016-60-320.jpg)
![β
Configuring Jasmine
with Grunt Watcher
// gruntfile.js part 2
watch: {
js: {
files: [
'js/*.js',
'specs/*.js',
],
tasks: ['jasmine:all']
}
}
});](https://image.slidesharecdn.com/2016-devobj-testable-js-160620165837/85/How-do-I-write-Testable-Javascript-Presented-at-dev-Objective-June-16-2016-61-320.jpg)
How do I write Testable Javascript - Presented at dev.Objective() June 16, 2016
- 1. β How do I write Testable Javascript?
- 2. β Agenda β Who Am I? β State of the Room? β Ways to test Javascript? β Different Testing Environments? β Overview of Testing Tools β Using Testing in your Workflow β Spaghetti Javascript β Refactor Spaghetti into Testable Javascript β Installing Jasmine + Live Demo
- 3. β Who Am I? β Gavin Pickin β developing Web Apps since late 90s βOrtus Solutions Software Consultant βContentBox Evangelist β What else do you need to know? βCFMLRepo.com http://www.cfmlrepo.com βBlog - http://www.gpickin.com βTwitter β http://twitter.com/gpickin βGithub - https://github.com/gpickin β Lets get on with the show.
- 4. β State of the Room β A few questions for you guys β If you have arms, use them.
- 5. β State of the Room Testing? Whatβs testing?
- 6. β State of the Room Yeah, Iβve heard of it. Why do you think Iβm here?
- 7. β State of the Room Yes I know I should be testing, but Iβm not sure how to do it
- 8. β State of the Room My Boss and my Customers wouldnβt let me
- 9. β State of the Room Iβm a tester
- 10. β State of the Room Iβm a test writing ninja Call me Majano, Luis Majano
- 11. β Ways to Test your Code β Click around in the browser yourself β Setup Selenium / Web Driver to click around for you β Structured Programmatic Tests
- 13. β Types of Testing β Black/White Box β Unit Testing β Integration Testing β Functional Tests β System Tests β End to End Tests β Sanity Testing β Regression Test β Acceptance Tests β Load Testing β Stress Test β Performance Tests β Usability Tests β + More
- 15. β Cost of a Bug The bug will cost one way or another
- 17. β Integration Testing β Integration Tests several of the pieces together β Most of the types of tests are variations of an Integration Test β Can include mocks but can full end to end tests including DB / APIs
- 18. β Unit Testing
- 19. β Unit Testing βunit testing is a software verification and validation method in which a programmer tests if individual units of source code are fit for use. A unit is the smallest testable part of an applicationβ - wikipedia
- 20. β Unit Testing β Can improve code quality -> quick error discovery β Code confidence via immediate verification β Can expose high coupling β Will encourage refactoring to produce > testable code β Remember: Testing is all about behavior and expectations
- 21. β Styles β TDD vs BDD β TDD = Test Driven Development βWrite Tests βRun them and they Fail βWrite Functions to Fulfill the Tests βTests should pass βRefactor in confidence β Test focus on Functionality
- 22. β Styles β TDD vs BDD β BDD = Behavior Driven Development Actually similar to TDD except: β Focuses on Behavior and Specifications β Specs (tests) are fluent and readable β Readability makes them great for all levels of testing in the organization β Hard to find TDD examples in JS that are not using BDD describe and it blocks
- 23. β TDD Example Test( βEmail address must not be blankβ, function(){ notEqual(email, ββ, "failed"); });
- 24. β BDD Example Describe( βEmail Addressβ, function(){ It(βshould not be blankβ, function(){ expect(email).not.toBe(ββ); }); });
- 28. β Different Testing Environments? NodeJS - CLI In the Browser
- 29. β Overview of Testing Tools β There are a few choices
- 30. β Main Testing Players β Jasmine, Mocha and QUnit
- 31. β Jasmine β Jasmine comes ready to go out of the box β Fluent Syntax β BDD Style β Includes lots of matchers β Has spies included β Very popular, lots of support β Angular uses Jasmine with Karma (CLI) β Headless running and plays well with CI servers
- 32. β Jasmine - Cons β Async testing in 1.3 can be a headache β Expects *spec.js suffix for test files βThis can be modified depending on how you are running the tests
- 33. β Jasmine β Sample Test describe("Hello world function", function() { it(βcontains the word world", function() { expect(helloWorld()).toContain("world"); }); });
- 34. β Mochaβ Simple Setup β Simple Async testing β Works great with other Assertion libraries like Chai ( not included ) β Solid Support with CI Servers, with Plugins for others β Opinion says Mocha blazing the trail for new features
- 35. β Mocha - Cons β Requires other Libraries for key features βNo Assertion Library included βNo Mocking / Spied included βNeed to create the runner manually β Newer to the game so not as popular or supported as others but gaining traction.
- 36. β Mocha β BDD Sample Test var expect = require('chai').expect; describe(βHello World Function', function(){ it('should contain the word world', function(){ expect(helloWorld()).to.contain(βworld'); }) })
- 37. β QUnit β The oldest of the main testing frameworks β Is popular due to use in jQuery and age β Emberβs default Unit testing Framework
- 38. β QUnit - Cons β Development slowed down since 2013 (but still under development) β Syntax β No BDD style β Assertion libraries β limited matchers
- 39. β QUnit β Sample Test QUnit.test( "ok test", function( assert ) { assert.ok( true, "true succeeds" ); assert.ok( "non-empty", "non-empty string succeeds" ); assert.ok( false, "false fails" ); assert.ok( 0, "0 fails" ); assert.ok( NaN, "NaN fails" ); assert.ok( "", "empty string fails" ); assert.ok( null, "null fails" ); assert.ok( undefined, "undefined fails" ); });
- 40. β Spaghetti Javascript Photo Credit β Kombination http://www.kombination.co.za/wp-content/uploads/2012/10/baby_w_spaghetti_mess_4987941.jpg
- 41. β Spaghetti Javascript Example If we have time at the end
- 43. β Refactoring Spaghetti β Things to refactor to make your code testable βCode should not be one big chunk of Javascript in onReady() βDeep nested callbacks & Anon functions cannot easily be singled out and tested βRemove Tight Coupling β DOM access for example
- 44. β Object Literals var personObjLit = { ssn: βxxxxxxxx', age: '35', name: 'Gavin Pickin', getAge: function(){ return this.age; }, getName: function() { return this.name; } };
- 45. β Module Pattern var personObjLit2 = function() { ssn = βxxxxxxx'; age = '35'; name = 'Gavin Pickinβ; return { getAge: function(){ return age; }, getName: function() { return name; } }; };
- 46. β Using Testing in your Workflow β Using HTML Test Runners βKeep a Browser open βF5 refresh tests
- 47. β Command Line Tests β Run Jasmine β manual βRun tests at the end of each section of work β Run Grunt-Watch β automatic βRuns Jasmine on every file change βGrunt can run other tasks as well, minification etc
- 48. β Testing in your IDE β Browser Views βEclipse allows you to open files in web view β uses HTML Runner β Run Jasmine / Grunt / Karma in IDE Console βEasy to setup β See Demoβ Sublime Text 2
- 49. β Live Demo and Examples *Install / Run Jasmine Standalone for Browser *Install / Run Jasmine with NodeJs *Install/ Run Jasmine with Grunt Watch *Install / Run Grunt Watch inside Sublime Text 2
- 50. β Install / Run Jasmine for In- Browser Testing Download standalone package from Github (I have 2.1.3) https://github.com/jasmine/jasmine/tree/master/dist Unzip into your /tests folder Run /tests/SpecRunner.html to see example tests
- 52. β Installing Jasmine for in Browser Testing
- 53. β SpecRunner Setup Jasmine Browser Test <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jasmine Spec Runner v2.1.3</title> <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.1.3/jasmine_favicon.png"> <link rel="stylesheet" href="lib/jasmine-2.1.3/jasmine.cssβ> <script src="lib/jasmine-2.1.3/jasmine.js"></script> <script src="lib/jasmine-2.1.3/jasmine-html.js"></script> <script src="lib/jasmine-2.1.3/boot.js"></script> <!-- include source files here... --> <script src="../js/services/loginService.js"></script> <!-- include spec files here... --> <script src="spec/loginServiceSpec.js"></script> </head> <body> </body> </html>
- 54. β Installing Jasmine with NodeJS Assuming you have NodeJs Installedβ¦ install Jasmine $ npm install jasmine [email protected] node_modules/jasmine βββ [email protected] βββ [email protected] βββ [email protected] ([email protected], [email protected])
- 55. β Installing Jasmine with NodeJS Once Jasmine is installed in your project $ Jasmine init
- 56. β Installing Jasmine with NodeJS Edit Jasmine.json to update Locations for Spec Files and Helper Files { "spec_dir": "spec", "spec_files": [ "**/*[sS]pec.js" ], "helpers": [ "helpers/**/*.js" ] }
- 57. β Running Jasmine Tests with NodeJS$ Jasmine Started F Failures: 1) A suite contains spec with an expectation Message: Expected true to be false. Stack: Error: Expected true to be false. at Object.<anonymous> (/Users/gavinpickin/Dropbox/Apps/testApp/www/spec/test_spec.js:3: 18) 1 spec, 1 failure Finished in 0.009 seconds
- 58. β Running Jasmine Tests with NodeJS β Jasmine-Node is great for Node β Jasmine Node doesnβt have a headless browser β Hard to test Browser code β So what should I use?
- 59. β Installing Jasmine with Grunt Watcher β Install Grunt npm install grunt β Install Grunt β Jasmine npm install grunt-contrib-jasmine β Install Grunt β Watch npm install grunt-contrib-watch β Note: On Mac, I also needed to install Grunt CLI npm install βg grunt-cli
- 60. β Configuring Jasmine with Grunt Watcher // gruntfile.js - https://gist.github.com/gpickin/1e1e7902d1d3676d23c5 module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('node_modules/grunt/package.json'), jasmine: { all: { src: ['js/*.js' ], options: { //'vendor': ['path/to/vendor/libs/*.js'], 'specs': ['specs/*.js' ] } } },
- 61. β Configuring Jasmine with Grunt Watcher // gruntfile.js part 2 watch: { js: { files: [ 'js/*.js', 'specs/*.js', ], tasks: ['jasmine:all'] } } });
- 62. β Configuring Jasmine with Grunt Watcher // gruntfile.js part 3 grunt.loadNpmTasks('grunt-contrib-jasmine'); grunt.loadNpmTasks('grunt-contrib-watch'); };
- 63. β Example Spec Jasmine with Grunt Watcher describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });
- 64. β Running Jasmine with Grunt Watcher
- 65. β Running Jasmine with Grunt Watcher
- 66. β Running in Sublime Text 2 β Install PackageControl into Sublime Text β Install Grunt from PackageControl βhttps://packagecontrol.io/packages/Grunt β Update Grunt Sublime Settings for paths { "exec_args": { "path": "/bin:/usr/bin:/usr/local/binβ } } β Then Command Shift P β grunt
- 67. β Running in Sublime Text 2
- 68. β Refactoring Spaghetti β Lets look at some code β This isnβt BEST PRACTICE, its BETTER PRACTICE than you were doing β Its not really refactoring if you donβt have tests, its βmoving code and asking for troubleβ