Unit Testing with React & Enzyme

button.spec.js

import Button from './Button.js';
import styles from './Button.css';
import test from 'tape';
import {spy} from 'sinon';
import { shallow } from 'enzyme';


test('<Button />', t => {


    t.ok(
        shallow(<Button value="Go!"/>).text()==="Go!",
        "Has prop `value`"
    );

    t.ok(
        shallow(<Button />).text()==="Submit",
        `Default value="Submit"`
    );

    t.ok(
        shallow(<Button type="submit"/>).prop('type')==="submit",
        "Has prop `type`"
    );

    t.ok(
        shallow(<Button />).prop('type')==="button",
        `Default type="button"`
    );

    t.ok(
        shallow(<Button emphasis="primary" />).hasClass(styles.primary),
        "Has prop `emphasis`"
    );

    t.ok(
        shallow(<Button />).hasClass(styles.primary),
        `Default emphasis="primary"`
    );

    t.ok(
        shallow(<Button emphasis={false} />).hasClass(styles.secondary),
        "Accepts emphasis={false}"
    );

    t.ok(
        shallow(<Button emphasis="success" />).hasClass(styles.success),
        `Accepts emphasis="success"`
    );

    t.ok(
        shallow(<Button emphasis="error" />).hasClass(styles.error),
        `Accepts emphasis="error"`
    );

    t.ok(
        shallow(<Button emphasis="warn" />).hasClass(styles.warn),
        `Accepts emphasis="warn"`
    );

    t.ok(
        shallow(<Button className="myClass" />).hasClass("myClass"),
        "Respects prop `className`"
    );

    t.ok(
        shallow(<Button disabled />).prop('disabled')===true,
        "Respects prop `disabled`"
    );


    const clickHandler = spy();
    shallow(<Button onClick={clickHandler} />).simulate('click');
    t.ok(
        clickHandler.callCount===1,
        "Respects prop `onClick`"
    );

    t.end();

});

confirm.test.js

import Confirm from './Confirm.js';
import styles from './Confirm.css';
import test from 'tape';
import {spy} from 'sinon';
import { shallow } from 'enzyme';

test('<Confirm />', t => {

    const submitHandler = spy();
    const confirmHandler = spy();
    const cancelHandler = spy();


    t.ok(
        shallow(<Confirm />).is('form'),
        "is a <form>"
    );

    t.ok(
        shallow(<Confirm className="heloooo" />).hasClass('heloooo'),
        "respect `className`"
    );

    shallow(<Confirm onSubmit={submitHandler} />).simulate('submit');
    t.ok(
        submitHandler.callCount===1,
        "respects `onSubmit`"
    );

    t.ok(
         shallow(<Confirm method="post" />).prop('method')==="post",
        "accepts form `method` prop"
    );

    t.ok(
        shallow(<Confirm />).prop('method')===undefined,
        "defaults to no form `method` prop"
    );

    t.ok(
        shallow(<Confirm action="/" />).prop('action')==="/",
        "accepts form `action` prop"
    );

    t.ok(
        shallow(<Confirm />).prop('action')===undefined,
        "defaults to no form `action` prop"
    );

    t.ok(
        shallow(<Confirm title="Sure?" />)
            .find(`.${styles.title}`)
            .first()
            .text()
            ==="Sure?",
        "accepts `title` prop"
    );

    t.ok(
        shallow(<Confirm />)
            .find(`.${styles.title}`)
            .first()
            .text()
            ==="Are you sure?",
        `defaults to title="Are you sure?"`
    );

    t.ok(
        shallow(<Confirm text="no doubt" />)
            .find(`.${styles.text}`)
            .first()
            .text()
            ==="no doubt",
        "accepts `text` prop"
    );

    t.ok(
        typeof shallow(<Confirm onConfirm={confirmHandler} />)
            .find(`.${styles.confirm}`)
            .prop('onClick')
            === "function",
        "accepts `onConfirm` prop"
    );

    t.ok(
        typeof shallow(<Confirm onCancel={cancelHandler} />)
            .find(`.${styles.cancel}`)
            .prop('onClick')
            === "function",
        "accepts `onCancel` prop"
    );


    t.ok(
        shallow(<Confirm />)
            .find(`.${styles.confirm}`)
            .first()
            .prop('value')
            ==="Yes",
        "always has a confirm button"
    );

    t.ok(
        shallow(<Confirm />)
            .find(`.${styles.confirm}`)
            .first()
            .prop('type')
            ==="submit",
        `confirm button defaults to type="submit"`
    );

    shallow(<Confirm />)
        .find(`.${styles.confirm}`)
        .first()
        .simulate('click');
    t.ok(
        submitHandler.callCount===1,
        "confirm button submits the form"
    );

    t.ok(
        shallow(<Confirm />)
            .find(`.${styles.confirm}`)
            .first()
            .prop('value')
            ==="Yes",
        `confirm button text defaults "Yes"`
    );

    t.ok(
        shallow(<Confirm confirmLabel="OK" />)
            .find(`.${styles.confirm}`)
            .first()
            .prop('value')
            ==="OK",
        "confirm button text changes with `confirmLabel` prop"
    );

    t.ok(
        shallow(<Confirm onConfirm={confirmHandler} />)
            .find(`.${styles.confirm}`)
            .first()
            .prop('type') === "button",
        "confirm button changes to type='button' when no `action` prop, no `method`, and a `onConfirm` prop"
    );

    t.ok(
        shallow(<Confirm />).find(`.${styles.cancel}`).length===0,
        "defaults to no cancel button..."
    );

    t.ok(
        shallow(<Confirm onCancel={cancelHandler} />)
            .find(`.${styles.cancel}`)
            .length
            ===1,
        "cancel button added with `onCancel` prop"
    );

    t.ok(
        shallow(<Confirm onCancel={cancelHandler} />)
            .find(`.${styles.cancel}`)
            .first()
            .prop('value')
            ==="No",
        `cancel button text defaults "No"`
    );

    t.ok(
        shallow(<Confirm onCancel={cancelHandler} cancelLabel="Nope" />)
            .find(`.${styles.cancel}`)
            .first()
            .prop('value')==="Nope",
        "cancel button text changes with `cancelLabel` prop"
    );


    t.ok(
        shallow(<Confirm hiddenData={({one: 1, two: 2})} />)
            .find(`input[type="hidden"]`)
            .length
            ===2,
        "accepts `hiddenData` prop"
    );


    t.ok(
        shallow(<Confirm hiddenData={({three: 1, four: 2, five: 5})} />)
            .find(`input[type="hidden"]`)
            .length
            ===3,
        "expects `hiddenData` to be object, creates <input type=hidden> for each object property"
    );

    t.ok(
        shallow(<Confirm hiddenData={({three: 1})} />)
            .find(`input[name="three"]`)
            .length
            ===1,
        "`hiddenData` object property names are mapped to <input name>"
    );

    t.ok(
        shallow(<Confirm hiddenData={({three: "tres"})} />)
            .find(`input[name="three"]`)
            .first()
            .prop('value')
            === "tres",
        "`hiddenData` object property values are mapped to <input value>"
    );


    t.end();

});