TDD+React

 Will Vaughn

Software Engineer R/GA

@nackjicholsonn

 

github:nackjicholson

 

willieviseoae@gmail.com

 

william.vaughn@rga.com

TDD+React

  • Designing Components
  • Test Anatomy 101
  • React ecosystem testing libs
  • Test drive an easy component
  • Talk about stuff which is hard to test

Designing Components

Big components will hurt.

>3 Dependencies will crush you.

How will we possibly deal with all the well organized, carefully named, comprehensible small things?! 

Designing Components

How to stop hating your test suite

Data => Display

Interaction => Action

Thinking in React

Presentational and Container Components

Designing Components

Test Anatomy 101

import assert from 'assert';

describe('What unit aspect are you testing?', () => {
  it('What should the unit do?', () => {
    const actual = 'What is the actual output?';
    const expected = 'What do you expect the output to be?';

    assert.equal(actual, expected, 'Describe to me what happened here.');
  });
});

5 Questions

Test Anatomy 101

import assert from 'assert';
import shout from './shout';

describe('shout', () => {
  it('should uppercase a string', () => {
    // "Arrange"
    const str = 'foobar';

    // "Act"
    const actual = shout(str);
    const expected = 'FOOBAR';

    // "Assert"
    assert.equal(actual, expected, 'returns str uppercased');
  });
});

shout should uppercase a string

Testing Libararies

  • airbnb/enzyme
  • React Addons Test Utilities
  • jquense/teaspoon

airbnb/enzyme

  • Shallow, static, full rendering
  • Traversal helpers
  • Simulated events
  • A bit clunky
  • Issues with nested DOM elements
  • Issues with simulated events

ReactTestUtils

  • Official facebook support
  • Makes tests really verbose
  • Readability suffers
  • Light documentation

jquense/teaspoon

  • Full and shallow render
  • Fluent jQuery-like API
  • Nested DOM elements
  • Simulated events
  • Lesser known library

Presentational Component

Does it display the props we give it?

Does it respond to user interactions?

Stateless Functional Component

SelectControl

SelectControl HTML

<div id="robot-sounds-wrapper">
  <label for="robot-sounds-select">Robot Sounds:</label>
  <select id="robot-sounds-select" name="robot-sounds-select">
    <option value="beep">beep</option>
    <option value="boop" selected >boop</option>
  </select>
</div>
{
 id: 'robot-sounds'
 labelText: 'Robot Sounds:'
 defaultValue: 'boop',
 onSelection: (value) => { /* do something with value */ }
}

Props

HTML

SelectControl Outline

import $ from 'teaspoon';
import assert from 'assert';
import React from 'react';
import { spy } from 'sinon';
import SelectControl from './SelectControl';

describe('app/components/SelectControl', () => {
  it('should render wrapper div');
  it('should render label with labelText prop');
  it('should render children prop within select list');
  it('should be able to select a default option');
  it('should handle selection changes via onSelection callback prop');
});

SelectControl Wrapper

it('should render wrapper div', () => {
  // "Arrange"
  const props = { id: 'foo' };

  // "Act"
  const actual = $(<SelectControl {...props} />)
    .render()
    .find('div[id=foo-wrapper]')
    .length;
  const expected = 1;

  // "Assert"
  assert.equal(actual, expected, 'rendered 1 wrapper div based on id prop');
});

SelectControl Wrapper

import React from 'react';

export default function SelectControl(props) {
  return <div id={`${props.id}-wrapper`}></div>;
}

SelectControl <label>

it('should render label with labelText prop', () => {
  const props = { id: 'foo', labelText: 'test.labelText' };

  const actual = $(<SelectControl {...props} />)
    .render()
    .find('div > label[htmlFor=foo-select]')
    .text();
  const expected = 'test.labelText';

  assert.equal(actual, expected, 'label rendered with text from labelText prop');
});

SelectControl <label>

import React from 'react';

export default function SelectControl(props) {
  return (
    <div id={`${props.id}-wrapper`}>
      <label htmlFor={`${props.id}-select`}>{props.labelText}</label>
    </div>
  );
}

