isomorphic react apps testing
TRANSCRIPT
Isomorphic React Apps
TestingMikhail Larchanka
@MLarchanka
2
Mikhail Larchanka
@MLarchanka www.mobila.name
Ziggo (Liberty Global)
Paintings by Mike Mignola
Do the Best!
4
Modern Support IE9+ SEO Friendly Stable
6
ReactJS
7
Fluxible
8
9
z
Tests?
11
Tests
Unit Integration
UI
Unit Tests
Unit Tests
13
Karma Mocha
Chai Sinon
Rewire
Unit Tests
14
Karma Mocha
Chai Sinon
Rewire
Jest
15
Jest
Unit Tests
16
Unit Tests / Jest
Facebook React oriented
Default mocks
17
Components Services Actions Stores
Unit Tests
19
Unit Tests - Components
20
Unit Tests - Components
var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked: false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); },
…
21
Unit Tests - Components… render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange} />
{this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label> ); }});
22
Unit Tests - Components
// Render a checkbox with label in the documentvar checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn=“On" labelOff="Off" />);
23
Unit Tests - Components
// Verify that it's Off by defaultvar label = TestUtils.findRenderedDOMComponentWithTag(checkbox,'label');
expect(label.getDOMNode().textContent) .toEqual('Off');
24
Unit Tests - Components
// Simulate a click and verify that it is now Onvar input = TestUtils.findRenderedDOMComponentWithTag(checkbox,’input’);
TestUtils.Simulate.change(input);
expect(label.getDOMNode().textContent) .toEqual('On');
25
Unit Tests - Services
26
Unit Tests - Services
module.exports = { method(payload) { return fetch('url') .then((response) => { if (response.status !== 200) { throw new Error('Bad response'); }
return response.json(); }); }};
27
Unit Tests - Services
describe('Service', () => { beforeEach(() => { var mockFetch = sinon.stub(); revert = Service.__set__({ fetch: mockFetch }); });
28
Unit Tests - Services
it('should call the API endpoint', () => { mockFetch.returns(Promise.resolve({}));
Service.login({ username: 'u', password: 't' });
expect(mockFetch) .to.have.been.calledWith('url');});
29
Unit Tests - Actions
30
Unit Tests - Actions
var Action = (context, payload) => { return Service.method(payload) .then((data) => { context.dispatch('SUCCESS', data); }) .catch((error) => { context.dispatch('ERROR', error); });};
module.exports = Action;
31
Unit Tests - Actions
describe(‘Action', () => { beforeEach(() => { fluxContext = createMockActionContext(); sinon.stub(fluxContext, 'dispatch'); });
32
Unit Tests - Actions
it('should success', () => { fluxContext.executeAction .returns(Promise.resolve()); Service.method.returns(Promise.resolve());
expect(fluxContext.dispatch) .to.have.been .calledWith('SUCCESS');});
33
Unit Tests - Stores
34
Unit Tests - Stores
Test all public methods:
Setters Getters
35
Selenium
Integration Tests
webdriver
Integration Tests
Integration Tests
client .init() .url('https://duckduckgo.com/') .setValue('#search_form_input_homepage', 'WebdriverIO') .click('#search_button_homepage') .getTitle().then(function(title) { console.log('Title is: ' + title); // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo" }) .end();
38
A Browser without JavaScript
Integration Tests
39
UI tests
40
UI Tests
Galen Framework
41
Galen Tests
42
Galen Tests
@objects
inputLogin .input-login inputPassword .input-password checkbox .checkbox button .btn-login
43
Galen Tests
@on tablet, desktop, mobile
inputLogin: visible inside screen width = 153px above inputPassword
44
Galen Tests
45
Galen Tests
46
Integration / Galen Tests
All Browsers All Systems All Devices
47
All Browsers All Systems All Devices
Integration / Galen Tests
48
ESLint & JSCS
Two Thumbs for a Pull Request
Other Tests
49
Unit Integration
UI
Tests
Conclusion
Clean readable code Stable application Consistent design Browser support
Useful linkshttp://facebook.github.io/react/ http://fluxible.io https://facebook.github.io/jest/ http://karma-runner.github.io http://mochajs.org http://chaijs.com http://sinonjs.org https://github.com/jhnns/rewire https://code.google.com/p/selenium/ http://webdriver.io http://galenframework.com https://saucelabs.com http://eslint.org
http://bit.ly/amsterdam-frontend
