simulate-gotcha.js

import test from "tape";
import { TabBar, TabItem} from "./tabs";

test.only('<TabBar />', t => {
    // From the enzyme documentation re: Simulate...
    //
    // "Even though the name would imply this simulates an actual event, .simulate() will in fact
    // target the component's prop based on the event you give it. For example, .simulate('click')
    // will actually get the onClick prop and call it."
    //
    // This means we cannot create components that use the "onClick" in any way other than just calling it.
    // For example, if we were to do `onClick={() => this.props.onClick(someData)}` the simulated
    // test wouldn't work as it wouldn't call the new function, instead it would just find the prop
    // and call that directly
    //
    t.test('<TabItem /> calls the provided click handler with key when clicked', assert => {
        assert.plan(1);
        const key = "a";
        const handler = (k) => {
            assert.pass("onClick handler called");
            assert.equal(k, key, "handler called with correct key"); //fails, but actually works in practise
        }
        const tabBar = shallow(<TabBar tabs={tabs} selectedTab={key} onClick={handler} />)
        const items = tabBar.find(TabItem);
        const item = items.first().simulate('click');
    });
});