@enact/ui/Touchable/tests/Touchable-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

var _react = require("@testing-library/react");
var _config = require("../config");
var _Touchable = _interopRequireDefault(require("../Touchable"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "id", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "onTouchEnd"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
describe('Touchable', function () {
  beforeEach(function () {
    jest.useFakeTimers();
  });
  afterEach(function () {
    jest.useRealTimers();
  });
  var data;
  var DivComponent = function DivComponent(_ref) {
    var _ref$children = _ref.children,
      children = _ref$children === void 0 ? 'Toggle' : _ref$children,
      id = _ref.id,
      onClick = _ref.onClick,
      onMouseDown = _ref.onMouseDown,
      onMouseEnter = _ref.onMouseEnter,
      onMouseLeave = _ref.onMouseLeave,
      onMouseMove = _ref.onMouseMove,
      onMouseUp = _ref.onMouseUp,
      onTouchStart = _ref.onTouchStart,
      onTouchEnd = _ref.onTouchEnd,
      props = _objectWithoutProperties(_ref, _excluded);
    data = props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "data-testid": "component",
      id: id,
      onClick: onClick,
      onMouseDown: onMouseDown,
      onMouseEnter: onMouseEnter,
      onMouseMove: onMouseMove,
      onMouseUp: onMouseUp,
      onMouseLeave: onMouseLeave,
      onTouchStart: onTouchStart,
      onTouchEnd: onTouchEnd,
      children: children
    });
  };
  var preventDefault = function preventDefault(ev) {
    return ev.preventDefault();
  };
  describe('config', function () {
    beforeEach(_config.resetDefaultConfig);
    afterEach(_config.resetDefaultConfig);
    test('should pass active state to the wrapped component when activeProp is configured', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
      var expected = data.active;
      expect(expected).toBeDefined();
    });
    test('should update state configurations onHold events', function (done) {
      var holdConfig = {
        events: [{
          name: 'hold',
          time: 10
        }],
        frequency: 10
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onHoldStart: function onHoldStart() {},
          holdConfig: holdConfig
        })),
        rerender = _render.rerender;
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        holdConfig: holdConfig,
        onHold: handler,
        onHoldStart: function onHoldStart() {}
      }));
      jest.runOnlyPendingTimers();
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should update state configurations onHoldStart events', function (done) {
      var holdConfig = {
        events: [{
          name: 'hold',
          time: 10
        }],
        frequency: 10
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          holdConfig: holdConfig,
          onHold: function onHold() {}
        })),
        rerender = _render2.rerender;
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        holdConfig: holdConfig,
        onHold: function onHold() {},
        onHoldStart: handler
      }));
      jest.runOnlyPendingTimers();
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should not call onHoldStart if mouse leaved', function (done) {
      var holdConfig = {
        events: [{
          name: 'hold',
          time: 10
        }],
        frequency: 10
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          holdConfig: holdConfig,
          onHold: function onHold() {}
        })),
        rerender = _render3.rerender;
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseLeave(component, ev);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        holdConfig: holdConfig,
        onHold: function onHold() {},
        onHoldStart: handler
      }));
      jest.runOnlyPendingTimers();
      expect(handler).not.toHaveBeenCalled();
      done();
    });
    test('should update state configurations onHoldEnd events', function (done) {
      var holdConfig = {
        events: [{
          name: 'hold',
          time: 10
        }],
        frequency: 10
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          holdConfig: holdConfig,
          onHold: function onHold() {}
        })),
        rerender = _render4.rerender;
      var component = _react.screen.getByTestId('component');
      var ev = {
        currentTarget: {}
      };
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseEnter(component, ev);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        holdConfig: holdConfig,
        onHold: function onHold() {},
        onHoldEnd: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.mouseUp(component, ev);
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should update state configurations onHoldEnd events if holdConfig.cancelOnMove is true', function (done) {
      var holdConfig = {
        cancelOnMove: true,
        events: [{
          name: 'hold',
          time: 10
        }],
        frequency: 10
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          holdConfig: holdConfig,
          onHold: function onHold() {}
        })),
        rerender = _render5.rerender;
      var component = _react.screen.getByTestId('component');
      var ev = {
        currentTarget: {}
      };
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseMove(component, ev);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        holdConfig: holdConfig,
        onHold: function onHold() {},
        onHoldEnd: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.mouseUp(component, ev);
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should update state configurations onPinchStart events', function (done) {
      var pinchConfig = {
        global: true,
        moveTolerance: 0
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          pinchConfig: pinchConfig,
          onPinch: function onPinch() {}
        })),
        rerender = _render6.rerender;
      var component = _react.screen.getByTestId('component');
      var touchEvent = {
        timeStamp: 1,
        type: 'touch',
        clientX: 0,
        clientY: 0,
        changedTouches: [{
          clientX: 0,
          clientY: 0
        }, {
          clientX: 10,
          clientY: 10
        }],
        targetTouches: [{
          clientX: 0,
          clientY: 0
        }, {
          clientX: 10,
          clientY: 10
        }]
      };
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        pinchConfig: pinchConfig,
        onPinch: function onPinch() {},
        onPinchStart: handler
      }));
      _react.fireEvent.touchStart(component, touchEvent);
      _react.fireEvent.mouseDown(component, touchEvent);
      jest.runOnlyPendingTimers();
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should update state configurations onPinchEnd events', function (done) {
      var pinchConfig = {
        global: true,
        moveTolerance: 0
      };
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          pinchConfig: pinchConfig,
          onPinch: function onPinch() {}
        })),
        rerender = _render7.rerender;
      var component = _react.screen.getByTestId('component');
      var touchEvent = {
        timeStamp: 1,
        type: 'touch',
        clientX: 0,
        clientY: 0,
        changedTouches: [{
          clientX: 0,
          clientY: 0
        }, {
          clientX: 10,
          clientY: 10
        }],
        targetTouches: [{
          clientX: 0,
          clientY: 0
        }, {
          clientX: 10,
          clientY: 10
        }]
      };
      _react.fireEvent.touchStart(component, touchEvent);
      _react.fireEvent.mouseDown(component, touchEvent);
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        pinchConfig: pinchConfig,
        onPinch: function onPinch() {},
        onPinchEnd: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.touchEnd(component, touchEvent);
      _react.fireEvent.mouseUp(component, touchEvent);
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should merge configurations', function () {
      (0, _config.configure)({
        flick: {
          maxMoves: 10
        }
      });
      var expected = 10;
      var actual = (0, _config.getConfig)().flick.maxMoves;
      expect(actual).toBe(expected);
    });
    test('should omit unsupported configurations', function () {
      (0, _config.configure)({
        flick: {
          notSupported: 10
        }
      });

      // eslint-disable-next-line no-undefined
      var expected = undefined;
      var actual = (0, _config.getConfig)().flick.notSupported;
      expect(actual).toBe(expected);
    });
    test('should call onFlick event', function (done) {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onFlick: handler
      }));
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.mouseDown(component, {
        clientX: 10,
        clientY: 20
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 20,
        clientY: 30
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 30,
        clientY: 40
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 40,
        clientY: 50
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseUp(component, {
        clientX: 40,
        clientY: 50
      });
      jest.runOnlyPendingTimers();
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should not update config when local object is mutated', function () {
      var cfg = {
        flick: {
          maxMoves: 10
        }
      };
      (0, _config.configure)(cfg);
      cfg.flick.maxMoves = 20;
      var expected = 10;
      var actual = (0, _config.getConfig)().flick.maxMoves;
      expect(actual).toBe(expected);
    });
    test('should not update config when local hold.events array is mutated', function () {
      var cfg = {
        hold: {
          events: [{
            name: 'hold',
            time: 600
          }]
        }
      };
      (0, _config.configure)(cfg);
      cfg.hold.events[0].time = 2000;
      var expected = 600;
      var actual = (0, _config.getConfig)().hold.events[0].time;
      expect(actual).toBe(expected);
    });
    test('should call onDragStart event', function (done) {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDrag: function onDrag() {}
        })),
        rerender = _render8.rerender;
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.mouseDown(component, {
        clientX: 10,
        clientY: 20
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onDrag: function onDrag() {},
        onDragStart: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.mouseEnter(component, {
        clientX: 10,
        clientY: 20
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 20,
        clientY: 30
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 30,
        clientY: 40
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 40,
        clientY: 50
      });
      _react.fireEvent.mouseUp(component, {
        clientX: 40,
        clientY: 50
      });
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should call onDragEnd event', function (done) {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDrag: function onDrag() {}
        })),
        rerender = _render9.rerender;
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.mouseDown(component, {
        clientX: 10,
        clientY: 20
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 20,
        clientY: 30
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 30,
        clientY: 40
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 40,
        clientY: 50
      });
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onDrag: function onDrag() {},
        onDragEnd: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.mouseUp(component, {
        clientX: 40,
        clientY: 50
      });
      expect(handler).toHaveBeenCalled();
      done();
    });
    test('should not call onDragEnd on mouseLeave', function (done) {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDrag: function onDrag() {}
        })),
        rerender = _render0.rerender;
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.mouseDown(component, {
        clientX: 10,
        clientY: 20
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 20,
        clientY: 30
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 30,
        clientY: 40
      });
      (0, _react.act)(function () {
        return jest.advanceTimersByTime(20);
      });
      _react.fireEvent.mouseMove(component, {
        clientX: 40,
        clientY: 50
      });
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onDrag: function onDrag() {},
        onDragEnd: handler
      }));
      jest.runOnlyPendingTimers();
      _react.fireEvent.mouseLeave(component);
      expect(handler).not.toHaveBeenCalled();
      done();
    });
  });
  describe('#onDown', function () {
    test('should invoke onDown handle on mouse down', function () {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onDown: handler
      }));
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.mouseDown(component, {});
      var expected = 1;
      expect(handler).toHaveBeenCalledTimes(expected);
    });
  });
  describe('#onUp', function () {
    test('should invoke onUp handle on mouse up', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onUp: handler
      }));
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseUp(component, ev);
      var expected = 1;
      expect(handler).toHaveBeenCalledTimes(expected);
    });
  });
  describe('#onTap', function () {
    test('should be called on mouse up', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onTap: handler
      }));
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseUp(component, ev);
      var expected = 1;
      expect(handler).toHaveBeenCalledTimes(expected);
    });
    test('should be called on click', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onTap: handler
      }));
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.click(component, {});
      var expected = 1;
      expect(handler).toHaveBeenCalledTimes(expected);
    });
    test('should be called before onClick on click', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onClick: handler,
        onTap: handler
      }));
      var component = _react.screen.getByTestId('component');
      _react.fireEvent.click(component, {});
      var expected = ['onTap', 'click'];
      var actual = handler.mock.calls.map(function (call) {
        return call[0].type;
      });
      expect(actual).toEqual(expected);
    });
    test('should be called before onClick on mouse up', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onClick: handler,
        onTap: handler
      }));
      var component = _react.screen.getByTestId('component');
      var mouseDownEvent = _react.createEvent.mouseDown(component, {});
      var mouseUpEvent = _react.createEvent.mouseUp(component, {});
      var clickEvent = _react.createEvent.click(component, {});

      // a matching timeStamp is used by Touchable to prevent multiple onTaps on "true"
      // click (mouseup + click)
      Object.defineProperty(mouseDownEvent, 'timeStamp', {
        value: 1
      });
      Object.defineProperty(mouseUpEvent, 'timeStamp', {
        value: 1
      });
      Object.defineProperty(clickEvent, 'timeStamp', {
        value: 1
      });
      (0, _react.fireEvent)(component, mouseDownEvent);
      (0, _react.fireEvent)(component, mouseUpEvent);
      (0, _react.fireEvent)(component, clickEvent);
      var expected = ['onTap', 'click'];
      var actual = handler.mock.calls.map(function (call) {
        return call[0].type;
      });
      expect(actual).toEqual(expected);
    });
    test('should be preventable via onUp handler', function () {
      var Component = (0, _Touchable["default"])({
        activeProp: 'active'
      }, DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        onTap: handler,
        onUp: preventDefault
      }));
      var component = _react.screen.getByTestId('component');
      var ev = {};
      _react.fireEvent.mouseDown(component, ev);
      _react.fireEvent.mouseUp(component, ev);
      expect(handler).not.toHaveBeenCalled();
    });
  });
  describe('state management', function () {
    describe('activate', function () {
      test('should update active state on mouse down when activeProp is configured', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        var handler = jest.fn();
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDown: handler
        }));
        var component = _react.screen.getByTestId('component');
        var ev = {};
        var beforeDown = data.active;
        _react.fireEvent.mouseDown(component, ev);
        var afterDown = data.active;
        var expected = false;
        var actual = beforeDown === afterDown;
        expect(actual).toBe(expected);
      });
      test('should not update active state on mouse down when disabled', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        var handler = jest.fn();
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          disabled: true,
          onDown: handler
        }));
        var component = _react.screen.getByTestId('component');
        _react.fireEvent.mouseDown(component, {});
        var expected = false;
        var actual = data.active;
        expect(actual).toBe(expected);
      });
      test('should not update active state on mouse down when preventDefault is called', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        var handler = function handler(ev) {
          return ev.preventDefault();
        };
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDown: handler
        }));
        var component = _react.screen.getByTestId('component');
        _react.fireEvent.mouseDown(component, {});
        var expected = false;
        var actual = data.active;
        expect(actual).toBe(expected);
      });
    });
    describe('deactivate', function () {
      test('should update active state on mouse up when activeProp is configured', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        var handler = jest.fn();
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDown: handler
        }));
        var component = _react.screen.getByTestId('component');
        var ev = {};
        _react.fireEvent.mouseDown(component, ev);
        var beforeUp = data.active;
        _react.fireEvent.mouseUp(component, ev);
        var afterUp = data.active;
        var expected = false;
        var actual = beforeUp === afterUp;
        expect(actual).toBe(expected);
      });
      test('should not update active state on mouse down when disabled', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        var handler = jest.fn();
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          disabled: true,
          onDown: handler
        }));
        var component = _react.screen.getByTestId('component');
        var ev = {};
        _react.fireEvent.mouseDown(component, ev);
        var beforeUp = data.active;
        _react.fireEvent.mouseUp(component, ev);
        var afterUp = data.active;
        var expected = true;
        var actual = beforeUp === afterUp;
        expect(actual).toBe(expected);
      });
      test('should not update active state on mouse down when preventDefault is called', function () {
        var Component = (0, _Touchable["default"])({
          activeProp: 'active'
        }, DivComponent);
        (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          onDown: preventDefault
        }));
        var component = _react.screen.getByTestId('component');
        var ev = {};
        _react.fireEvent.mouseDown(component, ev);
        var beforeUp = data.active;
        _react.fireEvent.mouseUp(component, ev);
        var afterUp = data.active;
        var expected = true;
        var actual = beforeUp === afterUp;
        expect(actual).toBe(expected);
      });
    });
  });
  describe('touch', function () {
    test('should only emit onTap once when tapping an child instance of Touchable', function () {
      var Component = (0, _Touchable["default"])(DivComponent);
      var handler = jest.fn();
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        id: "outer",
        onTap: handler,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          id: "inner"
        })
      }));
      var innerComponent = _react.screen.getAllByTestId('component')[1];
      var mouseEvent = {
        timeStamp: 1
      };
      var touchEvent = {
        timeStamp: 1,
        changedTouches: [{
          clientX: 0,
          clientY: 0
        }],
        targetTouches: [{
          clientX: 0,
          clientY: 0
        }]
      };
      _react.fireEvent.touchStart(innerComponent, touchEvent);
      _react.fireEvent.touchEnd(innerComponent, touchEvent);
      _react.fireEvent.mouseDown(innerComponent, mouseEvent);
      _react.fireEvent.mouseUp(innerComponent, mouseEvent);
      expect(handler).toHaveBeenCalled();
    });
  });
});