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)

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() {}
}

// tests
it('should initialize a datepicker with
a given element', function() {
var input =
});
// production code
init: function() {}
}
✓

// tests
it('should show a datepicker on input
focus', function() {
});
// production code
init: function() {}
}

// tests
var input =
});
// production code
init: function() {}
}

// tests
var input =
});
// production code
init: function() {}
}
✓

// tests
[...]
});
// production code
init: function() {}
}

// tests
[...]
var event = new Event('focus');
input.dispatchEvent(event);
});
// production code
init: function() {}
}

// tests
[...]
});
// production code
init: function() {}
}
✓

// tests
[...]
var element =
document.getElementById('datePicker');
expect(element).to.be.ok;
});
// production code
init: function() {}
}

// tests
[...]
var element =
});
// production code
init: function() {}
}
AssertionError: expected null to be truthy

// tests
[...]
var element =
});
// production code
init: function(input) {
[...]
}
}

// tests
[...]
var element =
});
// production code
[...]
input.addEventListener('focus',
function() {
var element =
document.createElement('div');
element.id = 'datePicker';
document.body.appendChild(element);
}
[...]

// tests
[...]
var element =
});
// production code
[...]
function() {
var element =
}
[...]
✓

// tests
it('should stop event propagation',
function() {
});
// production code
[...]
function() {
var element =
}
[...]

// tests
function() {
[...]
var spy = sinon.spy(event,
'stopPropagation');
expect(spy).to.have.been.calledOnce;
});
// production code
[...]
function() {
var element =
}
[...]

// tests
function() {
[...]
'stopPropagation');
});
// production code
[...]
function() {
var element =
}
[...]
expected stopPropagation to have been called exactly once ...

// tests
function() {
[...]
'stopPropagation');
});
// production code
[...]
function(e) {
e.stopPropagation();
var element =
}
[...]

// tests
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(){
});

// tests
it('should add class "selected" on a day when it is clicked',
function(){
[...]
var day = document.querySelector('#datePicker .day');
day.click();
});

// tests
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 Browser
In a browser

Take it to the next level
Headless 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

Testing javascript in the frontend

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Testing javascript in the frontend (20)

Recently uploaded (20)

Testing javascript in the frontend