UI Test Kitchen
Jay Landro
Front End Architect
Now more
than ever!
- Applications have changed
- Bad UX is expensive
- CSS is hard
- Accessibility affects everyone
Process greatly simplified by CLIs...
Hors D'oeuvres
As ironic as it seems, the challenge of a tester is to test as little as possible. Test Less but test smarter
-Federico Toledo
Testing leads to failure, and failure leads to understanding.
-Burt Rutan
import test from 'ava';
test('bar', async t => {
const bar = Promise.resolve('food');
t.is(await food, 'dinner');
});- Concurrency
- Asyc of all kinds
- Pushes Atomic (stateless)
- Snapshots
- Watch mode
Magic Assert === 🎉
Jest
test('Link changes the class when hovered', () => {
const component = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});- Snapshot Testing
- Async, Promises, Callbacks
- Mocking
- Fast!
MAIN COURSE!
Terminology
Unit Testing
e2e - End to end testing
Integration Testing
Regression Testing
Acceptance Testing
System Testing
Usability Testing
Functional Testing
WebDriver
Bindings
Biggest Browser Automation Hurdle:
Animations!
- Tool1 - browser.waitForVisible(selector[,ms][,reverse]);
- Tool2 - browser.waitUntil(condition[,timeout][,timeoutMsg][,interval]);
- Tool3 - browser.execute(script[,argument1,...,argumentN]);
Spectron & Headless Chrome
PhantomJS is Dead
...almost...
Isn't that for Electron?
Why yes, yes it is...
It is also a very recent build of Chrome
With an APIs.
mmmm, APIs
Headless Chrome
it's a big deal...
Dessert
Browser Plugin
Core API
Command Line
Visual Regression Testing
UI Test Kitchen
By jaylandro
