react-native-web-internals
Version:
React Native for Web
243 lines (242 loc) • 14.6 kB
JavaScript
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_dom_event_testing_library = require("dom-event-testing-library"), React = __toESM(require("react")), ReactDOM = __toESM(require("react-dom")), ReactDOMServer = __toESM(require("react-dom/server")), import_test_utils = require("react-dom/test-utils"), import__ = __toESM(require("..")), import_jsx_runtime = require("react/jsx-runtime");
function createRoot(rootNode) {
return {
render(element) {
ReactDOM.render(element, rootNode);
}
};
}
describe("create-event-handle", () => {
let root, rootNode;
beforeEach(() => {
rootNode = document.createElement("div"), document.body.appendChild(rootNode), root = createRoot(rootNode);
}), afterEach(() => {
root.render(null), document.body.removeChild(rootNode), rootNode = null, root = null;
}), test("can render correctly using ReactDOMServer", () => {
const listener = jest.fn(), targetRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(() => addClickListener(targetRef.current, listener)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
const output = ReactDOMServer.renderToString(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
expect(output).toBe('<div data-reactroot=""></div>');
}), describe("createEventTarget()", () => {
test("event dispatched on target", () => {
const listener = jest.fn(), targetRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(() => addClickListener(targetRef.current, listener)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
(0, import_test_utils.act)(() => {
target.click();
}), expect(listener).toBeCalledTimes(1);
}), test("event dispatched on parent", () => {
const listener = jest.fn(), listenerCapture = jest.fn(), targetRef = React.createRef(), parentRef = React.createRef(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
});
function Component() {
return React.useEffect(() => {
const removeClickListener = addClickListener(targetRef.current, listener), removeClickCaptureListener = addClickCaptureListener(
targetRef.current,
listenerCapture
);
return () => {
removeClickListener(), removeClickCaptureListener();
};
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: parentRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef }) });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const parent = (0, import_dom_event_testing_library.createEventTarget)(parentRef.current);
(0, import_test_utils.act)(() => {
parent.click();
}), expect(listener).toBeCalledTimes(0), expect(listenerCapture).toBeCalledTimes(0);
}), test("event dispatched on child", () => {
const log = [], listener = jest.fn(() => {
log.push("bubble");
}), listenerCapture = jest.fn(() => {
log.push("capture");
}), targetRef = React.createRef(), childRef = React.createRef(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
});
function Component() {
return React.useEffect(() => {
const removeClickListener = addClickListener(targetRef.current, listener), removeClickCaptureListener = addClickCaptureListener(
targetRef.current,
listenerCapture
);
return () => {
removeClickListener(), removeClickCaptureListener();
};
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: childRef }) });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
(0, import_test_utils.act)(() => {
child.click();
}), expect(listenerCapture).toBeCalledTimes(1), expect(listener).toBeCalledTimes(1), expect(log).toEqual(["capture", "bubble"]);
}), test("event dispatched on text node", () => {
const listener = jest.fn(), targetRef = React.createRef(), childRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(() => 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)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const text = (0, import_dom_event_testing_library.createEventTarget)(childRef.current.firstChild);
(0, import_test_utils.act)(() => {
text.click();
}), expect(listener).toBeCalledTimes(1);
}), test("listener can be attached to document", () => {
const listener = jest.fn(), targetRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component({ target: target2 }) {
return React.useEffect(() => addClickListener(target2, listener)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { target: document }));
});
const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
(0, import_test_utils.act)(() => {
target.click();
}), expect(listener).toBeCalledTimes(1);
}), test("listener can be attached to window ", () => {
const listener = jest.fn(), targetRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component({ target: target2 }) {
return React.useEffect(() => addClickListener(target2, listener)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { target: window }));
});
const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
(0, import_test_utils.act)(() => {
target.click();
}), expect(listener).toBeCalledTimes(1);
}), test("custom event dispatched on target", () => {
const listener = jest.fn(), targetRef = React.createRef(), addMagicEventListener = (0, import__.default)("magic-event");
function Component() {
return React.useEffect(() => addMagicEventListener(targetRef.current, listener)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
}), (0, import_test_utils.act)(() => {
const event = new CustomEvent("magic-event", { bubbles: !0 });
targetRef.current.dispatchEvent(event);
}), expect(listener).toBeCalledTimes(1);
}), test("listeners can be set on multiple targets simultaneously", () => {
const log = [], targetRef = React.createRef(), parentRef = React.createRef(), childRef = React.createRef(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
}), listener = jest.fn((e) => {
log.push(["bubble", e.currentTarget.id]);
}), listenerCapture = jest.fn((e) => {
log.push(["capture", e.currentTarget.id]);
});
function Component() {
return React.useEffect(() => {
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)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
(0, import_test_utils.act)(() => {
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", () => {
const log = [], targetRef = React.createRef(), childRef = React.createRef(), addClickListener = (0, import__.default)("click"), addClickAltListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
}), addClickCaptureAltListener = (0, import__.default)("click", {
capture: !0
}), listener = jest.fn((e) => {
log.push(["bubble", "target"]);
}), listenerAlt = jest.fn((e) => {
log.push(["bubble", "target-alt"]);
}), listenerCapture = jest.fn((e) => {
log.push(["capture", "target"]);
}), listenerCaptureAlt = jest.fn((e) => {
log.push(["capture", "target-alt"]);
});
function Component() {
return React.useEffect(() => {
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)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
(0, import_test_utils.act)(() => {
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("stopPropagation and stopImmediatePropagation", () => {
test("stopPropagation works as expected", () => {
const childListener = jest.fn((e) => {
e.stopPropagation();
}), targetListener = jest.fn(), targetRef = React.createRef(), childRef = React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(() => {
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)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const child = (0, import_dom_event_testing_library.createEventTarget)(childRef.current);
(0, import_test_utils.act)(() => {
child.click();
}), expect(childListener).toBeCalledTimes(1), expect(targetListener).toBeCalledTimes(0);
}), test("stopImmediatePropagation works as expected", () => {
const firstListener = jest.fn((e) => {
e.stopImmediatePropagation();
}), secondListener = jest.fn(), targetRef = React.createRef(), addFirstClickListener = (0, import__.default)("click"), addSecondClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(() => {
addFirstClickListener(targetRef.current, firstListener), addSecondClickListener(targetRef.current, secondListener);
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: targetRef });
}
(0, import_test_utils.act)(() => {
root.render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
});
const target = (0, import_dom_event_testing_library.createEventTarget)(targetRef.current);
(0, import_test_utils.act)(() => {
target.click();
}), expect(firstListener).toBeCalledTimes(1), expect(secondListener).toBeCalledTimes(0);
});
});
});
//# sourceMappingURL=index-test.js.map