A brief introduction to javascript test driven development (TDD) towards several point of views by using qUnit, Karma & Jasmine, NodeJS tape module and custom frameworks.

1. Javascript
Test Driven Development
by
A n d r ea P a c i o l l a
15 Feb 2016

2. 1. What does testing mean?
2. AngularJS Environment: Karma & Jasmine
3. Testing Angular - TDD in practice
4. Protractor (preview)
TABLE OF CONTENTS

3. WHAT DOES TESTING MEAN?

4. “I will just launch the app and check if everything works.
We have never had any problem this way. ”

5. “I will just launch the app and check if everything works.
We have never had any problem this way. ”
-- No One Ever

6. Unit testing improves code’s orthogonality.

7. Unit testing VS E2E testing

8. Test with simple javascript:
custom test framework with no DOM dependencies

9. Simple javascript test with Q-Unit
( functional qunit & DOM manipulation qunit-fixture )

10. Test with nodeJS

11. Test with nodeJS
- Asserts

12. Test with nodeJS
- Asserts
- Testing Anything Protocol (TAP) & tape module

13. (Fake) TDD
Keep fixing code until you cannot see any bugs by using:
- Console.log
- Dump
- Alert
- Debugger

14. (REAL) TDD
Write test while developing, test by using dump(), breakpoint,
autotest once the code has been updated, keep track of bug
fixing, test against as many browsers as you can, wait for your
tests to tell you all has gone.

15. AngularJS Environment: Karma & Jasmine

16. Karma Task Runner
Setting up
Conf File
Use by CLI & use by IDE

17. Jasmine Behaviour-Driven Development
beforeEach & afterEach – set up pre & post conditions and will run
before(after) every test in its block.
Describe – wraps a block of related tests. Descriptive name.
It – meant to be read as a sentence
Expect - allows to make assertions (1 assertion per it block)
spies (toHaveBeenCalled)
toBe & toContain

18. Testing Angular - TDD in practice

19. setting up
bower install angular angular-mocks
angular mocks: contains useful mocking tools to easily test angularJS
modules. Just include the angular-mocks.js file into your karma-conf.js

20. Test controllers
Hold an istance of the ctrl, init a scope & test expectations
// get the module that contain the controller
beforeEach(module('todolist'));
// inject the $controller and the rootScope
beforeEach(inject(function ($rootScope, $controller) {
// create a fresh new scope for the controller
scope = $rootScope.$new();
// create a controller with this scope
ctrl = $controller('TodoListController',{$scope: scope});
}));

21. Test services
use $injector to get an instance of the service
// get the module that contain the service
beforeEach(module('todolist'));
// inject the $injector
beforeEach(inject(function ($injector) {
// use the $injector to get a hold on the service
service = $injector.get(‘ServiceName’);
}));

22. test directive
Create an element which will host the directive and compile it
with a scope. Trigg the digest too.
// get the module that contain the service
beforeEach(module('todolist'));
// inject the $compile service and the $rootScope
beforeEach(inject(function ($compile, $rootScope) {
// use the $rootScope to create a scope for the directive
scope = $rootScope;
// create an angular element from a HTML string
element = angular.element(‘<div my-directive ></div>’);
// compile the element with the scope
$compile(element)(scope);
scope.$apply()
}));

23. Test http requests
$httpBackend as fake backend implementation
Given some particular state of my app
set up state, mock or spy functions if necessary
When I call some method
call the method you’re testing
Then that method behaves in a certain way
verify the method did the right thing

24. Test http requests
// inject the $httpBackend service and the $rootScope
beforeEach(inject(function ($httpBackend) {
// use the $rootScope to create a scope for the directive
httpBackend = $httpBackend;
it("something that make a request", function() {
// expect a request
httpBackend.expectGET(‘api’).respond(200);
// code that make a request
httpBackend.flush(); // do`nt forget to flush..
});
}));

25. Testing with Yeoman

26. Testing with Gulp

27. What about
Mocha, Chai & Sinon?

28. Mocha (https://mochajs.org ) - is a test framework. Mocha sets
up and describes test suites
Chai (http://chaijs.com ) - is an expectation framework. It
provides convenient helpers to perform all kinds of assertions
against your JavaScript code.
Sinon (http://sinonjs.org ) - is a great JavaScript library for
stubbing and mocking such external dependencies and to keep
control on side effects against them. It helps us to create a
sandbox environment.

29. Protractor

30. E2E tests with protractor
Each test is known as integration test, tested directly against
active app

31. Thank you