Download as PDF, PPTX
Uploaded byMichael Haberman
Unit-testing and E2E testing in JS
Unit testing and end-to-end (E2E) testing are important types of automated testing for JavaScript applications. Unit tests focus on testing individual functions or components in isolation to catch bugs, while E2E tests ensure that user flows work as expected by interacting with the application through a browser. The presentation discussed setting up testing frameworks like Karma and Jasmine for unit testing and Protractor for E2E testing. It also covered writing testable code, handling dependencies through dependency injection, and selecting elements and interacting with them during E2E tests.
Unit-testing and E2E testing in JS
- 1. JS Unit Testing& E2E Testing Michael Haberman Join the conversa.on on Twi1er: @DevWeek #DW2015
- 2. It’s all aboutinsurance! Everything that is important or expensive we cover with insurance
- 3. What kind ofinsurance can we get? Manual testing Automation testing
- 4. QA Human arenot 100% reliable
- 5. QA test onlywhat they see
- 6. Trying the catthing at home
- 7. Can you trustthe developers?
- 8. Humans are notobjective They rush home They can’t find defects in their code They don’t like criticism Actually they hate criticism They forget what they did last month Actually they forget what they did yesterday We need something OBJECTIVE!
- 9. Automation testing areobjective They can provide a real objective view on our application Lets see what type of automation test can we use
- 10. Testing – ROI? Pros: ~ 40% less bugs ~ 15% more accurate requirements implementation ~ 80% less regression bugs Cons: 20% - 35% more time to invest We will find a way to leverage it
- 11. What can wetest? E2E Integra+on Test Unit Test
- 12. Our Focus UnitTesting – Single function End to End Testing - Flows
- 13. First unit testframework in JS? 2001! Why it became so popular? Cross platform
- 14. Some numbers 0 50000 100000 150000 200000 250000 Downloads last week Karma Protractor Jasmine Mocha
- 15. Example //Arrange Michael mic = new Michael(); DevWeek dw = new DevWeek(); mic.Class = dw; //Act mic.Speak(); //Assert Expect(dw.InterestLevel).toBe(10);
- 16. What would youtest? var add = function(num1, num2) { return num1 + num2; }; // test 1 var result1 = add(1,2); expect(result1).toBe(3); //test 2 var result2 = add(‘1’,’2’); expect(result2).toBe(3);
- 17. Unit Testing inJS Three players: Process to run the test Test runner Assertion library / test framework
- 18. Hosting process Thereare two options Real browser Browser simulator / driver
- 19. Test runner Providethe ability to run the test Get result (passed / failed with error) Change configuration Work with your assertion library There are many test runners! We will focus on karma
- 20. Assertion library Thesyntax you use to write the test We will use Jasmine expect(object).toBeArray(); expect(number).toBeOddNumber(); expect(function).toThrowError(); expect(date).toBeBefore(date); expect(object).toHaveBoolean(memberName); expect(string).toBeNonEmptyString();
- 21. Test environment Browser Host code and tests Karma Node JS server Connects to each browser Reports the result Browser Host code and tests Browser Host code and tests Browser Host code and tests Jasmine Provides test syntax
- 22. Demo Talked enough! Letsset up the environment
- 23. Karma setup Install– npm install karma Setup – karma init file_name Start – karma start file_name
- 24. Karma config file Frameworks – Jasmine Files – specific or pattern autoWatch Browsers – multiple is supported
- 25. Jasmine Describe –a set of tests It – a single test Expect – single expect
- 26. Jasmine - matchers Array Boolean Browser Date Functions Errors Numbers Objects Strings
- 27. How to writegood unit test? Any idea? It is not about good testing… It all about testable code
- 28. Writing testable code Isolated objects No coupling Single responsibility – separation of concern Ability to provide mock objects
- 29. Handling dependency Function saveItem(item){ var itemValidator = new itemValidator(); if(!itemValidator.validate(item)) { return false; } var fileAccess = new fileAccess(); if(!fileAccess.save(item)) { return false; } var notification = new notificationService(); notification.show(“item saved!”); return true; }
- 30. Handling dependency Function saveItem(item, itemValidator, fileAccess, notification){ if(!itemValidator.validate(item)) { return false; } if(!fileAccess.save(item)) { return false; } notification.show(“item saved!”); return true; }
- 31. DI – Dependencyinjection Container(uses mocks) Independent Component – ServiceA Depends on ServiceA -‐ ServiceB I need ServiceA instance
- 32.
- 34.
- 35. End to End Test user flow Which end to which end? BuQon click Request to server Fetch data from DB Response to client Table fills with data
- 36. End to end– test implementation The same idea: Arrange – get view from browser Act – Interact with element(click, send key, etc…) Assert – UI affected correctly We will use Protractor
- 37. Test code Arrange–browser.get Act– input.sendKeys Assert– expect… it('no items found', function() { browser.get("http://angular.github.io/angular-‐phonecat/step-‐4/app/"); var input = element(by.model('query')); input.sendKeys('Nokia'); var repeater = element(by.repeater('phone in phones')) expect(repeater).toBe(undefined); })
- 38.
- 39. Element and “by” The element get a “by” as parameter The “by” will find the element in the DOM Var element = Element(by.class(‘bold’));
- 40. Global services Browser– instance of browser Element – interaction with DOM By – finds elements Protractor – interaction with protractor : Mouse and keyboard Screen shot
- 41. Getting elements bylocators Plain html: by.id by.class Angular: by.model (ng-model) by.repeat (ng-repeat)
- 42. Act with DOMelements Click SendKeys isEnabled isSelected Submit clear
- 43. Unit Test VSE2E Unit E2E Tes+ng component Single func+on En+re applica+on Failed, what conclusion? Exact func+on in exact parameters set Could be any component related Coupling? JS implementa+on html Who can write the test Team developer (new guy) Anyone Maintenance low high Execu+on cost the func+on and related object En+re applica+on
- 44.
- 45.
- 46. Thank you! E-mail:michaelh@sela.co.il Twitter: @hab_mic Blog: http://blogs.microsoft.co.il/michaelh/