react-native-web-internals/dist/cjs/modules/useEvent/__tests__/index-test.native.js

React Native for Web

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from == "object" || typeof from == "function")
    for (let key of __getOwnPropNames(from))
      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
  mod
));
var import_jsx_runtime = require("react/jsx-runtime"), import_dom_event_testing_library = require("dom-event-testing-library"), React = __toESM(require("react")), ReactDOM = __toESM(require("react-dom")), import_test_utils = require("react-dom/test-utils"), import__ = __toESM(require(".."));
function createRoot(rootNode) {
  return {
    render(element) {
      ReactDOM.render(element, rootNode);
    }
  };
}
describe("use-event", function() {
  var root, rootNode;
  beforeEach(function() {
    rootNode = document.createElement("div"), document.body.appendChild(rootNode), root = createRoot(rootNode);
  }), afterEach(function() {
    root.render(null), document.body.removeChild(rootNode), rootNode = null, root = null;
  }), describe("setListener()", function() {
    test("event dispatched on target", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1);
    }), test("event dispatched on parent", function() {
      var listener = jest.fn(), listenerCapture = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), parentRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
          capture: !0
        });
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: parentRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            ref: targetRef
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var parent = (0, import_dom_event_testing_library.createEventTarget)(parentRef.current);
      (0, import_test_utils.act)(function() {
        parent.click();
      }), expect(listener).toBeCalledTimes(0), expect(listenerCapture).toBeCalledTimes(0);
    }), test("event dispatched on child", function() {
      var log = [], listener = jest.fn(function() {
        log.push("bubble");
      }), listenerCapture = jest.fn(function() {
        log.push("capture");
      }), targetRef = /* @__PURE__ */ React.createRef(), childRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
          capture: !0
        });
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            ref: childRef
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
      (0, import_test_utils.act)(function() {
        child.click();
      }), expect(listenerCapture).toBeCalledTimes(1), expect(listener).toBeCalledTimes(1), expect(log).toEqual([
        "capture",
        "bubble"
      ]);
    }), test("event dispatched on text node", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), childRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            ref: childRef,
            children: "text"
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var text = (0, import_dom_event_testing_library.createEventTarget)(childRef.current.firstChild);
      (0, import_test_utils.act)(function() {
        text.click();
      }), expect(listener).toBeCalledTimes(1);
    }), test("listener can be attached to document ", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component(param) {
        var { target: target2 } = param, addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(target2, listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          target: document
        }));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1);
    }), test("listener can be attached to window ", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component(param) {
        var { target: target2 } = param, addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(target2, listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          target: window
        }));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1);
    }), test("listener is replaceable", function() {
      var listener = jest.fn(), listenerAlt = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component(param) {
        var { onClick } = param, addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(targetRef.current, onClick);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          onClick: listener
        }));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1), (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          onClick: listenerAlt
        }));
      }), (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1), expect(listenerAlt).toBeCalledTimes(1);
    }), test("listener is removed when value is null", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component(param) {
        var { off } = param, addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(targetRef.current, off ? null : listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          off: !1
        }));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(1), (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
          off: !0
        }));
      }), listener.mockClear(), (0, import_test_utils.act)(function() {
        target.click();
      }), expect(listener).toBeCalledTimes(0);
    }), test("custom event dispatched on target", function() {
      var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addMagicEventListener = (0, import__.default)("magic-event");
        return React.useEffect(function() {
          addMagicEventListener(targetRef.current, listener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      }), (0, import_test_utils.act)(function() {
        var event = new CustomEvent("magic-event", {
          bubbles: !0
        });
        targetRef.current.dispatchEvent(event);
      }), expect(listener).toBeCalledTimes(1);
    }), test("listeners can be set on multiple targets simultaneously", function() {
      var log = [], targetRef = /* @__PURE__ */ React.createRef(), parentRef = /* @__PURE__ */ React.createRef(), childRef = /* @__PURE__ */ React.createRef(), listener = jest.fn(function(e) {
        log.push([
          "bubble",
          e.currentTarget.id
        ]);
      }), listenerCapture = jest.fn(function(e) {
        log.push([
          "capture",
          e.currentTarget.id
        ]);
      });
      function Component() {
        var addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
          capture: !0
        });
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener), addClickListener(parentRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture), addClickCaptureListener(parentRef.current, listenerCapture);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          id: "parent",
          ref: parentRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            id: "target",
            ref: targetRef,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
              ref: childRef
            })
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
      (0, import_test_utils.act)(function() {
        child.click();
      }), expect(listenerCapture).toBeCalledTimes(2), expect(listener).toBeCalledTimes(2), expect(log).toEqual([
        [
          "capture",
          "parent"
        ],
        [
          "capture",
          "target"
        ],
        [
          "bubble",
          "target"
        ],
        [
          "bubble",
          "parent"
        ]
      ]);
    }), test("listeners are specific to each event handle", function() {
      var log = [], targetRef = /* @__PURE__ */ React.createRef(), childRef = /* @__PURE__ */ React.createRef(), listener = jest.fn(function(e) {
        log.push([
          "bubble",
          "target"
        ]);
      }), listenerAlt = jest.fn(function(e) {
        log.push([
          "bubble",
          "target-alt"
        ]);
      }), listenerCapture = jest.fn(function(e) {
        log.push([
          "capture",
          "target"
        ]);
      }), listenerCaptureAlt = jest.fn(function(e) {
        log.push([
          "capture",
          "target-alt"
        ]);
      });
      function Component() {
        var addClickListener = (0, import__.default)("click"), addClickAltListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
          capture: !0
        }), addClickCaptureAltListener = (0, import__.default)("click", {
          capture: !0
        });
        return React.useEffect(function() {
          addClickListener(targetRef.current, listener), addClickAltListener(targetRef.current, listenerAlt), addClickCaptureListener(targetRef.current, listenerCapture), addClickCaptureAltListener(targetRef.current, listenerCaptureAlt);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          id: "target",
          ref: targetRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            ref: childRef
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
      (0, import_test_utils.act)(function() {
        child.click();
      }), expect(listenerCapture).toBeCalledTimes(1), expect(listenerCaptureAlt).toBeCalledTimes(1), expect(listener).toBeCalledTimes(1), expect(listenerAlt).toBeCalledTimes(1), expect(log).toEqual([
        [
          "capture",
          "target"
        ],
        [
          "capture",
          "target-alt"
        ],
        [
          "bubble",
          "target"
        ],
        [
          "bubble",
          "target-alt"
        ]
      ]);
    });
  }), describe("cleanup", function() {
    test("removes all listeners for given event type from targets", function() {
      var clickListener = jest.fn();
      function Component() {
        var addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(document, clickListener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {})), root.render(null);
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(document);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(clickListener).toBeCalledTimes(0);
    });
  }), describe("stopPropagation and stopImmediatePropagation", function() {
    test("stopPropagation works as expected", function() {
      var childListener = jest.fn(function(e) {
        e.stopPropagation();
      }), targetListener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), childRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addClickListener(childRef.current, childListener), addClickListener(targetRef.current, targetListener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
            ref: childRef
          })
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
      (0, import_test_utils.act)(function() {
        child.click();
      }), expect(childListener).toBeCalledTimes(1), expect(targetListener).toBeCalledTimes(0);
    }), test("stopImmediatePropagation works as expected", function() {
      var firstListener = jest.fn(function(e) {
        e.stopImmediatePropagation();
      }), secondListener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef();
      function Component() {
        var addFirstClickListener = (0, import__.default)("click"), addSecondClickListener = (0, import__.default)("click");
        return React.useEffect(function() {
          addFirstClickListener(targetRef.current, firstListener), addSecondClickListener(targetRef.current, secondListener);
        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
          ref: targetRef
        });
      }
      (0, import_test_utils.act)(function() {
        root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
      });
      var target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
      (0, import_test_utils.act)(function() {
        target.click();
      }), expect(firstListener).toBeCalledTimes(1), expect(secondListener).toBeCalledTimes(0);
    });
  });
});
//# sourceMappingURL=index-test.js.map