isomorphic react apps testing

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

Questions?

Mikhail Larchanka @MLarchanka

http://j.mp/FU_LARCHANKA