react-native-web-internals
Version:
React Native for Web
392 lines (391 loc) • 15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createEventTarget } from "dom-event-testing-library";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";
import useEvent from "../index.native.js";
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(targetRef.current, listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var target = createEventTarget(targetRef.current);
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 = useEvent("click"),
addClickCaptureListener = useEvent("click", {
capture: !0
});
return React.useEffect(function () {
addClickListener(targetRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture);
}), /* @__PURE__ */_jsx("div", {
ref: parentRef,
children: /* @__PURE__ */_jsx("div", {
ref: targetRef
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var parent = createEventTarget(parentRef.current);
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 = useEvent("click"),
addClickCaptureListener = useEvent("click", {
capture: !0
});
return React.useEffect(function () {
addClickListener(targetRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef,
children: /* @__PURE__ */_jsx("div", {
ref: childRef
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var child = createEventTarget(childRef.current);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(targetRef.current, listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef,
children: /* @__PURE__ */_jsx("div", {
ref: childRef,
children: "text"
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var text = createEventTarget(childRef.current.firstChild);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(target2, listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
target: document
}));
});
var target = createEventTarget(targetRef.current);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(target2, listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
target: window
}));
});
var target = createEventTarget(targetRef.current);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(targetRef.current, onClick);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
onClick: listener
}));
});
var target = createEventTarget(targetRef.current);
act(function () {
target.click();
}), expect(listener).toBeCalledTimes(1), act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
onClick: listenerAlt
}));
}), 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 = useEvent("click");
return React.useEffect(function () {
addClickListener(targetRef.current, off ? null : listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
off: !1
}));
});
var target = createEventTarget(targetRef.current);
act(function () {
target.click();
}), expect(listener).toBeCalledTimes(1), act(function () {
root.render(/* @__PURE__ */_jsx(Component, {
off: !0
}));
}), listener.mockClear(), 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 = useEvent("magic-event");
return React.useEffect(function () {
addMagicEventListener(targetRef.current, listener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
}), 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 = useEvent("click"),
addClickCaptureListener = useEvent("click", {
capture: !0
});
return React.useEffect(function () {
addClickListener(targetRef.current, listener), addClickListener(parentRef.current, listener), addClickCaptureListener(targetRef.current, listenerCapture), addClickCaptureListener(parentRef.current, listenerCapture);
}), /* @__PURE__ */_jsx("div", {
id: "parent",
ref: parentRef,
children: /* @__PURE__ */_jsx("div", {
id: "target",
ref: targetRef,
children: /* @__PURE__ */_jsx("div", {
ref: childRef
})
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var child = createEventTarget(childRef.current);
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 = useEvent("click"),
addClickAltListener = useEvent("click"),
addClickCaptureListener = useEvent("click", {
capture: !0
}),
addClickCaptureAltListener = useEvent("click", {
capture: !0
});
return React.useEffect(function () {
addClickListener(targetRef.current, listener), addClickAltListener(targetRef.current, listenerAlt), addClickCaptureListener(targetRef.current, listenerCapture), addClickCaptureAltListener(targetRef.current, listenerCaptureAlt);
}), /* @__PURE__ */_jsx("div", {
id: "target",
ref: targetRef,
children: /* @__PURE__ */_jsx("div", {
ref: childRef
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var child = createEventTarget(childRef.current);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(document, clickListener);
}), /* @__PURE__ */_jsx("div", {});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {})), root.render(null);
});
var target = createEventTarget(document);
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 = useEvent("click");
return React.useEffect(function () {
addClickListener(childRef.current, childListener), addClickListener(targetRef.current, targetListener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef,
children: /* @__PURE__ */_jsx("div", {
ref: childRef
})
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var child = createEventTarget(childRef.current);
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 = useEvent("click"),
addSecondClickListener = useEvent("click");
return React.useEffect(function () {
addFirstClickListener(targetRef.current, firstListener), addSecondClickListener(targetRef.current, secondListener);
}), /* @__PURE__ */_jsx("div", {
ref: targetRef
});
}
act(function () {
root.render(/* @__PURE__ */_jsx(Component, {}));
});
var target = createEventTarget(targetRef.current);
act(function () {
target.click();
}), expect(firstListener).toBeCalledTimes(1), expect(secondListener).toBeCalledTimes(0);
});
});
});
//# sourceMappingURL=index-test.native.js.map