UI Testing Best Practices - An Expected Journey

usecase of why writing tests for ui for http://echotu.be
The examples are shown with angular, jasmine.js, karma and phantom.

Transcript

1. UI Testing An unexpected Journey
2. Oren Farhi JS Engineer (2006) JS Group Leader @Tikal Speaker (Israel & World Wide) github.com/orizens orizens.com JS es6 B
3. Outline 1. What is UI testing 2. Why Should I Test UI 3. Best Practices Patterns Demo App: Echoes Player http://echotu.be (available as a chrome app) github.com/orizens/echoes/tree/angular
4. What is UI Testing perspective
5. UI Testing - Who Should Give a $#%&? developer product end user qa / testers
6. Why Should I Test UI? Why ?
7. In The Past... 1. Getting Requirements 2. Started writing code 3. now the cycle begins:
8. Save Code
9. Go To Browser & Refresh
10. Open Debugger
11. Automating The Debug Process 1. Add some “watches” 2. Add some “truthy” watches 3. Refresh 4. Try some other input 5. Repeat the “clicks”, “enter”, “keys” in input 6. Refresh
12. debugging, checking and repeating this process each time makes me go: ‘ahhhh’
13. I Should Write Test For UI Because: 4 reasons
14. We’ve been doing that from the beginning (maybe not with code)
15. Absence of Human Testers For Every Step
16. Automate the Dev & Tests Process
17. “Can You Make Sure Everything works?”
18. A UI Test = expecting something to be The Goals of debugging are: 1. I expect something to be with a value 2. I expect something to be visible on the DOM 3. I expect that click will change the search 4. I expect that a right click will show a context menu, with user permissions visible 5. I expect “<grid model=”items”>” to render a data table in the DOM
19. Tools For Testing JS Jasmine, Karma, phantom
20. What Is Jasmine.js bdd js testing framework for testing js
21. Jasmine.js by Pivotal it’s a Standalone BDD framework for testing JS code available on github 1. Suites - describe() 2. Specs - it() 3. Expectations -expect() 4. Matchers - .not/.toBe() • Spies • Stubs • Async • skip tests - xit, xdescribe
22. What is BDD? Behavior Driven Development business perspective - story of the code and its goal (stop Balrog from passing)
23. What Is Karma Test Runner automate: running tests, ci, multiple browsers, by angularjs team
24. Phantom.js - Headless Webkit scriptable browser: includes js, DOM, routing etc..
25. Showtime 1 - Dropdown testing dropdown directive in angular
26. Testing a Bootstrap Dropdown <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
27. HTML - container rendered it('should render a dropdown element', function () { expect(element.hasClass('dropdown')).toBeTruthy(); });
28. HTML - items rendered it("should render items if given presets", function() { expect( element.find('ul li').length) .toBe( scope.presets.length ); });
29. HTML - Content is rendered it("should render the label according to the 'label' attribute", function() { expect( element.find('.dropdown-toggle').text().trim()) .toBe('Preset') });
30. Functionality - function called on clicked it("should call a function when select has changed",function() { spyOn(scope, 'onPresetChange'); element.isolateScope().handleClick(scope.presets[0]); expect(scope.onPresetChange).toHaveBeenCalled(); });
31. Functionality using Spy - click it("should call a function with the selected item when select has changed", function() { spyOn(scope, 'onPresetChange'); element.isolateScope().handleClick(scope.presets[0]); expect(scope.onPresetChange).toHaveBeenCalledWith(scope.presets [0]); });
32. Showtime #2 - Testing Ajax mocks and stubs using angularjs services
33. Preparing Mocks var mockData = { items: [{snippet: 3}] }; var url = "https://www.googleapis.com/youtube/v3/search" + "? key=AIzaSyB7fFNreY1UzX1la5arnnAi3ZOyvqOV6kk&maxResults=50&part=s nippet,id";
34. Functionality using Spy and Fake it("set the feed type when changed in YoutubeSearch and perform search", function(){ httpBackend.whenGET(url).respond(mockData); spyOn(scope, 'searchYoutube').and.returnValue('done') spyOn(YoutubeSearchSrv, 'setType').and.callFake(function(){ return 'set'; }); rootScope.$broadcast('feed-type-changed', 'playlist'); scope.$digest(); expect(YoutubeSearchSrv.setType).toHaveBeenCalled(); expect(YoutubeSearchSrv.setType.calls.count()).toEqual(1); expect(scope.searchYoutube).toHaveBeenCalled(); expect(scope.searchYoutube.calls.count()).toEqual(1); })
35. Testing Ajax stubs & mocks
36. Mocking Ajax Call it('should set videos after successful search', function() { httpBackend.whenGET(url).respond(mockData); scope.searchYoutube(); httpBackend.flush(); expect(scope.videos).toBeDefined(); expect(scope.videos.length).toBe(1); });
37. End to End Testing (E2E) towards the rest of the world
38. What is E2E tests few pieces together regarding ui: web ui = > rest of the world
39. E2E with Pioneer.js Feature: Simple Feature Background: Given I visit Echoes Player Scenario: Entering Information When I search for "alice in chains live" Then I should see 50 results
40. So - What are the benefits? Show me the money
41. What is Good with UI Unit Testing • Adding Features won’t break code’s behaviour • promotes writing modular logics • documentation - code intention & functional behavior • Forces writing high quality code - decoupling
42. The End Q & A