How do I write Testable Javascript so I can Test my CF API on Server and Client

* *Who Am I? *State of the Room? *CF API *Ways to test your API? *Overview of Testing Tools *Using Testing in your Workflow *Installing Jasmine *Installing Testbox *Live Demo

* *Gavin Pickin – developing Web Apps since late 90s *New Addition to Ortus Solutions *ContentBox Evangelist *What else do you need to know? *Blog - http://www.gpickin.com *Twitter – http://twitter.com/gpickin *Github - https://github.com/gpickin *Lets get on with the show.

* *A few questions for you guys *If you have arms, use them.

* *Most CF Apps are moving towards providing an API for multiple consumers *CF has many REST API Solutions and even more with CF 12 coming soon *Built in CF *Built in Railo/Lucee *Coldbox API *Taffy

* *Click around in the browser yourself *Setup Selenium / Web Driver to click around for you *Structured Programmatic Tests

* *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

* *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

* “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

* *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

* *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

* *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

* Test( ‘Email address must not be blank’, function(){ notEqual(email, “”, "failed"); });

* Describe( ‘Email Address’, function(){ It(‘should not be blank’, function(){ expect(email).not.toBe(“”); }); });

* expect(true).toBe(true); expect(true).toBe(true); expect(true).toBe(true); expect(true).toBe(true);

* expect(true).not.toBe(true); expect(true).not.toBe(true); expect(true).not.toBe(true); expect(true).not.toBe(true); expect(true).not.toBe(true);

* expect(true).toBe(true); expect(a).not.toBe(null); expect(a).toEqual(12); expect(message).toMatch(/bar/); expect(message).toMatch("bar"); expect(message).not.toMatch(/quux/); expect(a.foo).toBeDefined(); expect(a.bar).not.toBeDefined();

* *MxUnit was the standard *TestBox is the new standard *Other options

* TestBox is a next generation testing framework for ColdFusion (CFML) that is based on BDD (Behavior Driven Development) for providing a clean obvious syntax for writing tests. It contains not only a testing framework, runner, assertions and expectations library but also ships with MockBox, A Mocking & Stubbing Framework,. It also supports xUnit style of testing and MXUnit compatibilities.

