Confirm.__spec__.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();

});