@khanacademy/wonder-blocks-tooltip 2.4.1 → 2.4.3

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

@@ -1,64 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-
-import TooltipBubble from "../tooltip-bubble";
-import TooltipContent from "../tooltip-content";
-
-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)",
-            },
-        } as const);
-
-    test("updates reference to bubble container", async () => {
-        // Arrange
-        // 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>
-        ) as React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
-
-        // Act
-        render(
-            <View>
-                <TooltipBubble
-                    id="bubble"
-                    placement={props.placement}
-                    tailOffset={props.tailOffset}
-                    updateBubbleRef={jest.fn()}
-                    onActiveChanged={() => {}}
-                >
-                    {fakeContent}
-                </TooltipBubble>
-            </View>,
-        );
-
-        // Is the node a mounted element?
-        const tooltip = await screen.findByRole("tooltip");
-
-        /**
-         * All we're doing is making sure we got called and verifying that we
-         * got called with an element we expect.
-         */
-        // Assert
-        // Did we apply our data attribute?
-        expect(tooltip.getAttribute("data-placement")).toBe("top");
-
-        // Did we render our content?
-        expect(screen.getByText("Some content")).toBeInTheDocument();
-    });
-});

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

@@ -1,72 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {render} from "@testing-library/react";
-
-import {View} from "@khanacademy/wonder-blocks-core";
-
-import TooltipBubble from "../tooltip-bubble";
-import TooltipPopper from "../tooltip-popper";
-
-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 = {};
-
-    updateRef(ref: any) {
-        const actualRef = ref && ReactDOM.findDOMNode(ref);
-        if (actualRef && this.state.ref !== actualRef) {
-            this.setState({ref: actualRef as HTMLElement});
-        }
-    }
-
-    render(): React.ReactElement {
-        const fakeBubble = (
-            <View ref={(ref: any) => this.props.resultRef(ref)}>
-                Fake bubble
-            </View>
-        ) as React.ReactElement<React.ComponentProps<typeof TooltipBubble>>;
-        return (
-            <View>
-                <View ref={(ref: any) => this.updateRef(ref)}>Anchor</View>
-                <TooltipPopper
-                    placement={this.props.placement}
-                    anchorElement={this.state.ref}
-                >
-                    {(props: any) => 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: any, reject: any) => {
-            const nodes = (
-                <View>
-                    <TestHarness placement="bottom" resultRef={resolve} />
-                </View>
-            );
-            render(nodes);
-        });
-
-        if (!ref) {
-            return;
-        }
-
-        // Act
-        // Assert
-        expect(ref).toBeDefined();
-    });
-});

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

@@ -1,135 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import TooltipTail from "../tooltip-tail";
-
-import type {Placement} from "../../util/types";
-
-describe("TooltipTail", () => {
-    describe("#render", () => {
-        test("unknown placement, throws", () => {
-            // Arrange
-            const fakePlacement = "notaplacement" as Placement;
-            const nodes = <TooltipTail placement={fakePlacement} />;
-
-            // Act
-            const underTest = () => render(nodes);
-
-            // Assert
-            expect(underTest).toThrowErrorMatchingInlineSnapshot(
-                `"Unknown placement: notaplacement"`,
-            );
-        });
-
-        test("known placement, does not throw", () => {
-            // Arrange
-            const testPoints = ["top", "right", "bottom", "left"];
-            const makeNode = (p: any) => <TooltipTail placement={p} />;
-
-            // Act
-            const testees = testPoints.map(
-                (tp: any) => () => render(makeNode(tp)),
-            );
-
-            // Assert
-            for (const testee of testees) {
-                expect(testee).not.toThrowError();
-            }
-        });
-
-        it("should render a visible tail", () => {
-            // Arrange
-            const nodes = <TooltipTail placement="top" />;
-
-            // Act
-            const {container} = render(nodes);
-
-            // Assert
-            expect(container).toMatchInlineSnapshot(`
-                <div>
-                  <div
-                    class=""
-                    data-placement="top"
-                    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; pointer-events: none; top: -1px; width: 40px; height: 20px;"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="arrow_oo4scr"
-                      height="12"
-                      style="margin-left: 8px; margin-right: 8px; padding-bottom: 8px;"
-                      width="24"
-                    >
-                      <filter
-                        height="200%"
-                        id="tooltip-dropshadow-top-3"
-                        width="200%"
-                        x="-50%"
-                        y="-50%"
-                      >
-                        <fegaussianblur
-                          in="SourceAlpha"
-                          stdDeviation="3"
-                        />
-                        <fecomponenttransfer>
-                          <fefunca
-                            slope="0.3"
-                            type="linear"
-                          />
-                        </fecomponenttransfer>
-                      </filter>
-                      <g
-                        transform="translate(0,5.5)"
-                      >
-                        <polyline
-                          fill="rgba(33,36,44,0.16)"
-                          filter="url(#tooltip-dropshadow-top-3)"
-                          points="0,0 12,12 24,0"
-                          stroke="rgba(33,36,44,0.32)"
-                        />
-                      </g>
-                      <polyline
-                        fill="#ffffff"
-                        points="0,0 12,12 24,0"
-                        stroke="#ffffff"
-                      />
-                      <polyline
-                        fill="#ffffff"
-                        points="0,0 12,12 24,0"
-                        stroke="rgba(33,36,44,0.16)"
-                      />
-                      <polyline
-                        points="0,-0.5 24,-0.5"
-                        stroke="#ffffff"
-                      />
-                    </svg>
-                  </div>
-                </div>
-            `);
-        });
-
-        it("should render a spacer when show is false", () => {
-            // Arrange
-            const nodes = <TooltipTail placement="top" show={false} />;
-
-            // Act
-            const {container} = render(nodes);
-
-            // Assert
-            expect(container).toMatchInlineSnapshot(`
-                <div>
-                  <div
-                    class=""
-                    data-placement="top"
-                    style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; pointer-events: none; top: -1px; width: 40px; height: 20px;"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class=""
-                      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; width: 12px; flex-basis: 12px; flex-shrink: 0;"
-                    />
-                  </div>
-                </div>
-            `);
-        });
-    });
-});

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

