@khanacademy/wonder-blocks-tooltip 1.3.0

package/src/components/__tests__/tooltip-bubble.test.js

@@ -0,0 +1,80 @@
+// @flow
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {mount} from "enzyme";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+
+import TooltipBubble from "../tooltip-bubble.js";
+import typeof TooltipContent from "../tooltip-content.js";
+
+const sleep = (duration = 0) =>
+    new Promise((resolve, reject) => setTimeout(resolve, duration));
+
+describe("TooltipBubble", () => {
+    // A little helper method to make the actual test more readable.
+    const makePopperProps = () => ({
+        placement: "top",
+        tailOffset: {
+            top: "0",
+            left: "50",
+            bottom: undefined,
+            right: undefined,
+            transform: "translate3d(50, 0, 0)",
+        },
+    });
+
+    test("updates reference to bubble container", async () => {
+        // Arrange
+        const bubbleNode = await new Promise((resolve) => {
+            // Get some props and set the ref to our assert, that way we assert
+            // when the bubble component is mounted.
+            const props = makePopperProps();
+
+            // Do some casting to pretend this is `TooltipContent`. That way
+            // we are isolating behaviors a bit more.
+            const fakeContent = (((
+                <View id="content">Some content</View>
+            ): any): React.Element<TooltipContent>);
+            const nodes = (
+                <View>
+                    <TooltipBubble
+                        id="bubble"
+                        placement={props.placement}
+                        tailOffset={props.tailOffset}
+                        updateBubbleRef={resolve}
+                        onActiveChanged={() => {}}
+                    >
+                        {fakeContent}
+                    </TooltipBubble>
+                </View>
+            );
+
+            // Act
+            mount(nodes);
+        });
+
+        /**
+         * All we're doing is making sure we got called and verifying that
+         * we got called with an element we expect.
+         */
+        // Assert
+        // Did we get a node?
+        expect(bubbleNode).toBeDefined();
+
+        // Is the node a mounted element?
+        const realElement = ReactDOM.findDOMNode(bubbleNode);
+        expect(realElement instanceof Element).toBeTruthy();
+
+        // Keep flow happy...
+        if (realElement instanceof Element) {
+            // Did we apply our data attribute?
+            expect(realElement.getAttribute("data-placement")).toBe("top");
+
+            // Did we render our content?
+            await sleep();
+            const contentElement = document.getElementById("content");
+            expect(contentElement).toBeDefined();
+        }
+    });
+});

package/src/components/__tests__/tooltip-popper.test.js

@@ -0,0 +1,71 @@
+// @flow
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {mount} from "enzyme";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+
+import typeof TooltipBubble from "../tooltip-bubble.js";
+import TooltipPopper from "../tooltip-popper.js";
+
+type State = {|ref: ?HTMLElement|};
+/**
+ * A little wrapper for the TooltipPopper so that we can provide an anchor
+ * element reference and test that the children get rendered.
+ */
+class TestHarness extends React.Component<any, State> {
+    state: State = {
+        ref: null,
+    };
+
+    updateRef(ref) {
+        const actualRef = ref && ReactDOM.findDOMNode(ref);
+        if (actualRef && this.state.ref !== actualRef) {
+            this.setState({ref: ((actualRef: any): ?HTMLElement)});
+        }
+    }
+
+    render(): React.Node {
+        const fakeBubble = (((
+            <View ref={(ref) => this.props.resultRef(ref)}>Fake bubble</View>
+        ): any): React.Element<TooltipBubble>);
+        return (
+            <View>
+                <View ref={(ref) => this.updateRef(ref)}>Anchor</View>
+                <TooltipPopper
+                    placement={this.props.placement}
+                    anchorElement={this.state.ref}
+                >
+                    {(props) => fakeBubble}
+                </TooltipPopper>
+            </View>
+        );
+    }
+}
+
+describe("TooltipPopper", () => {
+    // The TooltipPopper component is just a wrapper around react-popper.
+    // PopperJS requires full visual rendering and we don't do that here as
+    // we're not in a browser.
+    // So, let's do a test that we at least render the content how we expect
+    // and use other things to test the overall placement things.
+    test("ensure component renders", async () => {
+        // Arrange
+        const ref = await new Promise((resolve, reject) => {
+            const nodes = (
+                <View>
+                    <TestHarness placement="bottom" resultRef={resolve} />
+                </View>
+            );
+            mount(nodes);
+        });
+
+        if (!ref) {
+            return;
+        }
+
+        // Act
+        // Assert
+        expect(ref).toBeDefined();
+    });
+});

package/src/components/__tests__/tooltip-tail.test.js

