Bromine example
HTML
<script src="https://raw.github.com/CheggEng/Bromine/master/bin/bromine.min.js"></script>
<a href='javascript:' id='start'>click me to start test</a>
<article id='acord'>
<h2 id=sec1 class='current'>Section 1</h2>
<p>There is nothing like a Sunday afternoon and a really good used bookstore. Today my friend and I wandered into a new one on our way home from lunch. Lorem Ipsum, located in Inman Square, Cambridge, is a quiet unassuming little store. I was deceived at first by the simple arrangements and seemingly few bookshelves. I noticed one tiny spot labeled, "Good books for kids" and figured it was the only kids book section. In this section of 20ish books they did have two books on the list in my brain of "Good Books to Buy."</p>
<h2 id=sec2>Section 2</h2>
<p>"This store is pretty cool, but their children's section is seriously lacking," I mumbled to my friend. Oh me. Turn the corner and there was the kids book section I was looking for, which was NOT seriously lacking! Although it was restricted to two and a half book shelves, these shelves were packed with the best of the best. Soon I had a stack of books I had to have. Then I added some numbers in my head and quietly re-shelved a few of the books.</p>
<h2 id=sec3>Section 3</h2>
<p>My favorite section was the quirky children's books. (It had a really cool name but I can't remember right now...) Here I found old copies of books, strange children's books never heard of, and titles that made me laugh out loud, such as: Peep Show: A little book of Rhymes. Ha!</p>
</article>
CSS
h2 {
width:200px;
height:20px;
line-height:20px;
vertical-align:middle;
background:#396DAD;
color:#fff;
font-weight:bold;
cursor:pointer;
padding:2px 5px;
}
#start {
display:block;
margin:10px auto
}
JavaScript
var Tester = new Bromine.Tester(), //create a Tester instance
reporter = new Bromine.Reporter; //a reporter
//create a Test scenario
Tester.registerTest("Accordion Test", {
description: "Toggle accordion handles",
init: function () {
this.handles = document.querySelectorAll('#acord h2');
this.index = 0;
},
destroy: function () {
this.handles = null;
},
tests: [
function () {
//this method can be used to log the progress of the test
this.log({
msg: 'First handle should be selected',
success: this.handles[0].className == 'current'
});
Bromine.fireEvent(this.handles[++this.index], 'click'); //fire a DOM event
setTimeout(this.next, 1000);
//this next will execute the next function
//in the stack when called
},
function () {
this.log({
msg: "Previous handle should be cleared (section " + this.index + ")",
success: this.handles[this.index - 1].className != 'current'
});
this.log({
msg: "Current handle should be opened (section " + (this.index + 1) + ")",
success: this.handles[this.index].className == 'current'
});
if (this.index == 2) {
//finish the test
return this.done();
}
Bromine.fireEvent(this.handles[++this.index], 'click');
setTimeout(this.current, 1000);
//this.current works the same as this.next, only that it
//will execute the current function
}]
});
//set the reporter for this Tester
reporter.testStart = function (name, test) {
console.log('Test ' + name + ' Started');
};
reporter.testDone = function (name, results) {
console.log('Test ' + name + ' Ended');
for (var i = 0, res; res = results[i]; i++) {
console.log(res.msg, res.success);
}
};
reporter.done = function ()...