Testing React.js Applications

48619fc17b3ab68472aebd56c0106278?s=47 Max Stoiber
January 15, 2016

Testing React.js Applications

48619fc17b3ab68472aebd56c0106278?s=128

Max Stoiber

January 15, 2016
Tweet

Transcript

  1. 5.

    SYSTEM TESTING Max Stoiber – @mxstbr – mxstbr.com STRESS TESTING

    PERFORMANCE TESTING USABILITY TESTING UNIT TESTING
  2. 6.

    Max Stoiber – @mxstbr – mxstbr.com UNIT TESTING UNIT TESTING

    SYSTEM TESTING STRESS TESTING PERFORMANCE TESTING USABILITY TESTING
  3. 20.

    Max Stoiber – @mxstbr – mxstbr.com // add.test.js import {

    add } from './add.js'; import expect from 'expect'; describe('add()', () => { it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  4. 21.

    Max Stoiber – @mxstbr – mxstbr.com describe('add()', () => {

    it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  5. 22.

    Max Stoiber – @mxstbr – mxstbr.com describe('add()', () => {

    it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  6. 23.

    Max Stoiber – @mxstbr – mxstbr.com describe('add()', () => {

    it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  7. 24.

    Max Stoiber – @mxstbr – mxstbr.com describe('add()', () => {

    it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  8. 25.

    Max Stoiber – @mxstbr – mxstbr.com describe('add()', () => {

    it('adds two numbers', () => { expect(add(2, 3)).toEqual(5); }); it('doesnt add the third number', () => { expect(add(2, 3, 5)).toEqual(add(2, 3)); }); });
  9. 32.

    NavBar ├── NavBar.react.js # React component │ ├── NavBar.actions.js #

    Actions ├── NavBar.constants.js # Constants ├── NavBar.reducer.js # Reducer │ ├── NavBar.actions.test.js # Actions tests └── NavBar.reducer.test.js # Reducer tests Max Stoiber – @mxstbr – mxstbr.com
  10. 34.

    Max Stoiber – @mxstbr – mxstbr.com // NavBar.actions.js import {

    TOGGLE_NAV } from './NavBar.constants.js'; export function toggleNav() { return { type: TOGGLE_NAV }; }
  11. 35.

    Max Stoiber – @mxstbr – mxstbr.com // NavBar.actions.test.js import {

    toggleNav } from './NavBar.actions'; import { TOGGLE_NAV } from './NavBar.constants'; import expect from ‘expect'; describe('NavBar actions', () => { });
  12. 36.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBar actions', () =>

    { describe('toggleNav', () => { it('should return the correct constant', () => { expect(toggleNav()).toEqual({ type: TOGGLE_NAV }); }); }); });
  13. 37.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBar actions', () =>

    { describe('toggleNav', () => { it('should return the correct constant', () => { expect(toggleNav()).toEqual({ type: TOGGLE_NAV }); }); }); });
  14. 38.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBar actions', () =>

    { describe('toggleNav', () => { it('should return the correct constant', () => { expect(toggleNav()).toEqual({ type: TOGGLE_NAV }); }); }); });
  15. 39.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBar actions', () =>

    { describe('toggleNav', () => { it('should return the correct constant', () => { expect(toggleNav()).toEqual({ type: TOGGLE_NAV }); }); }); });
  16. 40.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBar actions', () =>

    { describe('toggleNav', () => { it('should return the correct constant', () => { expect(toggleNav()).toEqual({ type: TOGGLE_NAV }); }); }); });
  17. 43.

    Max Stoiber – @mxstbr – mxstbr.com // NavBar.reducer.js import {

    TOGGLE_NAV } from ‘./NavBar.constants.js'; const initialState = { open: false }; export default function NavBarReducer(state = initialState, action) { switch (action.type) { case TOGGLE_NAV: return Object.assign({}, state, { open: !state.open }); default: return state; } }
  18. 44.

    Max Stoiber – @mxstbr – mxstbr.com // NavBar.reducer.test.js import expect

    from 'expect'; import NavBarReducer from './NavBar.reducer'; import { TOGGLE_NAV } from './NavBar.constants'; import { toggleNav } from './NavBar.actions'; describe('NavBarReducer', () => { it('returns the initial state', () => {}); it('handles the toggleNav action', () => {}); });
  19. 45.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  20. 46.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  21. 47.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  22. 48.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  23. 49.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  24. 50.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  25. 51.

    Max Stoiber – @mxstbr – mxstbr.com describe('NavBarReducer', () => {

    it('returns the initial state', () => { expect(NavBarReducer(undefined, {})).toEqual({ open: false }); }); it('handles the toggleNav action', () => { expect(NavBarReducer(undefined, toggleNav())).toEqual({ open: true }); }); });
  26. 56.

    Max Stoiber – @mxstbr – mxstbr.com // Button.react.js import React

    from 'react'; class Button extends React.Component { render() { return ( <button className="btn" onClick={this.props.onClick}> { this.props.children } </button> ); } } export default Button;
  27. 59.

    Max Stoiber – @mxstbr – mxstbr.com // Button.test.js import Button

    from './Button.react'; import expect from 'expect'; import { shallow } from 'enzyme'; import React from 'react'; describe('<Button />', () => { it('renders a <button>', () => {}); it('renders text', () => {}); it('handles clicks', () => {}); });
  28. 60.

    Max Stoiber – @mxstbr – mxstbr.com // Button.test.js import Button

    from './Button.react'; import expect from 'expect'; import { shallow } from 'enzyme'; import React from 'react'; describe('<Button />', () => { it('renders a <button>', () => {}); it('renders text', () => {}); it('handles clicks', () => {}); });
  29. 66.

    Max Stoiber – @mxstbr – mxstbr.com // Button.test.js import Button

    from './Button.react'; import expect from 'expect'; import { shallow } from 'enzyme'; import React from 'react'; describe('<Button />', () => { it('renders a <button>', () => {}); it('renders text', () => {}); it('handles clicks', () => {}); });
  30. 67.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders a <button>', () => { const renderedComponent = shallow( <Button></Button> ); expect( renderedComponent.find("button").node ).toExist(); }); });
  31. 68.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders a <button>', () => { const renderedComponent = shallow( <Button></Button> ); expect( renderedComponent.find("button").node ).toExist(); }); });
  32. 69.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders a <button>', () => { const renderedComponent = shallow( <Button></Button> ); expect( renderedComponent.find("button").node ).toExist(); }); });
  33. 70.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders a <button>', () => { const renderedComponent = shallow( <Button></Button> ); expect( renderedComponent.find("button").node ).toExist(); }); });
  34. 71.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders text', () => { const text = "Click me!"; const renderedComponent = shallow( <Button>{ text }</Button> ); expect( renderedComponent.contains(text) ).toEqual(true); }); });
  35. 72.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders text', () => { const text = "Click me!"; const renderedComponent = shallow( <Button>{ text }</Button> ); expect( renderedComponent.contains(text) ).toEqual(true); }); });
  36. 73.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders text', () => { const text = "Click me!"; const renderedComponent = shallow( <Button>{ text }</Button> ); expect( renderedComponent.contains(text) ).toEqual(true); }); });
  37. 74.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders text', () => { const text = "Click me!"; const renderedComponent = shallow( <Button>{ text }</Button> ); expect( renderedComponent.contains(text) ).toEqual(true); }); });
  38. 75.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('renders text', () => { const text = "Click me!"; const renderedComponent = shallow( <Button>{ text }</Button> ); expect( renderedComponent.contains(text) ).toEqual(true); }); });
  39. 76.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('handles clicks', () => { const onClickSpy = expect.createSpy(); const renderedComponent = shallow( <Button onClick={onClickSpy} /> ); renderedComponent.find('button').simulate('click'); expect(onClickSpy).toHaveBeenCalled(); }); });
  40. 77.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('handles clicks', () => { const onClickSpy = expect.createSpy(); const renderedComponent = shallow( <Button onClick={onClickSpy} /> ); renderedComponent.find('button').simulate('click'); expect(onClickSpy).toHaveBeenCalled(); }); });
  41. 78.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('handles clicks', () => { const onClickSpy = expect.createSpy(); const renderedComponent = shallow( <Button onClick={onClickSpy} /> ); renderedComponent.find('button').simulate('click'); expect(onClickSpy).toHaveBeenCalled(); }); });
  42. 79.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('handles clicks', () => { const onClickSpy = expect.createSpy(); const renderedComponent = shallow( <Button onClick={onClickSpy} /> ); renderedComponent.find('button').simulate('click'); expect(onClickSpy).toHaveBeenCalled(); }); });
  43. 80.

    Max Stoiber – @mxstbr – mxstbr.com describe('<Button />', () =>

    { it('handles clicks', () => { const onClickSpy = expect.createSpy(); const renderedComponent = shallow( <Button onClick={onClickSpy} /> ); renderedComponent.find('button').simulate('click'); expect(onClickSpy).toHaveBeenCalled(); }); });