@@ -1,116 +0,0 @@
-import * as React from "react";
-
-import {render, screen, fireEvent} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import Tooltip from "../tooltip";
-
-describe("tooltip integration tests", () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-
-    it("should set timeoutId be null when TooltipBubble is active", async () => {
-        // Arrange
-        const ue = userEvent.setup({
-            advanceTimers: jest.advanceTimersByTime,
-        });
-        render(<Tooltip content="hello, world">an anchor</Tooltip>);
-        const anchor = await screen.findByText("an anchor");
-
-        // Act
-        await ue.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(await screen.findByRole("tooltip")).toBeInTheDocument();
-    });
-
-    it("should hide the bubble on mouseleave on TooltipAnchor", async () => {
-        // Arrange
-        const ue = userEvent.setup({
-            advanceTimers: jest.advanceTimersByTime,
-        });
-        render(<Tooltip content="hello, world">an anchor</Tooltip>);
-
-        const anchor = await screen.findByText("an anchor");
-        await ue.hover(anchor);
-
-        // Act
-        await ue.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
-        const ue = userEvent.setup({
-            advanceTimers: jest.advanceTimersByTime,
-        });
-        render(<Tooltip content="hello, world">an anchor</Tooltip>);
-
-        const anchor = await screen.findByText("an anchor");
-        await ue.hover(anchor);
-        // hover on bubble to keep it active
-        // Need to run the timers or we won't get the bubble wrapper to show.
-        jest.runAllTimers();
-        const bubbleWrapper = await screen.findByRole("tooltip");
-        await ue.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();
-    });
-
-    it("should have an opened tooltip when subsequent mouseenter, mouseleave, and mouseenter events occur", async () => {
-        // This a test case that simulates a bug in Firefox where a tooltip will
-        // sometimes flicker and not stay opened due to the browser triggering
-        // subsequent mouseenter, mouseleave, and mouseenter events
-
-        // Arrange
-        const ue = userEvent.setup({
-            advanceTimers: jest.advanceTimersByTime,
-        });
-        render(<Tooltip content="hello, world">an anchor</Tooltip>);
-
-        // Act
-        const anchor = await screen.findByText("an anchor");
-        // Trigger initial mouseenter event on anchor and let the timeout complete
-        // to activate the tooltip
-        await ue.hover(anchor);
-        await jest.runAllTimers();
-        expect(screen.getByRole("tooltip")).toBeInTheDocument();
-        // Trigger mouseleave and mouseenter event and run timers only after
-        // both have been triggered. This simulates the mouseenter event being
-        // triggered before the tooltip is closed from the mouseleave event
-        await ue.unhover(anchor);
-        await ue.hover(anchor);
-        await jest.runAllTimers();
-
-        // Assert
-        expect(screen.getByRole("tooltip")).toBeInTheDocument();
-    });
-});