Downloaded 25 times
Uploaded byMikhail Larchanka
Isomorphic React Apps Testing
Unit, integration, and UI tests are important for ensuring code quality and stable React apps. Unit tests using Jest test components in isolation. Integration tests using Selenium test app functionality across full stack. UI tests using Galen test visual consistency across browsers, devices. Together, different types of tests provide confidence in clean code and consistent user experience.
More Related Content
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Isomorphic React Apps Testing
- 1.
- 2. 2 Mikhail Larchanka @MLarchanka www.mobila.name Ziggo (LibertyGlobal) Paintings by Mike Mignola
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 16 Unit Tests /Jest Facebook React oriented Default mocks
- 17.
- 19. 19 Unit Tests -Components
- 20. 20 Unit Tests -Components var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked: false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); }, …
- 21. 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. 22 Unit Tests -Components // Render a checkbox with label in the document var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn=“On" labelOff="Off" /> );
- 23. 23 Unit Tests -Components // Verify that it's Off by default var label = TestUtils .findRenderedDOMComponentWithTag(checkbox,'label'); expect(label.getDOMNode().textContent) .toEqual('Off');
- 24. 24 Unit Tests -Components // Simulate a click and verify that it is now On var input = TestUtils .findRenderedDOMComponentWithTag(checkbox,’input’); TestUtils.Simulate.change(input); expect(label.getDOMNode().textContent) .toEqual('On');
- 25. 25 Unit Tests -Services
- 26. 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. 27 Unit Tests -Services describe('Service', () => { beforeEach(() => { var mockFetch = sinon.stub(); revert = Service.__set__({ fetch: mockFetch }); });
- 28. 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. 29 Unit Tests -Actions
- 30. 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. 31 Unit Tests -Actions describe(‘Action', () => { beforeEach(() => { fluxContext = createMockActionContext(); sinon.stub(fluxContext, 'dispatch'); });
- 32. 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. 33 Unit Tests -Stores
- 34. 34 Unit Tests -Stores Test all public methods: Setters Getters
- 35.
- 36.
- 37. 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.
- 39.
- 40.
- 41.
- 42. 42 Galen Tests @objects inputLogin .input-login inputPassword.input-password checkbox .checkbox button .btn-login
- 43. 43 Galen Tests @on tablet,desktop, mobile inputLogin: visible inside screen width = 153px above inputPassword
- 44.
- 45.
- 46. 46 Integration / GalenTests All Browsers All Systems All Devices
- 47. 47 All Browsers All Systems AllDevices Integration / Galen Tests
- 48. 48 ESLint & JSCS TwoThumbs for a Pull Request Other Tests
- 49.
- 50. Conclusion Clean readable code Stableapplication Consistent design Browser support
- 51.
- 52.
- 53.