@khanacademy/perseus 0.2.8 → 0.3.0

package/src/widgets/__tests__/definition_test.js

@@ -1,5 +1,5 @@
 // @flow
-import {screen, waitForElementToBeRemoved} from "@testing-library/react";
+import {screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom"; // Imports custom matchers
@@ -49,28 +49,30 @@ describe("Definition widget", () => {
         expect(container).toMatchSnapshot("first render");
     });
 
-    it("should have an open state snapshot", () => {
+    it("should have an open state snapshot", async () => {
         // Arrange
         const {container} = renderQuestion(question);
 
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.hover(definitionAnchor);
+        userEvent.click(definitionAnchor);
 
         // Assert
+        const tooltip = await screen.findByRole("dialog");
+        expect(tooltip).toBeVisible();
         expect(container).toMatchSnapshot("open state");
     });
 
-    it("should display the definition on hover", async () => {
+    it("should display the definition on click", async () => {
         // Arrange
         renderQuestion(question);
 
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.hover(definitionAnchor);
+        userEvent.click(definitionAnchor);
 
         // Assert
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
@@ -82,41 +84,28 @@ describe("Definition widget", () => {
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
         userEvent.click(definitionAnchor);
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
 
         // Assert
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
 
-    it("should show via focus by the tab key", async () => {
+    it("should show via focus on space key", async () => {
         // Arrange
         renderQuestion(question);
 
         // Act - Tab in to set focus
-        userEvent.tab();
+        const definitionAnchor = screen.getByText("the Pequots");
+        userEvent.type(definitionAnchor, "{space}");
 
         // Assert
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
 
-    it("should hide and blur by the tab key", async () => {
-        // Arrange
-        renderQuestion(question);
-
-        // Act - Tab in to set focus, tab out to blur
-        userEvent.tab();
-        await screen.findByRole("tooltip");
-        userEvent.tab();
-        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
-
-        // Assert
-        expect(screen.queryByRole("tooltip")).toBeNull();
-    });
-
-    it("should dimiss by a click when showing", async () => {
+    it("should dimiss by a click on the x when showing", async () => {
         renderQuestion(question);
 
         // Act
@@ -124,16 +113,12 @@ describe("Definition widget", () => {
         const definitionAnchor = screen.getByText("the Pequots");
         userEvent.click(definitionAnchor);
 
-        // Move the mouse away and make sure text is still visible
-        userEvent.unhover(definitionAnchor);
-        await screen.findByRole("tooltip");
-
-        // Click to elsewhere, tooltip is hidden
-        userEvent.click((document.body: any));
-        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
+        // Click close, tooltip is hidden
+        const close = screen.getByTestId("popover-close-btn");
+        userEvent.click(close);
 
         // Assert
-        expect(screen.queryByRole("tooltip")).toBeNull();
+        expect(screen.queryByRole("dialog")).toBeNull();
     });
 
     it("should not affect answerable", () => {

package/src/widgets/__tests__/grapher.cypress.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import renderQuestionWithCypress from "../../../../../testing/render-question-with-cypress.jsx";
-import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import {cypressTestDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Perseus from "../../index.js";
 import {
     absoluteValueQuestion,
@@ -27,7 +27,7 @@ const LINES = "[data-interactive-kind-for-testing=movable-line] > svg > path";
 describe("Grapher widget", () => {
     beforeEach(() => {
         Perseus.init({skipMathJax: true});
-        Perseus.Dependencies.setDependencies(testDependencies);
+        Perseus.Dependencies.setDependencies(cypressTestDependencies);
     });
 
     describe("absolute value graph", () => {

package/src/widgets/__tests__/interactive-graph.cypress.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import renderQuestion from "../../../../../testing/render-question-with-cypress.jsx";
-import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import {cypressTestDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
 import * as Perseus from "../../index.js";
 import {
@@ -29,7 +29,7 @@ const CIRCLES = "svg > circle";
 
 describe("Interactive graph", () => {
     beforeEach(() => {
-        Dependencies.setDependencies(testDependencies);
+        Dependencies.setDependencies(cypressTestDependencies);
         Perseus.init({skipMathJax: true});
     });
 

package/src/widgets/definition.jsx

@@ -1,60 +1,20 @@
 // @flow
 
+import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-import PropTypes from "prop-types";
 import * as React from "react";
-import _ from "underscore";
 
-import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";
 
 import type {
     PerseusRenderer,
     PerseusDefinitionWidgetOptions,
 } from "../perseus-types.js";
-import type {
-    APIOptionsWithDefaults,
-    PerseusScore,
-    WidgetExports,
-    WidgetProps,
-} from "../types.js";
-
-type DefinitionContentProps = {|
-    apiOptions: APIOptionsWithDefaults,
-    content: string,
-    trackInteraction: () => mixed,
-    widgets: PerseusRenderer["widgets"],
-|};
-
-class DefinitionContent extends React.Component<DefinitionContentProps> {
-    static propTypes = {
-        apiOptions: ApiOptions.propTypes,
-        content: PropTypes.string,
-        trackInteraction: PropTypes.func.isRequired,
-        widgets: PropTypes.objectOf(PropTypes.any),
-    };
-
-    componentDidMount() {
-        this.props.trackInteraction();
-    }
-
-    render(): React.Node {
-        return (
-            <View style={styles.tooltipBody}>
-                <Renderer
-                    apiOptions={this.props.apiOptions}
-                    content={this.props.content}
-                    widgets={this.props.widgets}
-                />
-            </View>
-        );
-    }
-}
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
 
-type RenderProps = PerseusDefinitionWidgetOptions; // transform = _.identity
+type RenderProps = PerseusDefinitionWidgetOptions;
 
 type Rubric = PerseusDefinitionWidgetOptions;
 
@@ -89,25 +49,38 @@ class Definition extends React.Component<DefinitionProps> {
     };
 
     render(): React.Node {
-        const content = (
-            <DefinitionContent
-                apiOptions={this.props.apiOptions}
-                content={this.props.definition}
-                key={this.props.definition}
-                trackInteraction={this.props.trackInteraction}
-                widgets={this.props.widgets}
-            />
-        );
-
         return (
-            // $FlowFixMe[incompatible-type]: content prop
-            <Tooltip content={content} placement="top">
-                <span className="perseus-widget-definition">
-                    <View style={styles.definitionLink}>
-                        {this.props.togglePrompt}
-                    </View>
-                </span>
-            </Tooltip>
+            <Popover
+                content={
+                    <PopoverContentCore
+                        color="white"
+                        style={styles.tooltipBody}
+                        closeButtonVisible={true}
+                    >
+                        <Renderer
+                            apiOptions={this.props.apiOptions}
+                            content={this.props.definition}
+                            widgets={this.props.widgets}
+                        />
+                    </PopoverContentCore>
+                }
+                placement="top"
+            >
+                {({open}) => (
+                    <span className="perseus-widget-definition">
+                        <Button
+                            size="small"
+                            kind="tertiary"
+                            onClick={() => {
+                                this.props.trackInteraction();
+                                open();
+                            }}
+                        >
+                            {this.props.togglePrompt}
+                        </Button>
+                    </span>
+                )}
+            </Popover>
         );
     }
 }
@@ -121,14 +94,6 @@ const styles = {
         lineHeight: "30px",
         margin: Spacing.xSmall_8,
     },
-
-    definitionLink: {
-        borderBottom: `dashed 1px ${Color.blue}`,
-        color: Color.blue,
-        cursor: "pointer",
-        display: "inline-block",
-        textDecoration: "none",
-    },
 };
 
 export default ({
@@ -137,5 +102,5 @@ export default ({
     accessible: true,
     defaultAlignment: "inline",
     widget: Definition,
-    transform: _.identity,
+    transform: (x: any) => x,
 }: WidgetExports<typeof Definition>);