Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Testing Best Practices - An Expected Journey

4,620 views

Published on

This slide focus on the good reasons for writing unit tests for testing ui.
Much like you're testing ui manually, you can have simple minimal code doing that for you.

Published in: Internet

UI Testing Best Practices - An Expected Journey

  1. 1. UI Testing An unexpected Journey
  2. 2. Oren Farhi JS Engineer (2006) JS Group Leader @Tikal Speaker (Israel & World Wide) github.com/orizens orizens.com JSes6 B
  3. 3. Outline 1. What is UI testing 2. Why Should I Test UI 3. Hands On & Best Practices Patterns a. Unit Testing b. End To End Tests (E2E)
  4. 4. Demo App: Echoes Player http://echotu.be (available as a chrome app) github.com/orizens/echoes/tree/angular
  5. 5. What is UI Testing perspective
  6. 6. UI Testing - Who Should Give a $#%&? developer product end user qa / testers
  7. 7. Why Should I Test UI? Why ?
  8. 8. In The Past... 1. Getting Requirements 2. Started writing code 3. now the cycle begins:
  9. 9. Save Code
  10. 10. Go To Browser & Refresh
  11. 11. Open Debugger
  12. 12. 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...
  13. 13. debugging, checking and repeating this process each time makes me go: ‘ahhhh’
  14. 14. I Should Write Test For UI Because: 4 reasons
  15. 15. We’ve been doing that from the beginning (maybe not with code)
  16. 16. Absence of Human Testers For Every Step
  17. 17. Automate the Dev & Tests Process
  18. 18. “Can You Make Sure Everything works?”
  19. 19. A UI Test = expecting something to be What do we check anyway? 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
  20. 20. Tools For Testing JS Jasmine, Karma, phantom
  21. 21. What Is Jasmine.js bdd js testing framework for testing js
  22. 22. 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
  23. 23. Jasmine Syntax - BDD Style describe('Gandalf the Gray', function () { it("should stop balrog passing the bridge", function() {}); it("should save the hobbits when in danger", function() {}); })
  24. 24. What Is Karma Test Runner automate: running tests, ci (jenkins, teamcity..), multiple browsers, by angularjs team
  25. 25. Phantom.js - Headless Webkit scriptable browser: includes js, DOM, routing etc..
  26. 26. Showtime 1 - Dropdown testing dropdown directive in angular
  27. 27. Testing a Bootstrap Dropdown <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  28. 28. HTML - container rendered it('should render a dropdown element', function () { expect(element.hasClass('dropdown')).toBeTruthy(); }); <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  29. 29. HTML - items rendered it("should render items if given presets", function() { expect( element.find('ul li').length) .toBe( scope.presets.length ); }); <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  30. 30. HTML - Content is rendered it("should render the label according to the 'label' attribute", function() { expect( element.find('.dropdown-toggle').text().trim()) .toBe('Preset') }); <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  31. 31. 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(); }); <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  32. 32. 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]); }); <e-dropdown label="Preset" items="presets" on-select="onPresetChange(item)" icon="tag" ></e-dropdown>
  33. 33. Showtime #2 - Testing Ajax mocks and stubs using angularjs services
  34. 34. Preparing Mocks var mockData = window.mocks[‘video.items.mock’]; var url = /.+search.*/ karma-json-fixtures-preprocessor add to json paths to configuration of: files: [ '../tests/mocks/**/*mock.json' ] preprocessor: { '../tests/mocks/**/*mock.json': ['json_fixtures'] }
  35. 35. 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); })
  36. 36. Testing Ajax stubs & mocks
  37. 37. Mocking Ajax Call describe("Media Info :", function() {...}) it("should update the video's title when video has changed", function() { var video = mockMediaInfoItems.items[0]; httpBackend.whenGET(/.+videos.*/).respond(mockMediaInfo); YoutubePlayerSettings.playVideoId(video); scope.$apply(); expect(scope.vm.video.title).toEqual(video.snippet.title); });
  38. 38. End to End Testing (E2E) towards the rest of the world
  39. 39. What is E2E tests few pieces together regarding ui: web ui = > rest of the world
  40. 40. E2E for JS for angular.js JS syntax all browsers for any js app Gherkin syntax all browsers
  41. 41. 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
  42. 42. PioneerJS “When” Example this.When(/^I search for "([^"]*)"$/, function(value){ var MediaSearch = this.Widget.extend({ root: "#media-search", setSearchQuery: function (val) { return this.fill(val); } }) var search = new MediaSearch(); return this.driver.sleep(10000).then(function(){ search.sendKeys('', Driver.Key.ENTER).then(function(){ search.setSearchQuery(value); return search.sendKeys(Driver.Key.ENTER); }); }); });
  43. 43. So - What are the benefits? Show me the money
  44. 44. What is Good with UI Unit Testing ● Adding Features won’t break code’s behaviour ● promotes writing modular logics ● Forces writing high quality code - decoupling ● documentation - code intention & functional behavior
  45. 45. The End Q & A

×