Tappable Test

[irvinebroque]

Related to #15 -- I was writing a unit test for another component that uses react-tappable, with the following behavior (simplified to isolate react-tappable):

// __tests__/Tappable-test.js

"use strict";

jest.dontMock('react-tappable');
describe('Button', function() {
  it('fires callback when tapped', function() {
    var React = require('react/addons');
    var Tappable = require('react-tappable');
    var TestUtils = React.addons.TestUtils;

    // mock callback
    var callback = jest.genMockFunction();

    // Render a button with the mock callback
    var button = TestUtils.renderIntoDocument(
      <Tappable onTap={callback}></Tappable>
    );

    // Get the node
    var node = TestUtils.findRenderedDOMComponentWithTag(button, 'span').getDOMNode();

    // Fire the touch events
    TestUtils.Simulate.touchStart(node, TestUtils.nativeTouchData(0, 0));
    TestUtils.Simulate.touchEnd(node, TestUtils.nativeTouchData(0, 0));

    expect(callback).toBeCalled();

  });
});

The test case fails with the following trace:

  - Expected Function to be called.
        at Spec.<anonymous> (/vagrant/modules/javascript/www/components/Button/__tests__/Tappable-test.js:23:22)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15) 

What am I missing here about why the callback does not fire, specific to touch events? A similar test case with a mouseDown and mouseUp simulated events does pass:

// __tests__/Tappable-click-test.js

"use strict";

jest.dontMock('react-tappable');
describe('Button', function() {
  it('fires callback when tapped', function() {
    var React = require('react/addons');
    var Tappable = require('react-tappable');
    var TestUtils = React.addons.TestUtils;

    // mock callback
    var callback = jest.genMockFunction();

    // Render a button with the mock callback
    var button = TestUtils.renderIntoDocument(
      <Tappable onTap={callback}></Tappable>
    );

    // Get the node
    var node = TestUtils.findRenderedDOMComponentWithTag(button, 'span').getDOMNode();

    // Fire the touch events
    TestUtils.Simulate.mouseDown(node);
    TestUtils.Simulate.mouseUp(node);

    expect(callback).toBeCalled();

  });
});

(I'd be happy to contribute tests in a PR, but want to make sure I understand intended behavior with touch events)

[talyssonoc]

Had a problem that somehow looks like this, I had a default prop value that was a funcion and tried to pass another function, but it wasn't replace. I guess renderIntoDocument doesn't pass functions as props, just serializable values.

[kiki-le-singe]

@irvinebroque Thanks it ( TestUtils.Simulate.mouseDown(node), ... ) works :)