Date post: | 02-Dec-2014 |
Category: |
Technology |
Upload: | frances-berriman |
View: | 3,277 times |
Download: | 1 times |
Pro bun-fightingTesting, quality and group hugs
What the who?Frances BerrimanBBC Glow JavaScript LibraryGeneral web nerdLondon based…
Jake Archibald
Michael Mathews*
*not actually Michael, but an entertaining real photo could not be located
… and that’s it.
… and that’s it.
Steve Elson
… and that’s it.
Ed Scotcher
… and that’s it.
I love Glow for 1/6th of my
day!
Ed Scotcher
A small and distributed problemThere’s only 3 of us.2/3rds live in not-London.Build, support & learn.
Problem 1: Communicating what we want to make
Why care?
The unwrap() method
“We need something that'll let us get a node and remove it from whatever it's in, and remove the parent, and then it needs to put the thing that's being unwrapped back in place. And then we'll give the user back what we put in.
Any objections?”
The unwrap() method
“We need something that'll let us get a node and remove it from whatever it's in, and remove the parent, and then it needs to put the thing that's being unwrapped back in place. And then we'll give the user back what they put in.
Any objections?”
In JSDoc…
@name glow.NodeList#unwrap
@function
@description Removes the parent of each item in the list
@returns {glow.NodeList} The now unwrapped elements
@example
// Before: <div><p><span id="mySpan">Hello</span></p></div>
// unwrap the given element
glow("#mySpan").unwrap();
// After: <div><span id="mySpan">Hello</span></div>
In JSDoc…
@name glow.NodeList#unwrap
@function
@description Removes the parent of each item in the list
@returns {glow.NodeList} The now unwrapped elements
@example
// Before: <div><p><span id="mySpan">Hello</span></p></div>
// unwrap the given element
glow("#mySpan").unwrap();
// After: <div><span id="mySpan">Hello</span></div>
The bun-fight
Free documentation
Problem 2: Checking what we’ve made actually works
Qunit
unwrap() test examplemodule('glow.NodeList#unwrap', {setup:setup, teardown:teardown});
unwrap() test examplemodule('glow.NodeList#unwrap', {setup:setup, teardown:teardown});
test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {
});
unwrap() test examplemodule('glow.NodeList#unwrap', {setup:setup, teardown:teardown});
test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {
var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ),
returnNodeList;
equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function');
});
unwrap() test examplemodule('glow.NodeList#unwrap', {setup:setup, teardown:teardown});
test('glow.dom.NodeList#unwrap multiple elements with same parent', 8, function() {
var myNodeList = new glow.NodeList( byId('elmWithMixedNodes').childNodes ),
returnNodeList;
equal(typeof myNodeList.unwrap, 'function', 'glow.NodeList#unwrap is a function');
returnNodeList = myNodeList.unwrap();
strictEqual(returnNodeList, myNodeList, 'Same nodelist returned');
myNodeList.each(function() {
equal(this.parentNode.id, 'testElmsContainer', 'Node moved to parent');
});
equal(myNodeList.item(0).prev()[0].id, 'elmWithTextNodes', 'Node inserted in correct position');
});
Sanity checking & code reviews
Conflict resolution
Problem 3: Checking what we’ve made is fast
Why Woosh?
Creating tests
Run time
How long does it take for this method to run 1000 times?
woosh.addTests('glow2-src', {'unwrap': new woosh.Test(1000, function() {
// unwrap and keep count of unwraps performed}),
}
Over time
How many times does this method run in a second?
woosh.addTests('glow2-src', {'unwrap': new woosh.TimeTest(1, function()
{// unwrap and keep count of unwraps
performed}),
}
Live demo
The headlines
• Treat documentation like code• There's no such thing as too many
unit tests• Benchmark regularly if you want to
get fast
And the rest
Roll credits
Frances Berriman / @phaefberriman.com
github.com/glow/glow2
Additional photos courtesy of:flickr.com/photos/stevec77/3870451388
flickr.com/photos/willsisti/4037142479flickr.com/photos/jaffathecake/2835837370
flickr.com/photos/elson/3555981445