meteor Acceptance Testing (with Nightwatch) App Surface Area
Example
At it's most basic level, acceptance testing is essentially black-box testing, which is fundamentally concerned with testing inputs and outputs of a closed system. As such, there are three essential features to acceptance testing: locating a resource, reading data, and writing data. When it comes to browsers and webapps, these three features basically boil down to the following:
- Load a webpage or application view
- Inspect user interface elements (i.e. DOM)
- Trigger an event / simulate a user interaction
We call this the surface area of the application. Surface area is anything that a user sees or experiences. It's the outside of a blackbox system. And since users interact with modern web applications on video screens using web browsers, our surface coverage is defined by universal resource locators (URLs) and viewports. And so our very first walkthrough starts off looking something like the following:
module.exports = {
"Hello World" : function (client) {
client
// the location of our Meteor app
.url("http://localhost:3000")
// the size of the viewport
.resizeWindow(1024, 768)
// test app output
.verify.elementPresent('h1')
.verify.containsText('h1', "Welcome to Meteor!")
.verify.containsText('p', "You've pressed the button 0 times")
.verify.elementPresent('button')
// simulate user input
.click('button').pause(500)
// test app output again, to make sure input worked
.verify.containsText('p', "button 1 times")
// saving a copy of our viewport pixel grid
.saveScreenshot('tests/nightwatch/screenshots/homepage.png')
.end();
}
};
