testing javascript in the frontend

Testing Javascript from a Frontend perspective

Frederic Cabassut - Campanda

The basics of test-driven development

TDD Cycle - Rule #1

You must write a failing test

before you write any production

code.

TDD Cycle - Rule #2

You must not write more of a

test than is sufficient to fail, or

fail to compile.

TDD Cycle - Rule #3

You must not write more

production code than is

sufficient to make the currently

failing test pass.

TDD Cycle// tests // production code

TDD Cycle// tests

var expected = "Hello, Fred!";

// production code

TDD Cycle// tests


// production code

✓

TDD Cycle// tests


var actual = getMyObj().greet("Fred");

// production code

TDD Cycle// tests



// production code

Uncaught ReferenceError: getMyObj is not defined

TDD Cycle// tests



// production code

function getMyObj() {

}

TDD Cycle// tests



// production code


}

Uncaught TypeError: Cannot read property 'greet' of undefined

TDD Cycle// tests



// production code


return {};

}

TDD Cycle// tests



// production code


return {};

}

Uncaught TypeError: getMyObj(...).greet is not a function

TDD Cycle// tests



// production code


return {

greet: function() {

}

};

}

}

TDD Cycle// tests



// production code


return {

greet: function () {

}

};

}

✓

TDD Cycle// tests



assert.equal(expected, actual);

// production code


return {

greet: function() {

}

};

}

TDD Cycle// tests




// production code


return {

greet: function() {

}

};

}

AssertionError: "Hello, Fred!" == undefined

TDD Cycle// tests




// production code


return {

greet: function() {

return "Hello, Fred!";

}

};

}

TDD Cycle// tests




// production code


return {

greet: function() {

return "Hello, Fred!";

}

};

}

✓

Why Testing ?- Increase code quality

- Deploy with confidence

- Self-explaining documentation

- Easy to refactor

What do we have to test ?- User interaction / events

- Manipulating the DOM

- Client-side business logic

- Ajax request (retrieve/send data)

My favorite testing stack:- Mochajs https://mochajs.org/

- Chaijs http://chaijs.com/

- Sinonjs: http://sinonjs.org/

- My browser (+ livereload)

https://mochajs.org/

http://chaijs.com/

http://sinonjs.org/

Let’s create a DatePicker!

User interaction / events// tests

it('should initialize a datepicker with

a given element', function() {

var input =

document.createElement('input');

DatePicker.init(input);

});

// production code

window.DatePicker = {

init: function() {}

}


it('should initialize a datepicker with

a given element', function() {

var input =



});

// production code


init: function() {}

}

✓


it('should show a datepicker on input

focus', function() {

});

// production code


init: function() {}

}




var input =



});

// production code


init: function() {}

}




var input =



});

// production code


init: function() {}

}

✓




[...]

});

// production code


init: function() {}

}




[...]

var event = new Event('focus');

input.dispatchEvent(event);

});

// production code


init: function() {}

}




[...]



});

// production code


init: function() {}

}

✓




[...]



var element =

document.getElementById('datePicker');

expect(element).to.be.ok;

});

// production code


init: function() {}

}




[...]



var element =



});

// production code


init: function() {}

}

AssertionError: expected null to be truthy




[...]



var element =



});

// production code


init: function(input) {

[...]

}

}




[...]



var element =



});

// production code

[...]

input.addEventListener('focus',

function() {

var element =

document.createElement('div');

element.id = 'datePicker';

document.body.appendChild(element);

}

[...]




[...]



var element =



});

// production code

[...]


function() {

var element =




}

[...]

✓


it('should stop event propagation',

function() {

});

// production code

[...]


function() {

var element =




}

[...]



function() {

[...]


var spy = sinon.spy(event,

'stopPropagation');


expect(spy).to.have.been.calledOnce;

});

// production code

[...]


function() {

var element =




}

[...]



function() {

[...]



'stopPropagation');



});

// production code

[...]


function() {

var element =




}

[...]

expected stopPropagation to have been called exactly once ...



function() {

[...]



'stopPropagation');



});

// production code

[...]


function(e) {

e.stopPropagation();

var element =




}

[...]



function() {

[...]



'stopPropagation');



});

// production code

[...]


function(e) {

e.stopPropagation();

var element =




}

[...]

✓

Manipulating the DOM// tests

it('should add class "selected" on a day when it is clicked',

function(){

});


it('should add class "selected" on a day when it is clicked',

function(){

[...]

var day = document.querySelector('#datePicker .day');

day.click();

});


it('adds class "selected" on a day when clicked', function() {

[...]

var day = document.querySelector('#datePicker .day');

day.click();

var i = day.className.indexOf('selected');

expect(i > -1).to.be.true;

});

Mocking Time, tick tick tick// tests

Mocking Time// tests

it('should hide datePicker after 300ms', function(){

[...]

var clock = sinon.useFakeTimers();

day.click();

clock.tick(299);

expect(datePicker.className.indexOf('hidden') > -1).to.be.false;

clock.tick(2);

expect(datePicker.className.indexOf('hidden') > -1).to.be.true;

clock.restore();

});

Mocking Browser methods// tests

Mocking Browser methods// tests

beforeEach(function() {

this.dateNowStub = sinon.stub(Date, 'now', function() {

return new Date('2016-01-13').getTime();

});

});

afterEach(function(){

this.dateNowStub.restore();

});

Testing Javascript for the BrowserIn a browser

Take it to the next levelHeadless browser testing (phantomjs, zombie, electron...)

Continuous Integration: automate your tests in jenkins, travis…

A few more tips- Find a BUG ? Write a TEST!

- Do TDD while PAIRING

- Use the Web APIs in your TESTS

- Don’t try to test the browser

- You don’t need to test libraries

THANK YOUAnd HAPPY Testing!

testing javascript in the frontend

Software