isomorphic react apps testing
TRANSCRIPT
![Page 1: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/1.jpg)
Isomorphic React Apps
TestingMikhail Larchanka
@MLarchanka
![Page 2: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/2.jpg)
2
Mikhail Larchanka
@MLarchanka www.mobila.name
Ziggo (Liberty Global)
Paintings by Mike Mignola
![Page 3: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/3.jpg)
![Page 4: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/4.jpg)
Do the Best!
4
![Page 5: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/5.jpg)
Modern Support IE9+ SEO Friendly Stable
![Page 6: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/6.jpg)
6
ReactJS
![Page 7: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/7.jpg)
7
Fluxible
![Page 8: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/8.jpg)
8
![Page 9: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/9.jpg)
9
z
Tests?
![Page 10: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/10.jpg)
![Page 11: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/11.jpg)
11
Tests
Unit Integration
UI
![Page 12: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/12.jpg)
Unit Tests
![Page 13: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/13.jpg)
Unit Tests
13
Karma Mocha
Chai Sinon
Rewire
![Page 14: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/14.jpg)
Unit Tests
14
Karma Mocha
Chai Sinon
Rewire
Jest
![Page 15: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/15.jpg)
15
Jest
Unit Tests
![Page 16: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/16.jpg)
16
Unit Tests / Jest
Facebook React oriented
Default mocks
![Page 17: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/17.jpg)
17
Components Services Actions Stores
Unit Tests
![Page 18: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/18.jpg)
![Page 19: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/19.jpg)
19
Unit Tests - Components
![Page 20: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/20.jpg)
20
Unit Tests - Components
var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked: false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); },
…
![Page 21: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/21.jpg)
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> ); }});
![Page 22: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/22.jpg)
22
Unit Tests - Components
// Render a checkbox with label in the documentvar checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn=“On" labelOff="Off" />);
![Page 23: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/23.jpg)
23
Unit Tests - Components
// Verify that it's Off by defaultvar label = TestUtils.findRenderedDOMComponentWithTag(checkbox,'label');
expect(label.getDOMNode().textContent) .toEqual('Off');
![Page 24: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/24.jpg)
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');
![Page 25: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/25.jpg)
25
Unit Tests - Services
![Page 26: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/26.jpg)
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(); }); }};
![Page 27: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/27.jpg)
27
Unit Tests - Services
describe('Service', () => { beforeEach(() => { var mockFetch = sinon.stub(); revert = Service.__set__({ fetch: mockFetch }); });
![Page 28: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/28.jpg)
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');});
![Page 29: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/29.jpg)
29
Unit Tests - Actions
![Page 30: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/30.jpg)
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;
![Page 31: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/31.jpg)
31
Unit Tests - Actions
describe(‘Action', () => { beforeEach(() => { fluxContext = createMockActionContext(); sinon.stub(fluxContext, 'dispatch'); });
![Page 32: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/32.jpg)
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');});
![Page 33: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/33.jpg)
33
Unit Tests - Stores
![Page 34: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/34.jpg)
34
Unit Tests - Stores
Test all public methods:
Setters Getters
![Page 35: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/35.jpg)
35
Selenium
Integration Tests
![Page 36: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/36.jpg)
webdriver
Integration Tests
![Page 37: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/37.jpg)
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();
![Page 38: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/38.jpg)
38
A Browser without JavaScript
Integration Tests
![Page 39: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/39.jpg)
39
UI tests
![Page 40: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/40.jpg)
40
UI Tests
Galen Framework
![Page 41: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/41.jpg)
41
Galen Tests
![Page 42: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/42.jpg)
42
Galen Tests
@objects
inputLogin .input-login inputPassword .input-password checkbox .checkbox button .btn-login
![Page 43: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/43.jpg)
43
Galen Tests
@on tablet, desktop, mobile
inputLogin: visible inside screen width = 153px above inputPassword
![Page 44: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/44.jpg)
44
Galen Tests
![Page 45: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/45.jpg)
45
Galen Tests
![Page 46: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/46.jpg)
46
Integration / Galen Tests
All Browsers All Systems All Devices
![Page 47: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/47.jpg)
47
All Browsers All Systems All Devices
Integration / Galen Tests
![Page 48: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/48.jpg)
48
ESLint & JSCS
Two Thumbs for a Pull Request
Other Tests
![Page 49: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/49.jpg)
49
Unit Integration
UI
Tests
![Page 50: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/50.jpg)
Conclusion
Clean readable code Stable application Consistent design Browser support
![Page 51: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/51.jpg)
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
![Page 52: Isomorphic React Apps Testing](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ed3e8c1a28ab2c708b4595/html5/thumbnails/52.jpg)
http://bit.ly/amsterdam-frontend