@@ -0,0 +1,117 @@
+// @flow
+import * as React from "react";
+import {shallow} from "enzyme";
+
+import TooltipTail from "../tooltip-tail.js";
+
+import type {Placement} from "../../util/types.js";
+
+describe("TooltipTail", () => {
+    describe("#render", () => {
+        test("unknown placement, throws", () => {
+            // Arrange
+            const fakePlacement = (("notaplacement": any): Placement);
+            const nodes = <TooltipTail placement={fakePlacement} />;
+
+            // Act
+            const underTest = () => shallow(nodes);
+
+            // Assert
+            expect(underTest).toThrowErrorMatchingSnapshot();
+        });
+
+        test("known placement, does not throw", () => {
+            // Arrange
+            const testPoints = ["top", "right", "bottom", "left"];
+            const makeNode = (p) => <TooltipTail placement={p} />;
+
+            // Act
+            const testees = testPoints.map((tp) => () => shallow(makeNode(tp)));
+
+            // Assert
+            for (const testee of testees) {
+                expect(testee).not.toThrowError();
+            }
+        });
+    });
+
+    describe("INTERNALS", () => {
+        // We have some code internally that is there for code maintenance to
+        // catch if we add a new placement string and forget to update one of
+        // our methods. These tests are to verify those maintenance checks
+        // so they poke at the insides of the TooltipTail. We only test the
+        // throw case in these examples and rely on testing the external
+        // behavior of the component to verify the expected execution paths.
+        test("_getFilterPositioning throws on bad placement", () => {
+            // Arrange
+            const fakePlacement = (("notaplacement": any): Placement);
+            // We need an instance so let's make one with a valid placement so
+            // that we can render it.
+            const nodes = <TooltipTail placement="top" />;
+            const wrapper = shallow(nodes);
+            const tailInstance = wrapper.instance();
+            // Sneakily change props so as not to re-render.
+            // This means getting rid of the read-only props and
+            // recreating so that we can write a fake placement value
+            // for testing.
+            const oldProps = tailInstance.props;
+            // $FlowIgnore
+            delete tailInstance.props;
+            tailInstance.props = {
+                ...oldProps,
+                placement: fakePlacement,
+            };
+
+            // Act
+            const underTest = () => tailInstance._getFilterPositioning();
+
+            // Assert
+            expect(underTest).toThrowErrorMatchingSnapshot();
+        });
+
+        test("_calculateDimensionsFromPlacement throws on bad placement", () => {
+            // Arrange
+            const fakePlacement = (("notaplacement": any): Placement);
+            // We need an instance so let's make one with a valid placement so
+            // that we can render it.
+            const nodes = <TooltipTail placement="top" />;
+            const wrapper = shallow(nodes);
+            const tailInstance = wrapper.instance();
+            // Sneakily change props so as not to re-render.
+            // This means getting rid of the read-only props and
+            // recreating so that we can write a fake placement value
+            // for testing.
+            const oldProps = tailInstance.props;
+            // $FlowIgnore
+            delete tailInstance.props;
+            tailInstance.props = {
+                ...oldProps,
+                placement: fakePlacement,
+            };
+
+            // Act
+            const underTest = () =>
+                tailInstance._calculateDimensionsFromPlacement();
+
+            // Assert
+            expect(underTest).toThrowErrorMatchingSnapshot();
+        });
+
+        test("_minDistanceFromCorners throws on bad placement", () => {
+            // Arrange
+            const fakePlacement = (("notaplacement": any): Placement);
+            // We need an instance so let's make one with a valid placement so
+            // that we can render it.
+            const nodes = <TooltipTail placement="top" />;
+            const wrapper = shallow(nodes);
+            const tailInstance = wrapper.instance();
+
+            // Act
+            const underTest = () =>
+                tailInstance._minDistanceFromCorners(fakePlacement);
+
+            // Assert
+            expect(underTest).toThrowErrorMatchingSnapshot();
+        });
+    });
+});

package/src/components/__tests__/tooltip.integration.test.js

@@ -0,0 +1,79 @@
+// @flow
+import * as React from "react";
+
+import {render, screen, fireEvent} from "@testing-library/react";
+// eslint-disable-next-line import/no-unassigned-import
+import "@testing-library/jest-dom/extend-expect";
+import userEvent from "@testing-library/user-event";
+
+import Tooltip from "../tooltip.js";
+
+describe("tooltip integration tests", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    it("should set timeoutId be null when TooltipBubble is active", () => {
+        // Arrange
+        render(<Tooltip content="hello, world">an anchor</Tooltip>);
+        const anchor = screen.getByText("an anchor");
+
+        // Act
+        userEvent.hover(anchor);
+        // There's a 100ms delay before TooltipAnchor calls _setActiveState with
+        // instant set to true.  This second call is what actually triggers the
+        // call to this.props.onActiveChanged() which updates Tooltip's active
+        // state.
+        jest.runAllTimers();
+
+        // Assert
+        expect(screen.getByRole("tooltip")).toBeInTheDocument();
+    });
+
+    it("should hide the bubble on mouseleave on TooltipAnchor", () => {
+        // Arrange
+        render(<Tooltip content="hello, world">an anchor</Tooltip>);
+
+        const anchor = screen.getByText("an anchor");
+        userEvent.hover(anchor);
+
+        // Act
+        userEvent.unhover(anchor);
+        // There's a 100ms delay before TooltipAnchor calls _setActiveState with
+        // instant set to true.  This second call is what actually triggers the
+        // call to this.props.onActiveChanged() which updates Tooltip's active
+        // state.
+        jest.runAllTimers();
+
+        // Assert
+        expect(screen.queryByRole("tooltip")).toBeNull();
+    });
+
+    it("should close TooltipBubble on mouseleave on TooltipBubble", async () => {
+        // Arrange
+        render(<Tooltip content="hello, world">an anchor</Tooltip>);
+
+        const anchor = screen.getByText("an anchor");
+        userEvent.hover(anchor);
+        // hover on bubble to keep it active
+        const bubbleWrapper = await screen.findByRole("tooltip");
+        userEvent.unhover(anchor);
+
+        // Used because RTL complains about the bubble containing a child
+        // element with pointerEvents: none
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseEnter(bubbleWrapper);
+
+        // Act
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.mouseLeave(bubbleWrapper);
+        // There's a 100ms delay before TooltipAnchor calls _setActiveState with
+        // instant set to true.  This second call is what actually triggers the
+        // call to this.props.onActiveChanged() which updates Tooltip's active
+        // state.
+        jest.runAllTimers();
+
+        // Assert
+        expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+    });
+});