react-native-web-internals
Version:
React Native for Web
352 lines (351 loc) • 16.3 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_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")), ReactDOMServer = __toESM(require("react-dom/server")), import_test_utils = require("react-dom/test-utils"), import__ = __toESM(require(".."));
function createRoot(rootNode) {
return {
render(element) {
ReactDOM.render(element, rootNode);
}
};
}
describe("create-event-handle", 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;
}), test("can render correctly using ReactDOMServer", function() {
var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(function() {
return addClickListener(targetRef.current, listener);
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
ref: targetRef
});
}
var output = ReactDOMServer.renderToString(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {}));
expect(output).toBe('<div data-reactroot=""></div>');
}), describe("createEventTarget()", function() {
test("event dispatched on target", function() {
var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(function() {
return 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(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
});
function Component() {
return React.useEffect(function() {
var removeClickListener = addClickListener(targetRef.current, listener), removeClickCaptureListener = addClickCaptureListener(targetRef.current, listenerCapture);
return function() {
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)(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(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
});
function Component() {
return React.useEffect(function() {
var removeClickListener = addClickListener(targetRef.current, listener), removeClickCaptureListener = addClickCaptureListener(targetRef.current, listenerCapture);
return function() {
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)(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(), addClickListener = (0, import__.default)("click");
function Component() {
return React.useEffect(function() {
return 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(), addClickListener = (0, import__.default)("click");
function Component(param) {
var { target: target2 } = param;
return React.useEffect(function() {
return 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(), addClickListener = (0, import__.default)("click");
function Component(param) {
var { target: target2 } = param;
return React.useEffect(function() {
return 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("custom event dispatched on target", function() {
var listener = jest.fn(), targetRef = /* @__PURE__ */ React.createRef(), addMagicEventListener = (0, import__.default)("magic-event");
function Component() {
return React.useEffect(function() {
return 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(), addClickListener = (0, import__.default)("click"), addClickCaptureListener = (0, import__.default)("click", {
capture: !0
}), listener = jest.fn(function(e) {
log.push([
"bubble",
e.currentTarget.id
]);
}), listenerCapture = jest.fn(function(e) {
log.push([
"capture",
e.currentTarget.id
]);
});
function Component() {
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(), 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(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() {
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("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(), addClickListener = (0, import__.default)("click");
function Component() {
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(), addFirstClickListener = (0, import__.default)("click"), addSecondClickListener = (0, import__.default)("click");
function Component() {
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