SelectControl children

it('should render children prop within select list', () => {
  const props = { id: 'foo' };

  const component = (
    <SelectControl {...props}>
      <option value="alpha.value">alpha.text</option>
      <option value="bravo.value">bravo.text</option>
      <option value="charlie.value">charlie.text</option>
    </SelectControl>
  );
  const $options = $(component)
    .render()
    .find('div > select[id=foo-select] option');

  const actual = $options
    .map(optionNode => [optionNode.value, optionNode.text])
    .get();
  const expected = [
    ['alpha.value', 'alpha.text'],
    ['bravo.value', 'bravo.text'],
    ['charlie.value', 'charlie.text']
  ];

  assert.deepEqual(actual, expected, 'rendered option children within select list');
});

SelectControl children

import React from 'react';

export default function SelectControl(props) {
  return (
    <div id={`${props.id}-wrapper`}>
      <label htmlFor={`${props.id}-select`}>{props.labelText}</label>
      <select id={`${props.id}-select`} name={`${props.id}-select`}>
        {props.children}
      </select>
    </div>
  );
}

SelectControl children

import React from 'react';

export default function SelectControl(props) {
  const { id, children, labelText } = props;

  const wrapperId = `${id}-wrapper`;
  const selectId = `${id}-select`;

  return (
    <div id={wrapperId}>
      <label htmlFor={selectId}>{labelText}</label>
      <select id={selectId} name={selectId}>
        {children}
      </select>
    </div>
  );
}

SelectControl defaultValue

it('should be able to select a default option', () => {
  const props = { id: 'foo', defaultValue: 'bravo.value' };

  const component = (
    <SelectControl {...props}>
      <option value="alpha.value">alpha.text</option>
      <option value="bravo.value">bravo.text</option>
      <option value="charlie.value">charlie.text</option>
    </SelectControl>
  );
  const $options = $(component)
    .render()
    .find('div > select[id=foo-select] option');

  const checkedOption = $options
    .get()
    .find(optionNode => optionNode.selected);

  const actual = checkedOption.value;
  const expected = 'bravo.value';

  assert.equal(actual, expected, 'selected the option via defaultValue prop');
});

SelectControl defaultValue

import React from 'react';

export default function SelectControl(props) {
  const { id, children, defaultValue, labelText } = props;

  const wrapperId = `${id}-wrapper`;
  const selectId = `${id}-select`;

  return (
    <div id={wrapperId}>
      <label htmlFor={selectId}>{labelText}</label>
      <select id={selectId} name={selectId} defaultValue={defaultValue}>
        {children}
      </select>
    </div>
  );
}

SelectControl onSelection

it('should handle selection changes via onSelection callback prop', () => {
  const props = { id: 'foo', onSelection: spy() };

  $(<SelectControl {...props} />)
    .render()
    .find('div > select[id=foo-select]')
    .trigger('change', { target: { value: 'bingo' } });

  assert(props.onSelection.calledOnce, 'onSelection callback prop called once');

  const actual = props.onSelection.args[0];
  const expected = ['bingo'];

  assert.deepEqual(
    actual,
    expected,
    'onSelection callback called with change value'
  );
});

SelectControl onSelection

import React from 'react';

export default function SelectControl(props) {
  const { id, children, defaultValue, labelText, onSelection } = props;

  const wrapperId = `${id}-wrapper`;
  const selectId = `${id}-select`;

  function handleChange(event) {
    onSelection(event.target.value);
  }

  return (
    <div id={wrapperId}>
      <label htmlFor={selectId}>{labelText}</label>
      <select
        id={selectId}
        name={selectId}
        defaultValue={defaultValue}
        onChange={handleChange}
      >
        {children}
      </select>
    </div>
  );
}

Up the difficulty!

Thank You!

@nackjicholsonn

TDD+React

By Will Vaughn

Made with Slides.com

TDD+React

Outlined approach to testing react components with an emphasis on TDD.

  • 1,402

More from Will Vaughn