Javascript Test Dummies image source: http://imgkid.com/crash-test-dummy-symbol.shtml Mauro Verrocchio @maur8ino 

image source: http://imgkid.com/crash-test-dummies-logo.shtml 

$ whoami Mauro Verrocchio Senior Frontend Engineer @ Gild twitter: @maur8ino github: @maur8ino likes: #allthingsjavascript #ruby #python #golang #testing #skiing #hiking #playingbasketball ...and a #nerddaddy :) 

Why talking about frontend testing? ● the so called “Web 2.0” gave a lot of attention to the frontend ● lots of responsive UI and SPA ● tighter release cycles ● tools and frameworks are grown and become mature 

image source: http://blog.teamtreehouse.com/wp-content/uploads/2014/01/dev-tools-console.png Debugging on frontend image source: http://blogs.sitepointstatic.com/images/tech/520-opera-dragonfly-1.png image source: http://cdn.sixrevisions.com/0228-01_firebug_guide_webdesigners_thumbnail.jpg 

We will talk about... ● unit testing ● end-to-end testing 

Unit testing “In computer programming, unit testing is a software testing method by which individual units of source code, sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures, are tested to determine whether they are fit for use.” source: https://en.wikipedia.org/wiki/Unit_testing 

Javascript most notable unit testing framework history ● JSUnit (2001) developed by Pivotal Labs (https://en.wikipedia.org/wiki/JSUnit) ● QUnit (~2006) initially developed by John Resig as a part of jQuery, used to test jQuery, jQuery UI and jQuery Mobile (http://qunitjs.com/) ● Jasmine (2010) developed by Pivotal Labs (http://jasmine.github.io/) ● Mocha (2011) initially developed by TJ Holowaychuk (http://mochajs.org/) 

Javascript most notable unit testing framework history #2 ● node-tap (2011) developed by TapJS (https://github.com/tapjs/node-tap) ● tape (2012) developed by James Halliday (substack) (https://github.com/substack/tape) ● AVA (2014) developed by Sindre Sorhus (https://github.com/sindresorhus/ava/) More information about Test Anything Protocol (TAP) (https://en.wikipedia.org/wiki/Test_Anything_Protocol) 

A simple project ● a small library to get users and repositories from Github using the REST api ● a couple of React components https://github.com/maur8ino/fevr-talk-may-2016 

The Github REST api ● to get user’s repositories list: GET https://api.github.com/users/{username}/repos ● to get user’s specific repository info: GET https://api.github.com/repos/{username}/{reponame} ● more info at https://developer.github.com/v3/ 

The Github REST api #2 ● for unauthenticated requests, the rate limit allows you to make up to 60 requests per hour (https://developer.github.com/v3/#rate-limiting) ● you can cache the response and use ETag or Last-Modified returned values in a subsequent request passing If-None-Match or If-Modified-Since in the header, getting a 304 if the response is not modified; a 304 response does not count against rate limit (https://developer.github.com/v3/#conditional-requests) 

current window.fetch support source: http://caniuse.com/#feat=fetch window.fetch polyfill https://github.com/github/fetch 

current Promise(s) support source: http://caniuse.com/#feat=promises Promise polyfill https://github.com/jakearchibald/es6-promise 

Application structure props: disabled value handleSubmit props: disabled values handleSubmit props: value state: loading repoList selectedUser selectedRepo methods: getUserReposList getUserRepo methods: handleSubmit methods: handleSubmit 

July 2015 ● XMLHttpRequest ● React v0.13.x ● Babel v5.x ● Karma + Browserify + Babelify + Rewireify + Mocha + Chai + Sinon Then and now... May 2016 ➔ fetch() ➔ React v15.x ➔ Babel v6.x + presets ➔ AVA (jsdom) + fetchMock + babel- plugin-rewire + Sinon 

React library ● it needs no presentation :) ● has a TestUtils class that makes easy to test components https://facebook.github.io/react/ 

AVA “Futuristic test runner” ● minimal and fast ● simple test syntax ● enforces writing atomic tests ● runs tests concurrently ● no implicit globals https://github.com/sindresorhus/ava 

