TDD: Develop, Refactor and Release With Confidence

Mehdi Valikhani
Software Engineer at AutopilotHQ
06 / 02 / 2017 | React Sydney Meetup
TDD: Develop,
refactor and
release with
confidence

“Worried that TDD
will slow down your
programmers?
Don't. They
probably need
slowing down.”
— J. B. Rainsberger

I.
Avoiding big and multi-purpose
units of code
(Functions, Classes, Components)

II.
Developing small and
focused units of code

CAUTION: OVER-ENGINEERING TRAP AHEAD
Be careful when breaking down big components to
multiple small ones.
8
Writing Testable Code: Caution

I.
Don’t test behaviour
of dependencies
(Both internal and external)

II.
Don’t integrate with internals
of a unit of code
(Components, Functions, Classes)

III.
Tests should be
execution-order agnostic

IV.
Tests should be
independent

V.
Tests should not have
side effects

I.
Component Internals
Don’t test internals of a component

— Example <UserProﬁle /> component
class UserProfile extends React.Component {
_pathToAvatar(userId) {
      return `my-cdn.com/users/${userId}/avatar-320.png`;
  }
render() {
      return (
          <div className=“user”>
              <h3 className=“user__name”>{this.props.name}</h3>
              <img
                   className=“user__avatar”
                   src=`${this._pathToAvatar(this.props.id)}`
               />
          </div>
       );
   }
}
23
Unit Tests: Component Internals

— Bad Test
it(‘_pathToAvatar() returns correct path for given user id’, () => {
const userProfile = shallow(<UserProfile name=“Taco” id=“123” />);
const subject = userProfile.instance()._pathToAvatar;
const result = subject(123);
expect(result).to.equal('my-cdn.com/users/123/avatar-320.png');
});
24

— Bad Test
it(‘_pathToAvatar() returns correct path for given user id’, () => {
const subject = userProfile.instance()._pathToAvatar;
const result = subject(123);
});
— Good Test
it(‘rendered image points to correct asset’, () => {
const subject = userProfile.find(‘.user__avatar’);
const result = subject.prop(’src');
});
25

II.
Limit Your Implementation
Knowledge

— Example <Avatar /> component
const Avatar = ({ className, path }) => {
const classes = classNames(‘avatar’, className);
return (
<img src={path} className={classes} />
);
}
27
Unit Tests: Limit Your Implementation Knowledge

— Example <UserProﬁle /> component
class UserProfile extends React.Component {
_pathToAvatar(userId) {
      return `my-cdn.com/users/${userId}/avatar-320.png`;
  }
render() {
      return (
          <div className=“user”>
              <h3 className=“user__name”>{this.props.name}</h3>
              <Avatar
                   className=“user__avatar”
                   path=`${this._pathToAvatar(this.props.id)}`
               />
          </div>
       );
   }
}
28

— Bad Test
const subject = userProfile.find(‘.icon’);
});
29

— Bad Test
const subject = userProfile.find(‘.icon’);
});
— Good Test
const subject = userProfile.find(Avatar);
const result = subject.prop(’path');
});
30

TOOLS
enzyme
chai
mocha
33
Unit Tests: Tools

Problems with snapshot testing
35
Snapshot Tests
1. Validation of the “gold master” snapshot is manual and should be
done by developer
2. Unlike unit tests, snapshot tests don’t provide speciﬁc guidance for
what the original developer expected beyond the “actual behaviour”
3. They’re often fragile and generate lots of false negatives

Best Practices
36
Snapshot Tests
1. Well-formatted snapshots
2. Proper diﬀ logs
3. Skip composed components

— Example
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import generateSubtree from 'enzyme-to-json';
import Button from './button';
describe(‘<Button />’, () => {
it(‘Generated markup matches golden master’, function test() {
       const subject = shallow(
           <Button size=“small” color=“blue” icon=“save” text=“Save" />
       );
       const result = generateSubtree(subject);
       expect(result).to.matchSnapshot(
`${this.test.file}.snap`,
this.test.title);
   });
});
37
Snapshot Tests

TOOLS
enzyme-to-json
chai-jest-snapshot
38
Snapshot Tests: Tools

I.
Test “widgets”, not
individual components

II.
Do not test multiple
“widgets” together

TOOLS
webdriver.io
wdio-visual-regression-service
44
Visual Regression Tests: Comparison Tool: Tests

I.
Well-structured Bug Backlog

Bug Backlog Insights
47
Tips: Well-structured Bug Backlog
1. Identify missing tests
2. Improve code-review processes
3. Improve task spec
4. Training sessions
5. Pair programming

II.
Opportunities from
Fixing Bugs

Opportunities from Fixing Bugs
49
Tips: Opportunities from Fixing Bugs
1. Re-evaluate code readability
2. Investigate source of bug
3. Re-evaluate test readability
4. Re-evaluate existing test’s behaviour

Thank You!
You can reach me at:
✉ hi@mv.id.au
@mehdivk

TDD: Develop, Refactor and Release With Confidence

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to TDD: Develop, Refactor and Release With Confidence (20)

Recently uploaded (20)

TDD: Develop, Refactor and Release With Confidence