Frontend Testing Strategies

A quick overview of Unit and Integration testing for Javascript heavy front end development

Transcript

1. Frontend Testing Strategies
2. Keith Bingman www.wantering.com @kbingman
3. Demo Project https://github.com/kbingman/karma-demo
5. Writing Testable Code
6. Writing Javascript shouldn’t be any different that writing backend code Clean Code
7. Pure Functions Return a regular value for a given input
8. Pure Functions http://vimeo.com/43382919
9. Really Easy to Test
10. function square(number) { return Math.pow(number, 2); }
11. it('should return 4', function() { expect(square(2)).to.equal(4); });
12. function sayHello(name) { return 'Hello ' + name; }
13. it('should say Hello to Fred', function() { expect(sayHello(‘Fred’)).to.equal(‘Hello Fred’); });
14. Side Effects With only pure functions, we wouldn’t have very interesting applications
15. function displayGreeting(name) { var greeting = 'Hello ' + name; $('h1.greeting').text(greeting); }
16. Testing HTML with jQuery
17. <div id="starships"> <div id="ship-1"> <a href="/ships/1" class="r-action" data-edit="1"> Credibility Problem </a> 1,000,000 tonnes Wedge <a class="r-delete r-action" data-delete="1">X</a> </div> <div id="ship-2"> <a href="/ships/2" class="r-action" data-edit="2"> Not Invented Here </a> 5,000 tonnes Needle <a class="r-delete r-action" data-delete="2">X</a> </div> </div>
18. it('should render each ships name', function() { var $ships = component.$node.find('.r-ship-name'); ! $ships.each(function(i, a) { var name = $(a).text().trim(); expect(name).to.equal(mocks.starships[i].name); }); });
19. Mocha and Jasmine
22. Chai
24. Karma Test Runner
28. Demo
29. Integration Testing
31. Wantering
32. Solr Postgres Django / Python MongoDB Node.js Backbone jQuery
34. Headless vs Automated Browser Testing
38. Nightwatch.js
39. var settings = require('./lib/settings'); ! module.exports = { 'Brands List - From Home Page' : function(browser) { browser .url(settings.url) .click('a[href="/brands/"]') .verify.containsText('.listTitle','Brands') .verify.containsText('.letterNavItem:nth-child(1) a', '#') .verify.containsText('.letterNavItem:nth-child(2) a', 'A') .verify.containsText('.letterNavItem:nth-child(4) a', 'C') .verify.containsText('.letterNavItem:nth-child(4) a', 'C') .click('.letterNavItem:nth-child(2) a') .verify.containsText('.groupListWrap', 'ALEXA WAGNER'); } ! }
40. Gherkin and Yadda Cucumber flavoured Javascript
41. Feature: Autocomplete ! Scenario: Brand ! When I open /clothing/ and I enter "Hugo Boss" in the header searchfield and I wait for 0.5 seconds and I should see "Hugo Boss" in the autocomplete and I should see "BRAND" in the autocomplete item when I click on the 1st menu item in the auto complete and I wait for 0.5 seconds then the value of the header search field should be "hugo boss”
42. library .when('I open $URL', function(url) { this.browser.url(baseURL + url); }) ! .when('I click the $SELECTOR', function(selector) { this.browser.click(elements[selector]); }) ! .then('the $SELECTOR href should be "$TEXT"', function(selector, text){ this.browser .waitForElementPresent(elements[selector], timeout) .getAttribute(elements[selector], 'href', function(result){ var regex = new RegExp(text, 'i'); this.verify.equal(result.value, text); }); })
43. module.exports = { '1st menu item in the auto complete': '.menuItem:nth-child(1) a', '2nd menu item in the auto complete': '.menuItem:nth-child(2) a', 'advice nav': 'a[href="/advice/"]', 'article title': '.h1Article', 'article summary': '.h2Article', 'autocomplete': '.autoComplete', 'autoCompleteItemType': '.autoCompleteItemType', 'avatar': '.avatarAction', 'back to article link': 'a#backToPage', 'breadcrumb action': 'a.breadCrumbAction', 'celebrities nav': 'a[href="/celebrity/"]' }
44. Demo
45. When to Test
46. Anything Hard Anything Likely to Break Anything Important
47. Mobile and Cross-Browser Testing
50. Testing in IE
53. Testing Services
54. http://saucelabs.com http://browserstack.com http://testling.com
55. Resources
56. http://mochajs.org http://jasmine.github.io http://chaijs.com http://karma-runner.github.io/0.12/index.html http://nightwatchjs.org http://watir.com https://github.com/acuminous/yadda