Sinon.JS ● standalone test spies, stubs and mocks for JavaScript ● no dependencies, works with any unit testing framework http://sinonjs.org/ http://ricostacruz.com/cheatsheets/sinon.html 

image source: http://memegenerator.net/instance2/604560 

Challenges ● running in a concurrent environment may have problems with globals ● sharing the same variable between tests must be passed in a test context ● babel-plugin-rewire must be applied to source files ● shallow rendering does not yet support refs 

{ [...] "ava": { "require": [ "babel-register", "./test/helpers/setup-browser-env.js" ], "babel": "inherit" }, "babel": { "presets": [ "es2015", "react" ], "env": { "testing": { "plugins": [ "rewire" ] } } }, [...] } package.json 

{ [...] "scripts": { "test": "NODE_ENV=testing ava --verbose", "test-watch": "NODE_ENV=testing ava --watch", [...] }, [...] } package.json 

Github library 

import 'whatwg-fetch'; import {Promise} from 'es6-promise'; const githubBaseURL = 'https://api.github.com'; export function getUserReposListURL(username) { if (!username) { throw new Error('Username is undefined, null or an empty string'); } return `${githubBaseURL}/users/${encodeURIComponent(username)}/repos`; }; src/github.js 

import test from 'ava'; import * as github from '../src/github'; test('should generate the list of repositories url', t => { t.is(github.getUserReposListURL('maur8ino'), 'https://api.github.com/users/maur8ino/repos'); t.is(github.getUserReposListURL('maur/8i&no'), 'https://api.github.com/users/maur%2F8i%26no/repos'); }); test/github-test.js 

[...] test('should throw an error', t => { let fn = github.getUserReposListURL.bind( github.getUserReposListURL, undefined ); t.throws(fn, /empty string/); fn = github.getUserReposListURL.bind( github.getUserReposListURL, null ); t.throws(fn, /empty string/); fn = github.getUserReposListURL.bind( github.getUserReposListURL, '' ); t.throws(fn, /empty string/); }); test/github-test.js 

const cache = {}; const get = (url) => { let options = {}; if (cache[url] && cache[url].ETag) { options.headers = { 'If-None-Match': cache[url].ETag }; } return fetch(url, options).then((response) => { if (response.status === 200) { if (response.headers.get('ETag')) { cache[url] = { ETag: response.headers.get('ETag') }; } return response.json(); } else if (response.status === 304) { if (cache[url].json) { return Promise.resolve(cache[url].json); } } else { return Promise.reject(Error('Error', response)); } }).then((json) => { if (cache[url]) { cache[url].json = json; } return Promise.resolve(json); }); }; src/github.js 

export function getUserReposList(username) { try { return get(getUserReposListURL(username)); } catch(error) { return Promise.reject(error); } }; src/github.js 

[...] import fetchMock from 'fetch-mock'; [...] test.afterEach(() => { fetchMock.restore(); }); [...] test.serial('should make an ajax request', t => { fetchMock.mock('https://api.github.com/users/maur8ino/repos', 'GET', [ { "id": 35957173, "name": "angular-post-message" }, { "id": 37024234, "name": "react-bem-mixin" } ]); return github.getUserReposList('maur8ino').then(response => { t.deepEqual(response, [ { id: 35957173, name: 'angular-post-message' }, { id: 37024234, name: 'react-bem-mixin' } ]); }); }); test/github-test.js 

React Components 

global.document = require('jsdom').jsdom(''); global.window = document.defaultView; global.navigator = window.navigator; test/helpers/setup-browser-env.js 

import React from 'react'; const SearchForm = React.createClass({ handleSubmit(e) { e.preventDefault(); this.props.handleSubmit(this.refs.input.value); }, render() { let {value, disabled} = this.props; return ( Search ); } }); export default SearchForm; src/SearchForm.jsx 

import test from 'ava' import sinon from 'sinon'; import React from 'react'; import ReactDOM from 'react-dom'; import {Simulate, renderIntoDocument, findRenderedDOMComponentWithTag} from 'react-addons-test-utils'; import SearchForm from '../src/SearchForm.jsx'; test('should be initialized with a default value', t => { const searchForm = renderIntoDocument(); const input = findRenderedDOMComponentWithTag(searchForm, 'input'); t.is(input.value, 'maur8ino'); }); test/SearchForm-test.jsx 

