I am Joe Karlsson

• Builder of mechanical keyboards

• Creator of bechdel.io

​@JoeKarlsson1

@JoeKarlsson

joekarlsson.com

Why Is Testing Important?

Find

Problems

Early

Facilitates

Change

Reduces Bugs

Simplifies INtegreation

Continuous INtegration

tests

are

Your

Docs

 The analysis of computer software that is performed without actually executing programs

Using Flow and TypeScript  could have prevented about 15% of the bugs that end up in committed code on Github

Source: To type or not to type: quantifying detectable bugs in JavaScript

00 Static Analysis

Unit Testing

A unit test is a way of testing a unit - the smallest piece of code that can be logically isolated in a system

Snapshot Testing

Verifies that a piece of code works the same way as it did when the snapshot was created

const Button = () => {
    return (
	<div className="Button">
          About
	</div>
    );
};

describe('Button', () => {
    it('match the snapshot', () => {
	const component = renderer.create(
	    <Button />,
	);
	const tree = component.toJSON();
	expect(tree).toMatchSnapshot();
    });
});

Any Changes cause a failure immediately

UNIT TESTS PASSING !== CODE WORKS

00 Static Analysis

01 Unit Testing

is when individual software units are combined and tested as a group

Integration Testing

import { mount } from 'enzyme';

const Button = (props) => {
    const { alertNumber } = props;
    return (
        <button
            className="Button-Bad"
            onClick={alertNumber(multiply(2, 3))}
        >
	    Multiply
	</button>
    );
};

describe('Button', () => {
    it('should run the multiply function on click', () => {
        const mockAlertNumber = jest.fn();
        const component = mount(<Button alertNumber={mockAlertNumber} />);
        component.find('button').simulate('click');
        expect(mockAlertNumber).toHaveBeenCalledTimes(1);
    });
});

...but you could have all your integration tests complete, but still have a blank screen...

00 Static Analysis

01 Unit Testing

002 Integration Tests

Performed from start to finish under "Real World"
scenarios

End to End Tests

End to End Frameworks

describe('Button', () => {
    it('should render the product of 3 * 2 on the DOM when clicked', () => {
        browser.url('http://localhost:3001/');
        const btn = $('.Button');
        btn.click();
        const newNum = $('.newNum');
        expect(newNum.getText()).to.be.equal('6');
    });
});