Javascript tdd byandreapaciolla
- 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.. }); }));
- 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