* function testHelloWorld(){ $assert.includes( helloWorld(), ”world" ); }

* describe("Hello world function", function() { it(”contains the word world", function() { expect(helloWorld()).toContain("world"); }); });

* feature( "Box Size", function(){ describe( "In order to know what size box I need As a distribution manager I want to know the volume of the box", function(){ scenario( "Get box volume", function(){ given( "I have entered a width of 20 And a height of 30 And a depth of 40", function(){ when( "I run the calculation", function(){ then( "the result should be 24000", function(){ // call the method with the arguments and test the outcome expect( myObject.myFunction(20,30,40) ).toBe( 24000 ); }); });

* *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

* *Async testing in 1.3 can be a headache *Async testing in 2.0 is hard to find blog posts on (I need to write one) *Expects *spec.js suffix for test files *This can be modified depending on how you are running the tests

* *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

* *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.

* var expect = require('chai').expect; describe(’Hello World Function', function(){ it('should contain the word world', function(){ expect(helloWorld()).to.contain(’world'); }) })

* *The oldest of the main testing frameworks *Is popular due to use in jQuery and age *Ember’s default Unit testing Framework

* *Development slowed down since 2013 (but still under development) *Syntax – No BDD style *Assertion libraries – limited matchers

* 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" ); });

* Photo Credit – Kombination http://www.kombination.co.za/wp-content/uploads/2012/10/baby_w_spaghetti_mess_4987941.jpg

* *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

* *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” Kev McCabe

* var personObjLit = { ssn: ’xxxxxxxx', age: '35', name: 'Gavin Pickin', getAge: function(){ return this.age; }, getName: function() { return this.name; } };

* var personObjLit2 = function() { ssn = ’xxxxxxx'; age = '35'; name = 'Gavin Pickin’; return { getAge: function(){ return age; }, getName: function() { return name; } }; };

* *Using HTML Test Runners *Keep a Browser open *F5 refresh 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

* *Browser Views *Eclipse allows you to open files in web view – uses HTML Runner *Run Jasmine / Grunt / Karma in IDE Console *Fairly Easy to setup *See Demo– Sublime Text 2 (if we have time)

* *Install / Run Jasmine Standalone for Browser *Install / Run Jasmine with NodeJs *Install / Run Jasmine with Grunt Watch *Install / Run Testbox in Browser *Install / Run Testbox with Grunt Watch *Install / Run Grunt Watch inside Sublime Text 2

* 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

* http://www.testableapi.local.com:8504/tests/SpecRunner.html

* <!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>  <script src="../js/services/loginService.js"></script>  <script src="spec/loginServiceSpec.js"></script> </head> <body> </body> </html>

* Assuming you have NodeJs Installed… install Jasmine $ npm install jasmine jasmine@2.2.1 node_modules/jasmine ├── exit@0.1.2 ├── jasmine-core@2.2.0 └── glob@3.2.11 (inherits@2.0.1, minimatch@0.3.0)

* Once Jasmine is installed in your project $ Jasmine init

* Edit Jasmine.json to update Locations for Spec Files and Helper Files { "spec_dir": "spec", "spec_files": [ "**/*[sS]pec.js" ], "helpers": [ "helpers/**/*.js" ] }

* $ 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

* *Jasmine-Node is great for Node *Jasmine Node doesn’t have a headless browser *Hard to test Browser code *So what should I use?

* *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

* // 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' ], '--web-security': false } }

* // gruntfile.js part 2 watch: { js: { files: [ 'js/*.js', 'specs/*.js', ], tasks: ['jasmine:all'] } } });

* // gruntfile.js part 3 grunt.loadNpmTasks('grunt-contrib-jasmine'); grunt.loadNpmTasks('grunt-contrib-watch'); };

* describe("Forgotten Password Form", function() { it("should warn you if the email is invalid before making Ajax Call", function() { expect( isEmailInputInvalid('') ).toBe(true); expect( isEmailInputInvalid('dddddddddd') ).toBe(true); expect( isEmailInputInvalid('dddddd@') ).toBe(true); expect( isEmailInputInvalid('dddddd@ddddd') ).toBe(true); expect( isEmailInputInvalid('dddddd@ddddddd.') ).toBe(true); expect( isEmailInputInvalid('dddddd@ddddddd.com') ).toBe(false); }); });

* describe("Login Form", function() { it("should set status correct status message with successful Ajax Response", function() { spyOn( window, "setStatusMessage"); processLoginAjaxDone('{"RESULT":"200"}'); expect(setStatusMessage).toHaveBeenCalled(); expect(setStatusMessage).toHaveBeenCalledWith( ‘TARDIS Access Granted - Please wait for the Doctor to take you for a spin'); }); });

* describe("Login API", function() { it("should return a failing Ajax Response", function() { spyOn( window, "processLoginAjaxDone"); loginButtonEventHandlerProcess( 'gavin@gavin.co.nz', 'password'); expect(processLoginAjaxDone).toHaveBeenCalled(); expect(processLoginAjaxDone).toHaveBeenCalledWith( ‘{"RESULT":400}'); expect(processLoginAjaxFail).not.toHaveBeenCalled(); }); });

* *You want Unit Tests to test the unit and not it’s dependencies *You want Unit Tests to run quick *You should mock the API in the Ajax call *But we want to test the API *So essentially, we’re writing an integration test.

* describe("Login API", function() { beforeEach(function( done ) { spyOn( window, "processLoginAjaxDone").and.callFake( function(){ done(); }); spyOn( window, "processLoginAjaxFail").and.callFake( function(){ done(); }); loginButtonEventHandlerProcess('gavin@gavin.co.nz', 'password'); }); it("should return a failing Ajax Response", function() { }); });

* describe("Login API", function() { beforeEach(function( done ) { … }); it("should return a failing Ajax Response", function() { expect(processLoginAjaxDone).toHaveBeenCalled(); expect(processLoginAjaxDone).toHaveBeenCalledWith( '{"RESULT":400}'); expect(processLoginAjaxFail).not.toHaveBeenCalled(); }); });

* *Install Testbox – Thanks to Commandbox *box install testbox *Decide how you want to run Testbox

* *<cfsetting showDebugOutput="false"> * *<cfparam name="url.reporter" default="simple"> *<cfparam name="url.directory" default="tests.specs"> *<cfparam name="url.recurse" default="true" type="boolean"> *<cfparam name="url.bundles" default=""> *<cfparam name="url.labels" default=""> * *<cfinclude template="/testbox/system/runners/HTMLRunner.cfm" >

* // tests/specs/CFCTest.cfc component extends="testbox.system.BaseSpec" { function run() { it( "will error with incorrect login", function(){ var oTest = new cfcs.userServiceRemote(); expect( oTest.login( 'gavin@gavin.com', 'topsecret').result ).toBe('400'); }); } }

* // tests/specs/APITest.cfc component extends="testbox.system.BaseSpec" { function run() { describe("userService API Login", function(){ it( "will error with incorrect login", function(){ var email = "gavin@gavin.com"; var password = "topsecret”; var result = ""; http url="http://www.testableapi.local.com:8504/cfcs/userServiceRemote.cfc?metho d=login&email=#email#&password=#password#" result="result”; expect( DeserializeJSON(result.filecontent).result ).toBe('400'); }); }); } }

* *Install Testbox Runner – Thanks Sean Coyne *npm install testbox-runner *Install Grunt Shell *npm install grunt-shell *Add Grunt Configuration

* module.exports = function (grunt) { grunt.loadNpmTasks('grunt-shell'); grunt.initConfig({ … }) }

* Watch: { … cfml: { files: [ "cfcs/*.cfc"], tasks: [ "testbox" ] } }

* shell: { testbox: { command: "./node_modules/testbox- runner/index.js --colors --runner http://www.testableapi.local.com:8504/tests/r unner.cfm --directory /tests/specs --recurse true” } }

* grunt.registerTask("testbox", [ "shell:testbox" ]); grunt.loadNpmTasks('grunt-contrib-jasmine'); grunt.loadNpmTasks('grunt-contrib-watch');

* js: { files: [ 'js/*.js', 'specs/*.js', "cfcs/*.cfc” ], tasks: ['jasmine:all'] },

* Jasmine https://gist.github.com/gpickin/1e1e7902d1d3 676d23c5 Jasmine + Testbox https://gist.github.com/gpickin/9fc82df3667ee b63c7e7

* *Testbox has several runners, you have seen the HTML one, this Runner uses the JSON runner and then formats it. *http://www.testableapi.local.com:8504/tests/run ner.cfm?reporter=JSON&directory=%2Ftests%2Fspec s&recurse=true

* *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

* *Any questions? *Interesting Link: https://medium.com/@Zyklus/beautiful-seamless- javascript-testing-in-10-minutes-2a743637035b

* https://www.ortussolutions.com/odw FREE ONLINE

How do I write Testable Javascript so I can Test my CF API on Server and Client

More Related Content

What's hot

Similar to How do I write Testable Javascript so I can Test my CF API on Server and Client

More from Gavin Pickin

Recently uploaded

How do I write Testable Javascript so I can Test my CF API on Server and Client