@khanacademy/wonder-blocks-clickable 2.1.2

package/src/components/__tests__/clickable-behavior.test.js

@@ -0,0 +1,1313 @@
+/* eslint-disable max-lines */
+// @flow
+import * as React from "react";
+import {MemoryRouter, Switch, Route} from "react-router-dom";
+import {mount, shallow} from "enzyme";
+
+import getClickableBehavior from "../../util/get-clickable-behavior.js";
+import ClickableBehavior from "../clickable-behavior.js";
+
+const keyCodes = {
+    tab: 9,
+    enter: 13,
+    space: 32,
+};
+
+const wait = (delay: number = 0) =>
+    new Promise((resolve, reject) => {
+        // eslint-disable-next-line no-restricted-syntax
+        return setTimeout(resolve, delay);
+    });
+
+describe("ClickableBehavior", () => {
+    beforeEach(() => {
+        // Note: window.location.assign and window.open need mock functions in
+        // the testing environment.
+        window.location.assign = jest.fn();
+        window.open = jest.fn();
+    });
+
+    afterEach(() => {
+        window.location.assign.mockClear();
+        window.open.mockClear();
+    });
+
+    it("renders a label", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(onClick).not.toHaveBeenCalled();
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it("changes only hovered state on mouse enter/leave", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("hovered")).toEqual(false);
+        button.simulate("mouseenter", {
+            buttons: 0,
+        });
+        expect(button.state("hovered")).toEqual(true);
+        button.simulate("mouseleave");
+        expect(button.state("hovered")).toEqual(false);
+    });
+
+    it("changes only pressed state on mouse enter/leave while dragging", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        expect(button.state("pressed")).toEqual(true);
+
+        button.simulate("mouseleave");
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("mouseenter", {
+            buttons: 1,
+        });
+        expect(button.state("pressed")).toEqual(true);
+    });
+
+    it("changes pressed state on mouse down/up", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("mousedown");
+        expect(button.state("pressed")).toEqual(true);
+        button.simulate("mouseup");
+        expect(button.state("pressed")).toEqual(false);
+    });
+
+    it("changes pressed state on touch start/end/cancel", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("touchstart");
+        expect(button.state("pressed")).toEqual(true);
+        button.simulate("touchend");
+        expect(button.state("pressed")).toEqual(false);
+
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("touchstart");
+        expect(button.state("pressed")).toEqual(true);
+        button.simulate("touchcancel");
+        expect(button.state("pressed")).toEqual(false);
+    });
+
+    it("enters focused state on key press after click", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("focused")).toEqual(false);
+        button.simulate("keydown", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("keyup", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(button.state("focused")).toEqual(true);
+    });
+
+    it("exits focused state on click after key press", () => {
+        const onClick = jest.fn();
+
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("focused")).toEqual(false);
+        button.simulate("keydown", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("keyup", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(button.state("focused")).toEqual(true);
+        button.simulate("mousedown");
+        button.simulate("mouseup");
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(button.state("focused")).toEqual(false);
+    });
+
+    it("changes pressed state on space/enter key down/up if <button>", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("keydown", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        expect(button.state("pressed")).toEqual(true);
+        button.simulate("keyup", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("keydown", {
+            keyCode: keyCodes.enter,
+            preventDefault: jest.fn(),
+        });
+        expect(button.state("pressed")).toEqual(true);
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(button.state("pressed")).toEqual(false);
+    });
+
+    it("changes pressed state on only enter key down/up for a link", () => {
+        const onClick = jest.fn();
+        // Use mount instead of a shallow render to trigger event defaults
+        const link = mount(
+            <ClickableBehavior
+                disabled={false}
+                onClick={(e) => onClick(e)}
+                href="https://www.khanacademy.org"
+                role="link"
+            >
+                {(state, childrenProps) => {
+                    return (
+                        <a
+                            href="https://www.khanacademy.org"
+                            {...childrenProps}
+                        >
+                            Label
+                        </a>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+        expect(link.state("pressed")).toEqual(false);
+        link.simulate("keydown", {keyCode: keyCodes.enter});
+        expect(link.state("pressed")).toEqual(true);
+        link.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(link.state("pressed")).toEqual(false);
+
+        link.simulate("keydown", {keyCode: keyCodes.space});
+        expect(link.state("pressed")).toEqual(false);
+        link.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.space,
+        });
+        expect(link.state("pressed")).toEqual(false);
+    });
+
+    it("gains focused state on focus event", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        button.simulate("focus");
+        expect(button.state("focused")).toEqual(true);
+    });
+
+    it("changes focused state on blur", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        button.simulate("blur");
+        expect(button.state("focused")).toEqual(false);
+    });
+
+    it("does not change state if disabled", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={true} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+
+        expect(onClick).not.toHaveBeenCalled();
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(onClick).not.toHaveBeenCalled();
+
+        expect(button.state("hovered")).toEqual(false);
+        button.simulate("mouseenter", {
+            buttons: 0,
+        });
+        expect(button.state("hovered")).toEqual(false);
+        button.simulate("mouseleave");
+        expect(button.state("hovered")).toEqual(false);
+
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("mousedown");
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("mouseup");
+        expect(button.state("pressed")).toEqual(false);
+
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("touchstart");
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("touchend");
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("touchstart");
+        button.simulate("touchcancel");
+        expect(button.state("pressed")).toEqual(false);
+
+        expect(button.state("focused")).toEqual(false);
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.tab,
+        });
+        expect(button.state("focused")).toEqual(false);
+        button.simulate("keydown", {keyCode: keyCodes.tab});
+        expect(button.state("focused")).toEqual(false);
+
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("keydown", {keyCode: keyCodes.space});
+        expect(button.state("pressed")).toEqual(false);
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.space,
+        });
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("keydown", {keyCode: keyCodes.space});
+        button.simulate("blur");
+        expect(button.state("pressed")).toEqual(false);
+
+        button.simulate("focus");
+        expect(button.state("focused")).toEqual(false);
+
+        const anchor = shallow(
+            <ClickableBehavior
+                disabled={true}
+                href="https://www.khanacademy.org"
+            >
+                {(state, childrenProps) => {
+                    return (
+                        <a
+                            href="https://www.khanacademy.org"
+                            {...childrenProps}
+                        >
+                            Label
+                        </a>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        expect(anchor.state("pressed")).toEqual(false);
+        anchor.simulate("keydown", {keyCode: keyCodes.enter});
+        expect(anchor.state("pressed")).toEqual(false);
+        anchor.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(anchor.state("pressed")).toEqual(false);
+    });
+
+    it("has onClick triggered just once per click by various means", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        expect(onClick).not.toHaveBeenCalled();
+
+        button.simulate("mousedown");
+        button.simulate("mouseup");
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(onClick).toHaveBeenCalledTimes(1);
+
+        button.simulate("keydown", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("keyup", {
+            keyCode: keyCodes.space,
+            preventDefault: jest.fn(),
+        });
+        expect(onClick).toHaveBeenCalledTimes(2);
+
+        button.simulate("keydown", {
+            keyCode: keyCodes.enter,
+            preventDefault: jest.fn(),
+        });
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(onClick).toHaveBeenCalledTimes(3);
+
+        button.simulate("touchstart", {keyCode: keyCodes.space});
+        button.simulate("touchend", {keyCode: keyCodes.space});
+        button.simulate("click", {preventDefault: jest.fn()});
+        expect(onClick).toHaveBeenCalledTimes(4);
+    });
+
+    it("resets state when set to disabled", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        button.setState({hovered: true, pressed: true, focused: true});
+        button.setProps({disabled: true});
+
+        expect(button.state("hovered")).toEqual(false);
+        expect(button.state("pressed")).toEqual(false);
+        expect(button.state("focused")).toEqual(false);
+    });
+
+    describe("full page load navigation", () => {
+        it("both navigates and calls onClick for an anchor link", () => {
+            const onClick = jest.fn();
+            // Use mount instead of a shallow render to trigger event defaults
+            const link = mount(
+                <ClickableBehavior
+                    href="https://khanacademy.org/"
+                    onClick={(e) => onClick(e)}
+                    role="link"
+                >
+                    {(state, childrenProps) => {
+                        // The base element here doesn't matter in this testing
+                        // environment, but the simulated events in the test are in
+                        // line with what browsers do for this element.
+                        return (
+                            <a
+                                href="https://khanacademy.org/"
+                                {...childrenProps}
+                            >
+                                Label
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Space press should not trigger the onClick
+            link.simulate("keydown", {keyCode: keyCodes.space});
+            link.simulate("keyup", {
+                preventDefault: jest.fn(),
+                keyCode: keyCodes.space,
+            });
+            expect(onClick).toHaveBeenCalledTimes(0);
+
+            // Navigation didn't happen with space
+            expect(window.location.assign).toHaveBeenCalledTimes(0);
+
+            // Enter press should trigger the onClick after keyup
+            link.simulate("keydown", {keyCode: keyCodes.enter});
+            expect(onClick).toHaveBeenCalledTimes(0);
+
+            // Navigation doesn't happen until after enter is released
+            expect(window.location.assign).toHaveBeenCalledTimes(0);
+
+            link.simulate("keyup", {
+                preventDefault: jest.fn(),
+                keyCode: keyCodes.enter,
+            });
+            expect(onClick).toHaveBeenCalledTimes(1);
+
+            // Navigation happened after enter click
+            expect(window.location.assign).toHaveBeenCalledTimes(1);
+        });
+
+        it("waits for safeWithNav to resolve before navigation", async () => {
+            // Arrange
+            const link = mount(
+                <ClickableBehavior
+                    href="https://khanacademy.org/"
+                    safeWithNav={() => Promise.resolve()}
+                    role="link"
+                >
+                    {(state, childrenProps) => {
+                        // The base element here doesn't matter in this testing
+                        // environment, but the simulated events in the test are in
+                        // line with what browsers do for this element.
+                        return (
+                            <a
+                                href="https://khanacademy.org/"
+                                {...childrenProps}
+                            >
+                                Label
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            link.simulate("click", {preventDefault: jest.fn()});
+            await wait(0);
+
+            // Assert
+            expect(window.location.assign).toHaveBeenCalledTimes(1);
+        });
+
+        it("should show waiting UI before safeWithNav resolves", async () => {
+            // Arrange
+            const link = mount(
+                <ClickableBehavior
+                    href="https://khanacademy.org/"
+                    safeWithNav={() => Promise.resolve()}
+                    role="link"
+                >
+                    {(state, childrenProps) => {
+                        // The base element here doesn't matter in this testing
+                        // environment, but the simulated events in the test are in
+                        // line with what browsers do for this element.
+                        return (
+                            <a
+                                href="https://khanacademy.org/"
+                                {...childrenProps}
+                            >
+                                {state.waiting ? "waiting" : "Label"}
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            link.simulate("click", {preventDefault: jest.fn()});
+
+            // Assert
+            expect(link).toIncludeText("waiting");
+        });
+
+        it("If onClick calls e.preventDefault() then we won't navigate", () => {
+            // Arrange
+            const wrapper = mount(
+                <ClickableBehavior
+                    href="/foo"
+                    onClick={(e) => e.preventDefault()}
+                    role="checkbox"
+                >
+                    {(state, childrenProps) => {
+                        // The base element here doesn't matter in this testing
+                        // environment, but the simulated events in the test are in
+                        // line with what browsers do for this element.
+                        return (
+                            <button id="test-button" {...childrenProps}>
+                                label
+                            </button>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            const button = wrapper.find("#test-button").first();
+            button.simulate("click", {
+                preventDefault() {
+                    this.defaultPrevented = true;
+                },
+            });
+
+            // Assert
+            expect(window.location.assign).not.toHaveBeenCalled();
+        });
+    });
+
+    it("calls onClick correctly for a component that doesn't respond to enter", () => {
+        const onClick = jest.fn();
+        // Use mount instead of a shallow render to trigger event defaults
+        const checkbox = mount(
+            // triggerOnEnter may be false for some elements e.g. checkboxes
+            <ClickableBehavior onClick={(e) => onClick(e)} role="checkbox">
+                {(state, childrenProps) => {
+                    // The base element here doesn't matter in this testing
+                    // environment, but the simulated events in the test are in
+                    // line with what browsers do for this element.
+                    return <input type="checkbox" {...childrenProps} />;
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Enter press should not do anything
+        checkbox.simulate("keydown", {keyCode: keyCodes.enter});
+        expect(onClick).toHaveBeenCalledTimes(0);
+        checkbox.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(onClick).toHaveBeenCalledTimes(0);
+
+        // Space press should trigger the onClick
+        checkbox.simulate("keydown", {keyCode: keyCodes.space});
+        checkbox.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.space,
+        });
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onClick for a button component on both enter/space", () => {
+        const onClick = jest.fn();
+        // Use mount instead of a shallow render to trigger event defaults
+        const button = mount(
+            <ClickableBehavior onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    // The base element here doesn't matter in this testing
+                    // environment, but the simulated events in the test are in
+                    // line with what browsers do for this element.
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Enter press
+        button.simulate("keydown", {keyCode: keyCodes.enter});
+        expect(onClick).toHaveBeenCalledTimes(0);
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(onClick).toHaveBeenCalledTimes(1);
+
+        // Space press
+        button.simulate("keydown", {keyCode: keyCodes.space});
+        expect(onClick).toHaveBeenCalledTimes(1);
+        button.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.space,
+        });
+        expect(onClick).toHaveBeenCalledTimes(2);
+    });
+
+    // This tests the case where we attach the childrenProps to an element that is
+    // not canonically clickable (like a div). The browser doesn't naturally
+    // trigger keyboard click events for such an element.
+    it("calls onClick listener on space/enter with a non-usually clickable element", () => {
+        const onClick = jest.fn();
+        // Use mount instead of a shallow render to trigger event defaults
+        const div = mount(
+            <ClickableBehavior onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    // The base element here doesn't matter in this testing
+                    // environment, but the simulated events in the test are in
+                    // line with what browsers do for this element.
+                    return <div {...childrenProps}>Label</div>;
+                }}
+            </ClickableBehavior>,
+        );
+
+        let expectedNumberTimesCalled = 0;
+        const clickableDiv = div.find("div");
+
+        // Enter press on a div
+        clickableDiv.simulate("keydown", {keyCode: keyCodes.enter});
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expectedNumberTimesCalled += 1;
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+
+        // Simulate a mouse click.
+        clickableDiv.simulate("mousedown");
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("click", {preventDefault: jest.fn()});
+        expectedNumberTimesCalled += 1;
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+
+        // Space press on a div
+        clickableDiv.simulate("keydown", {keyCode: keyCodes.space});
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.space,
+        });
+        expectedNumberTimesCalled += 1;
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+
+        // Simulate another mouse click.
+        clickableDiv.simulate("mousedown");
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+        clickableDiv.simulate("click", {preventDefault: jest.fn()});
+        expectedNumberTimesCalled += 1;
+        expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
+    });
+
+    it("calls onClick on mouseup when the mouse was dragging", () => {
+        const onClick = jest.fn();
+        const button = shallow(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        button.simulate("mouseleave");
+        button.simulate("mouseup");
+        expect(onClick).toHaveBeenCalledTimes(0);
+
+        button.simulate("mousedown");
+        button.simulate("dragstart", {preventDefault: jest.fn()});
+        button.simulate("mouseup", {preventDefault: jest.fn()});
+        expect(onClick).toHaveBeenCalledTimes(1);
+
+        button.simulate("mouseenter", {
+            buttons: 1,
+        });
+        button.simulate("mouseup", {preventDefault: jest.fn()});
+        expect(onClick).toHaveBeenCalledTimes(2);
+    });
+
+    it("doesn't trigger enter key when browser doesn't stop the click", () => {
+        const onClick = jest.fn();
+        // Use mount instead of a shallow render to trigger event defaults
+        const checkbox = mount(
+            <ClickableBehavior onClick={(e) => onClick(e)} role="checkbox">
+                {(state, childrenProps) => {
+                    // The base element here doesn't matter in this testing
+                    // environment, but the simulated events in the test are in
+                    // line with what browsers do for this element.
+                    return <input type="checkbox" {...childrenProps} />;
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Enter press should not do anything
+        checkbox.simulate("keydown", {keyCode: keyCodes.enter});
+        // This element still wants to have a click on enter press
+        checkbox.simulate("click", {preventDefault: jest.fn()});
+        checkbox.simulate("keyup", {
+            preventDefault: jest.fn(),
+            keyCode: keyCodes.enter,
+        });
+        expect(onClick).toHaveBeenCalledTimes(0);
+    });
+
+    describe("client-side navgiation", () => {
+        const ClickableBehaviorWithRouter = getClickableBehavior(
+            "/foo",
+            false,
+            true, // router
+        );
+
+        it("handles client-side navigation when there's a router context", () => {
+            // Arrange
+            const wrapper = mount(
+                <MemoryRouter>
+                    <div>
+                        <ClickableBehaviorWithRouter
+                            href="/foo"
+                            onClick={(e) => {}}
+                            role="checkbox"
+                        >
+                            {(state, childrenProps) => {
+                                // The base element here doesn't matter in this testing
+                                // environment, but the simulated events in the test are in
+                                // line with what browsers do for this element.
+                                return (
+                                    <button id="test-button" {...childrenProps}>
+                                        label
+                                    </button>
+                                );
+                            }}
+                        </ClickableBehaviorWithRouter>
+                        <Switch>
+                            <Route path="/foo">
+                                <div>Hello, world!</div>
+                            </Route>
+                        </Switch>
+                    </div>
+                </MemoryRouter>,
+            );
+
+            // Act
+            const button = wrapper.find("#test-button").first();
+            button.simulate("click", {preventDefault: jest.fn()});
+
+            // Assert
+            expect(wrapper).toIncludeText("Hello, world!");
+        });
+
+        describe("beforeNav", () => {
+            it("waits for beforeNav to resolve before client-side navigating", async () => {
+                // Arrange
+                const wrapper = mount(
+                    <MemoryRouter>
+                        <div>
+                            <ClickableBehaviorWithRouter
+                                href="/foo"
+                                onClick={(e) => {}}
+                                role="checkbox"
+                                beforeNav={() => Promise.resolve()}
+                            >
+                                {(state, childrenProps) => {
+                                    // The base element here doesn't matter in this testing
+                                    // environment, but the simulated events in the test are in
+                                    // line with what browsers do for this element.
+                                    return (
+                                        <button
+                                            id="test-button"
+                                            {...childrenProps}
+                                        >
+                                            {state.waiting
+                                                ? "waiting"
+                                                : "label"}
+                                        </button>
+                                    );
+                                }}
+                            </ClickableBehaviorWithRouter>
+                            <Switch>
+                                <Route path="/foo">
+                                    <div>Hello, world!</div>
+                                </Route>
+                            </Switch>
+                        </div>
+                    </MemoryRouter>,
+                );
+
+                // Act
+                const button = wrapper.find("#test-button").first();
+                button.simulate("click", {preventDefault: jest.fn()});
+                await wait(0);
+
+                // Assert
+                expect(wrapper).toIncludeText("Hello, world!");
+            });
+
+            it("shows waiting state before navigating", async () => {
+                // Arrange
+                const wrapper = mount(
+                    <MemoryRouter>
+                        <div>
+                            <ClickableBehaviorWithRouter
+                                href="/foo"
+                                onClick={(e) => {}}
+                                role="checkbox"
+                                beforeNav={() => Promise.resolve()}
+                            >
+                                {(state, childrenProps) => {
+                                    // The base element here doesn't matter in this testing
+                                    // environment, but the simulated events in the test are in
+                                    // line with what browsers do for this element.
+                                    return (
+                                        <button
+                                            id="test-button"
+                                            {...childrenProps}
+                                        >
+                                            {state.waiting
+                                                ? "waiting"
+                                                : "label"}
+                                        </button>
+                                    );
+                                }}
+                            </ClickableBehaviorWithRouter>
+                            <Switch>
+                                <Route path="/foo">
+                                    <div>Hello, world!</div>
+                                </Route>
+                            </Switch>
+                        </div>
+                    </MemoryRouter>,
+                );
+
+                // Act
+                const button = wrapper.find("#test-button").first();
+                button.simulate("click", {preventDefault: jest.fn()});
+
+                // Assert
+                expect(wrapper).toIncludeText("waiting");
+            });
+
+            it("does not navigate if beforeNav rejects", async () => {
+                // Arrange
+                const wrapper = mount(
+                    <MemoryRouter>
+                        <div>
+                            <ClickableBehaviorWithRouter
+                                href="/foo"
+                                onClick={(e) => {}}
+                                role="checkbox"
+                                beforeNav={() => Promise.reject()}
+                            >
+                                {(state, childrenProps) => {
+                                    // The base element here doesn't matter in this testing
+                                    // environment, but the simulated events in the test are in
+                                    // line with what browsers do for this element.
+                                    return (
+                                        <button
+                                            id="test-button"
+                                            {...childrenProps}
+                                        >
+                                            label
+                                        </button>
+                                    );
+                                }}
+                            </ClickableBehaviorWithRouter>
+                            <Switch>
+                                <Route path="/foo">
+                                    <div>Hello, world!</div>
+                                </Route>
+                            </Switch>
+                        </div>
+                    </MemoryRouter>,
+                );
+
+                // Act
+                const button = wrapper.find("#test-button").first();
+                button.simulate("click", {preventDefault: jest.fn()});
+                await wait(0);
+
+                // Assert
+                expect(wrapper).not.toIncludeText("Hello, world!");
+            });
+
+            it("calls safeWithNav if provided if beforeNav resolves", async () => {
+                // Arrange
+                const safeWithNavMock = jest.fn();
+                const wrapper = mount(
+                    <MemoryRouter>
+                        <div>
+                            <ClickableBehaviorWithRouter
+                                href="/foo"
+                                onClick={(e) => {}}
+                                role="checkbox"
+                                beforeNav={() => Promise.resolve()}
+                                safeWithNav={safeWithNavMock}
+                            >
+                                {(state, childrenProps) => {
+                                    // The base element here doesn't matter in this testing
+                                    // environment, but the simulated events in the test are in
+                                    // line with what browsers do for this element.
+                                    return (
+                                        <button
+                                            id="test-button"
+                                            {...childrenProps}
+                                        >
+                                            {state.waiting
+                                                ? "waiting"
+                                                : "label"}
+                                        </button>
+                                    );
+                                }}
+                            </ClickableBehaviorWithRouter>
+                            <Switch>
+                                <Route path="/foo">
+                                    <div>Hello, world!</div>
+                                </Route>
+                            </Switch>
+                        </div>
+                    </MemoryRouter>,
+                );
+
+                // Act
+                const button = wrapper.find("#test-button").first();
+                button.simulate("click", {preventDefault: jest.fn()});
+                await wait(0);
+
+                // Assert
+                expect(safeWithNavMock).toHaveBeenCalled();
+            });
+        });
+
+        it("doesn't wait for safeWithNav to resolve before client-side navigating", async () => {
+            // Arrange
+            const wrapper = mount(
+                <MemoryRouter>
+                    <div>
+                        <ClickableBehaviorWithRouter
+                            href="/foo"
+                            onClick={(e) => {}}
+                            role="checkbox"
+                            safeWithNav={() => Promise.resolve()}
+                        >
+                            {(state, childrenProps) => {
+                                // The base element here doesn't matter in this testing
+                                // environment, but the simulated events in the test are in
+                                // line with what browsers do for this element.
+                                return (
+                                    <button id="test-button" {...childrenProps}>
+                                        label
+                                    </button>
+                                );
+                            }}
+                        </ClickableBehaviorWithRouter>
+                        <Switch>
+                            <Route path="/foo">
+                                <div>Hello, world!</div>
+                            </Route>
+                        </Switch>
+                    </div>
+                </MemoryRouter>,
+            );
+
+            // Act
+            const button = wrapper.find("#test-button").first();
+            button.simulate("click", {preventDefault: jest.fn()});
+
+            // Assert
+            expect(wrapper).toIncludeText("Hello, world!");
+        });
+
+        it("If onClick calls e.preventDefault() then we won't navigate", () => {
+            // Arrange
+            const wrapper = mount(
+                <MemoryRouter>
+                    <div>
+                        <ClickableBehaviorWithRouter
+                            href="/foo"
+                            onClick={(e) => e.preventDefault()}
+                            role="checkbox"
+                        >
+                            {(state, childrenProps) => {
+                                // The base element here doesn't matter in this testing
+                                // environment, but the simulated events in the test are in
+                                // line with what browsers do for this element.
+                                return (
+                                    <button id="test-button" {...childrenProps}>
+                                        label
+                                    </button>
+                                );
+                            }}
+                        </ClickableBehaviorWithRouter>
+                        <Switch>
+                            <Route path="/foo">
+                                <div>Hello, world!</div>
+                            </Route>
+                        </Switch>
+                    </div>
+                </MemoryRouter>,
+            );
+
+            // Act
+            const button = wrapper.find("#test-button").first();
+            button.simulate("click", {
+                preventDefault() {
+                    this.defaultPrevented = true;
+                },
+            });
+
+            // Assert
+            expect(wrapper).not.toIncludeText("Hello, world!");
+        });
+    });
+
+    describe("target='_blank'", () => {
+        it("opens a new tab", () => {
+            // Arrange
+            const link = mount(
+                <ClickableBehavior
+                    disabled={false}
+                    href="https://www.khanacademy.org"
+                    role="link"
+                    target="_blank"
+                >
+                    {(state, childrenProps) => {
+                        return (
+                            <a
+                                href="https://www.khanacademy.org"
+                                {...childrenProps}
+                            >
+                                Label
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(window.open).toHaveBeenCalledWith(
+                "https://www.khanacademy.org",
+                "_blank",
+            );
+        });
+
+        it("opens a new tab when using 'safeWithNav'", () => {
+            // Arrange
+            const safeWithNavMock = jest.fn().mockResolvedValue();
+            const link = mount(
+                <ClickableBehavior
+                    disabled={false}
+                    href="https://www.khanacademy.org"
+                    role="link"
+                    target="_blank"
+                    safeWithNav={safeWithNavMock}
+                >
+                    {(state, childrenProps) => {
+                        return (
+                            <a
+                                href="https://www.khanacademy.org"
+                                {...childrenProps}
+                            >
+                                Label
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(window.open).toHaveBeenCalledWith(
+                "https://www.khanacademy.org",
+                "_blank",
+            );
+        });
+
+        it("calls 'safeWithNav'", () => {
+            // Arrange
+            const safeWithNavMock = jest.fn().mockResolvedValue();
+            const link = mount(
+                <ClickableBehavior
+                    disabled={false}
+                    href="https://www.khanacademy.org"
+                    role="link"
+                    target="_blank"
+                    safeWithNav={safeWithNavMock}
+                >
+                    {(state, childrenProps) => {
+                        return (
+                            <a
+                                href="https://www.khanacademy.org"
+                                {...childrenProps}
+                            >
+                                Label
+                            </a>
+                        );
+                    }}
+                </ClickableBehavior>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(safeWithNavMock).toHaveBeenCalled();
+        });
+
+        it("opens a new tab when inside a router", () => {
+            // Arrange
+            const link = mount(
+                <MemoryRouter initialEntries={["/"]}>
+                    <ClickableBehavior
+                        disabled={false}
+                        href="https://www.khanacademy.org"
+                        role="link"
+                        target="_blank"
+                    >
+                        {(state, childrenProps) => {
+                            return (
+                                <a
+                                    href="https://www.khanacademy.org"
+                                    {...childrenProps}
+                                >
+                                    Label
+                                </a>
+                            );
+                        }}
+                    </ClickableBehavior>
+                </MemoryRouter>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(window.open).toHaveBeenCalledWith(
+                "https://www.khanacademy.org",
+                "_blank",
+            );
+        });
+
+        it("opens a new tab when using 'safeWithNav' inside a router", () => {
+            // Arrange
+            const safeWithNavMock = jest.fn().mockResolvedValue();
+            const link = mount(
+                <MemoryRouter initialEntries={["/"]}>
+                    <ClickableBehavior
+                        disabled={false}
+                        href="https://www.khanacademy.org"
+                        role="link"
+                        target="_blank"
+                        safeWithNav={safeWithNavMock}
+                    >
+                        {(state, childrenProps) => {
+                            return (
+                                <a
+                                    href="https://www.khanacademy.org"
+                                    {...childrenProps}
+                                >
+                                    Label
+                                </a>
+                            );
+                        }}
+                    </ClickableBehavior>
+                </MemoryRouter>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(window.open).toHaveBeenCalledWith(
+                "https://www.khanacademy.org",
+                "_blank",
+            );
+        });
+
+        it("calls 'safeWithNav' inside a router", () => {
+            // Arrange
+            const safeWithNavMock = jest.fn().mockResolvedValue();
+            const link = mount(
+                <MemoryRouter initialEntries={["/"]}>
+                    <ClickableBehavior
+                        disabled={false}
+                        href="https://www.khanacademy.org"
+                        role="link"
+                        target="_blank"
+                        safeWithNav={safeWithNavMock}
+                    >
+                        {(state, childrenProps) => {
+                            return (
+                                <a
+                                    href="https://www.khanacademy.org"
+                                    {...childrenProps}
+                                >
+                                    Label
+                                </a>
+                            );
+                        }}
+                    </ClickableBehavior>
+                </MemoryRouter>,
+            );
+
+            // Act
+            link.simulate("click");
+
+            // Assert
+            expect(safeWithNavMock).toHaveBeenCalled();
+        });
+    });
+
+    describe("rel", () => {
+        it("should use the 'rel' that was passed in", () => {
+            // Arrange
+            const childrenMock = jest.fn().mockImplementation(() => null);
+            mount(
+                <ClickableBehavior
+                    href="https://www.khanacademy.org"
+                    rel="something_else"
+                    target="_blank"
+                >
+                    {childrenMock}
+                </ClickableBehavior>,
+            );
+
+            const childrenProps = childrenMock.mock.calls[0][1];
+            expect(childrenProps.rel).toEqual("something_else");
+        });
+
+        it("should use 'noopener noreferrer' as a default when target='_blank'", () => {
+            // Arrange
+            const childrenMock = jest.fn().mockImplementation(() => null);
+            mount(
+                <ClickableBehavior
+                    href="https://www.khanacademy.org"
+                    target="_blank"
+                >
+                    {childrenMock}
+                </ClickableBehavior>,
+            );
+
+            const childrenProps = childrenMock.mock.calls[0][1];
+            expect(childrenProps.rel).toEqual("noopener noreferrer");
+        });
+
+        it("should not use the default if target != '_blank'", () => {
+            // Arrange
+            const childrenMock = jest.fn().mockImplementation(() => null);
+            mount(
+                <ClickableBehavior href="https://www.khanacademy.org">
+                    {childrenMock}
+                </ClickableBehavior>,
+            );
+
+            const childrenProps = childrenMock.mock.calls[0][1];
+            expect(childrenProps.rel).toBeUndefined();
+        });
+    });
+});