@khanacademy/wonder-blocks-tooltip 1.4.0 → 1.4.2

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

@@ -1,17 +1,12 @@
 // @flow
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
 
 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 = () => ({
@@ -27,55 +22,43 @@ describe("TooltipBubble", () => {
 
     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();
+        // 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>);
 
-            // 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
+        render(
+            <View>
+                <TooltipBubble
+                    id="bubble"
+                    placement={props.placement}
+                    tailOffset={props.tailOffset}
+                    updateBubbleRef={jest.fn()}
+                    onActiveChanged={() => {}}
+                >
+                    {fakeContent}
+                </TooltipBubble>
+            </View>,
+        );
 
-            // Act
-            mount(nodes);
-        });
+        // 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.
+         * 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 apply our data attribute?
+        expect(tooltip.getAttribute("data-placement")).toBe("top");
 
-            // Did we render our content?
-            await sleep();
-            const contentElement = document.getElementById("content");
-            expect(contentElement).toBeDefined();
-        }
+        // Did we render our content?
+        expect(screen.getByText("Some content")).toBeInTheDocument();
     });
 });

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

@@ -1,8 +1,7 @@
 // @flow
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render} from "@testing-library/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 
@@ -58,7 +57,7 @@ describe("TooltipPopper", () => {
                     <TestHarness placement="bottom" resultRef={resolve} />
                 </View>
             );
-            mount(nodes);
+            render(nodes);
         });
 
         if (!ref) {

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

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import {shallow} from "enzyme";
+import {render} from "@testing-library/react";
 
 import TooltipTail from "../tooltip-tail.js";
 
@@ -14,10 +14,12 @@ describe("TooltipTail", () => {
             const nodes = <TooltipTail placement={fakePlacement} />;
 
             // Act
-            const underTest = () => shallow(nodes);
+            const underTest = () => render(nodes);
 
             // Assert
-            expect(underTest).toThrowErrorMatchingSnapshot();
+            expect(underTest).toThrowErrorMatchingInlineSnapshot(
+                `"Unknown placement: notaplacement"`,
+            );
         });
 
         test("known placement, does not throw", () => {
@@ -26,7 +28,7 @@ describe("TooltipTail", () => {
             const makeNode = (p) => <TooltipTail placement={p} />;
 
             // Act
-            const testees = testPoints.map((tp) => () => shallow(makeNode(tp)));
+            const testees = testPoints.map((tp) => () => render(makeNode(tp)));
 
             // Assert
             for (const testee of testees) {
@@ -34,84 +36,4 @@ describe("TooltipTail", () => {
             }
         });
     });
-
-    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();
-        });
-    });
 });