[...] test('should disable the form', t => { const searchForm = renderIntoDocument(); const input = findRenderedDOMComponentWithTag(searchForm, 'input'); const button = findRenderedDOMComponentWithTag(searchForm, 'button'); t.true(input.disabled); t.true(button.disabled); }); test('should handle the form submit', t => { const handleSubmit = sinon.spy(); const searchForm = renderIntoDocument( ); Simulate.submit(ReactDOM.findDOMNode(searchForm)); t.true(handleSubmit.calledOnce); t.true(handleSubmit.calledWith('maur8ino')); }); test/SearchForm-test.jsx 

Unit testing with AngularJS https://github.com/maur8ino/aduno-talk-september-2015 

Tip of the day: “Proof of concept: make sure your tests work by letting them fail under different circumstances.” 

End-to-end testing “System testing [End-to-end] of software or hardware is testing conducted on a complete, integrated system to evaluate the system's compliance with its specified requirements. System testing [End-to-end] falls within the scope of black box testing, and as such, should require no knowledge of the inner design of the code or logic.” source: https://en.wikipedia.org/wiki/System_testing 

Selenium testing suite ● initially developed at ThoughtWorks by Jason Huggins in 2004 ● automate web browsers across many platforms ● de-facto standard for testing end-to-end web applications ● Selenium Webdriver, maybe the main reason why Selenium is popular, accepts command in “Selenese” and communicates with real browser ● Selenium IDE has a Firefox addon to record, edit and playback browser interaction ● Selenium Grid acts as a hub for Webdriver instances http://docs.seleniumhq.org/ 

Cucumber BDD tool ● lets you write feature file in natural language (Gherkin) ● implemented in Ruby, Javascript, Java, Python, .NET, etc.. http://cucumber.io/ 

Feature file ● has a Feature keyword, which explains the feature ● can have a Background list of steps to do for every Scenario ● has one or more Scenarios ● every step of Background and Scenarios starts with Given, When, Then, But or And keywords; there is no actual difference between them, they let you describe even better the feature 

Step definition file ● one or more step in feature file can be resolved by one step definition (because of regular expression) ● lets you use all the power of the language ● drives real browser via selenium or headless browser like zombiejs or phantomjs 

Test end-to-end with Cucumber ● npm install --save-dev cucumber selenium- webdriver ● feature files will be placed in features/ ● step definition files will be placed in features/steps ● support files will placed in features/support 

image source: http://memegenerator.net/instance/62951843 

Integration with a CI server .travis.yml http://docs.travis-ci.com/user/languages/javascript-with-nodejs/ language: node_js node_js: - “5.1” - “4.2” - “...” env: - MY_ENV_VAR=”something” 

Final take: let the machine do the machine work 

What’s next... ● test coverage (Istanbul - https://gotwarlost.github.io/istanbul/) (nyc - https://github.com/bcoe/nyc) ● code quality (bitHound - https://www.bithound.io/) (Code Climate - https://codeclimate.com/) 

Useful links ● http://stackoverflow.com/a/680713 Javascript unit test frameworks overview ● https://github.com/cucumber/cucumber-js the “official” homepage of cucumberjs with examples ● http://devdocs.io/ awesome documentation ● http://kangax.github.io/compat-table/es6/ super useful es6 table comparison ● http://svgporn.com/ developer tools icon in svg 

“It is now two decades since it was pointed out that program testing may convincingly demonstrate the presence of bugs, but can never demonstrate their absence. After quoting this well-publicized remark devoutly, the software engineer returns to the order of the day and continues to refine his testing strategies, just like the alchemist of yore, who continued to refine his chrysocosmic purifications.” (E. W. Dijkstra, 1988) source: https://www.cs.utexas.edu/~EWD/transcriptions/EWD10xx/EWD1036.html Quote of the day: 

source: http://2.bp.blogspot.com/_7OeU3GAGUBI/S9DZdiChuoI/AAAAAAAAACE/-CJ6H_oL2Ck/s1600/thats+all+folks.jpg Thanks!