@khanacademy/wonder-blocks-clickable 2.4.0 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.4.2
+
+### Patch Changes
+
+-   Updated dependencies [b561425a]
+-   Updated dependencies [a566e232]
+-   Updated dependencies [d2b21a6e]
+    -   @khanacademy/wonder-blocks-core@4.6.0
+
+## 2.4.1
+
+### Patch Changes
+
+-   4c682709: handleClick no longer redundantly triggers on mouseup
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -41,7 +41,6 @@ const disabledHandlers = {
   onMouseLeave: () => void 0,
   onMouseDown: () => void 0,
   onMouseUp: () => void 0,
-  onDragStart: () => void 0,
   onTouchStart: () => void 0,
   onTouchEnd: () => void 0,
   onTouchCancel: () => void 0,
@@ -91,12 +90,7 @@ class ClickableBehavior extends React.Component {
     };
 
     this.handleMouseEnter = e => {
-      if (e.buttons === 1) {
-        this.dragging = true;
-        this.setState({
-          pressed: true
-        });
-      } else if (!this.waitingForClick) {
+      if (!this.waitingForClick) {
         this.setState({
           hovered: true
         });
@@ -105,7 +99,6 @@ class ClickableBehavior extends React.Component {
 
     this.handleMouseLeave = () => {
       if (!this.waitingForClick) {
-        this.dragging = false;
         this.setState({
           hovered: false,
           pressed: false,
@@ -121,22 +114,12 @@ class ClickableBehavior extends React.Component {
     };
 
     this.handleMouseUp = e => {
-      if (this.dragging) {
-        this.dragging = false;
-        this.handleClick(e);
-      }
-
       this.setState({
         pressed: false,
         focused: false
       });
     };
 
-    this.handleDragStart = e => {
-      this.dragging = true;
-      e.preventDefault();
-    };
-
     this.handleTouchStart = () => {
       this.setState({
         pressed: true
@@ -226,7 +209,6 @@ class ClickableBehavior extends React.Component {
     this.state = startState;
     this.waitingForClick = false;
     this.enterClick = false;
-    this.dragging = false;
   }
 
   navigateOrReset(shouldNavigate) {
@@ -358,7 +340,6 @@ class ClickableBehavior extends React.Component {
       onMouseLeave: this.handleMouseLeave,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      onDragStart: this.handleDragStart,
       onTouchStart: this.handleTouchStart,
       onTouchEnd: this.handleTouchEnd,
       onTouchCancel: this.handleTouchCancel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.5.0"
+    "@khanacademy/wonder-blocks-core": "^4.6.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +26,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.4.0"
+    "wb-dev-build-settings": "^0.5.0"
   }
 }

package/src/components/__docs__/clickable.stories.js

@@ -66,6 +66,13 @@ export const Default: StoryComponentType = (args) => (
     </Clickable>
 );
 
+Default.args = {
+    onClick: () => {
+        // eslint-disable-next-line no-alert
+        alert("Click!");
+    },
+};
+
 export const Basic: StoryComponentType = () => (
     <View style={styles.centerText}>
         <Clickable

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

@@ -2,7 +2,7 @@
 /* eslint-disable max-lines */
 // @flow
 import * as React from "react";
-import {render, screen, fireEvent} from "@testing-library/react";
+import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 
@@ -16,12 +16,6 @@ const keyCodes = {
     space: 32,
 };
 
-const wait = (delay: number = 0) =>
-    new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-restricted-syntax
-        return setTimeout(resolve, delay);
-    });
-
 const labelForState = (state: ClickableState): string => {
     const labels = [];
     if (state.hovered) {
@@ -64,7 +58,7 @@ describe("ClickableBehavior", () => {
         expect(onClick).toHaveBeenCalled();
     });
 
-    it("changes only hovered state on mouse enter/leave", () => {
+    it("changes hovered state on mouse enter/leave", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -82,7 +76,7 @@ describe("ClickableBehavior", () => {
         expect(button).not.toHaveTextContent("hovered");
     });
 
-    it("changes only pressed state on mouse enter/leave while dragging", () => {
+    it("changes hovered state on mouse enter while dragging", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -93,18 +87,34 @@ describe("ClickableBehavior", () => {
             </ClickableBehavior>,
         );
         const button = screen.getByRole("button");
+        expect(button).not.toHaveTextContent("hovered");
+        expect(button).not.toHaveTextContent("pressed");
+
+        fireEvent.mouseEnter(button, {buttons: 1});
+        expect(button).not.toHaveTextContent("pressed");
+        expect(button).toHaveTextContent("hovered");
+    });
+
+    it("changes pressed and hover states on mouse leave while dragging", () => {
+        const onClick = jest.fn();
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    const label = labelForState(state);
+                    return <button {...childrenProps}>{label}</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        const button = screen.getByRole("button");
+        expect(button).not.toHaveTextContent("hovered");
         expect(button).not.toHaveTextContent("pressed");
 
         fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
-        fireEvent.mouseMove(button);
         expect(button).toHaveTextContent("pressed");
 
         fireEvent.mouseLeave(button);
+        expect(button).not.toHaveTextContent("hovered");
         expect(button).not.toHaveTextContent("pressed");
-
-        fireEvent.mouseEnter(button, {buttons: 1});
-        expect(button).toHaveTextContent("pressed");
     });
 
     it("changes pressed state on mouse down/up", () => {
@@ -592,10 +602,11 @@ describe("ClickableBehavior", () => {
             // Act
             const link = screen.getByRole("link");
             userEvent.click(link);
-            await wait(0);
 
             // Assert
-            expect(window.location.assign).toHaveBeenCalledTimes(1);
+            await waitFor(() => {
+                expect(window.location.assign).toHaveBeenCalledTimes(1);
+            });
         });
 
         it("should show waiting UI before safeWithNav resolves", async () => {
@@ -763,7 +774,17 @@ describe("ClickableBehavior", () => {
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
     });
 
-    it("calls onClick on mouseup when the mouse was dragging", () => {
+    // The following two tests involve click behavior when dragging.
+    // Here are some notable related actions that cannot be tested using
+    // existing jest/RTL events since these click types are handled
+    // by browsers but aren't registered as clicks by RTL/jest:
+    // 1. Mousedown in the button, drag within the button, and mouseup
+    //    in the button (mouse doesn't leave the button at any point).
+    //    This should result in a successful click.
+    // 2. Mouse down in the button, drag out of the button (don't let go),
+    //    drag back into the button, and mouseup inside the button.
+    //    This should result in a successful click.
+    it("does not call onClick on mouseup when the mouse presses inside and drags away", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -775,19 +796,25 @@ describe("ClickableBehavior", () => {
 
         const button = screen.getByRole("button");
         fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
         fireEvent.mouseLeave(button);
         fireEvent.mouseUp(button);
         expect(onClick).toHaveBeenCalledTimes(0);
+    });
 
-        fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
-        fireEvent.mouseUp(button);
-        expect(onClick).toHaveBeenCalledTimes(1);
+    it("does not call onClick on mouseup when the mouse presses outside and drags in", () => {
+        const onClick = jest.fn();
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
 
+        const button = screen.getByRole("button");
         fireEvent.mouseEnter(button, {buttons: 1});
         fireEvent.mouseUp(button);
-        expect(onClick).toHaveBeenCalledTimes(2);
+        expect(onClick).toHaveBeenCalledTimes(0);
     });
 
     it("doesn't trigger enter key when browser doesn't stop the click", () => {
@@ -891,10 +918,13 @@ describe("ClickableBehavior", () => {
 
                 // Act
                 userEvent.click(screen.getByRole("button"));
-                await wait(0);
 
                 // Assert
-                expect(screen.getByText("Hello, world!")).toBeInTheDocument();
+                await waitFor(() => {
+                    expect(
+                        screen.getByText("Hello, world!"),
+                    ).toBeInTheDocument();
+                });
             });
 
             it("shows waiting state before navigating", async () => {
@@ -970,7 +1000,6 @@ describe("ClickableBehavior", () => {
 
                 // Act
                 userEvent.click(screen.getByRole("button"));
-                await wait(0);
 
                 // Assert
                 expect(
@@ -1015,10 +1044,11 @@ describe("ClickableBehavior", () => {
 
                 // Act
                 userEvent.click(screen.getByRole("button"));
-                await wait(0);
 
                 // Assert
-                expect(safeWithNavMock).toHaveBeenCalled();
+                await waitFor(() => {
+                    expect(safeWithNavMock).toHaveBeenCalled();
+                });
             });
         });
 

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

@@ -1,18 +1,12 @@
 // @flow
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
-import {render, screen, fireEvent} from "@testing-library/react";
+import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Clickable from "../clickable.js";
 
-const wait = (delay: number = 0) =>
-    new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-restricted-syntax
-        return setTimeout(resolve, delay);
-    });
-
 describe("Clickable", () => {
     beforeEach(() => {
         delete window.location;
@@ -170,7 +164,6 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
         expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
@@ -201,7 +194,6 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
         expect(safeWithNavMock).not.toHaveBeenCalled();
@@ -230,10 +222,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(screen.getByText("Hello, world!")).toBeInTheDocument();
+        await waitFor(() => {
+            expect(screen.getByText("Hello, world!")).toBeInTheDocument();
+        });
     });
 
     test("beforeNav resolution results in safeWithNav being called", async () => {
@@ -261,10 +254,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(safeWithNavMock).toHaveBeenCalled();
+        await waitFor(() => {
+            expect(safeWithNavMock).toHaveBeenCalled();
+        });
     });
 
     test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
@@ -291,10 +285,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        await waitFor(() => {
+            expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        });
     });
 
     test("beforeNav resolution and safeWithNav with skipClientNav=true waits for promise resolution", async () => {
@@ -322,10 +317,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        await waitFor(() => {
+            expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        });
     });
 
     test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
@@ -352,10 +348,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        await waitFor(() => {
+            expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        });
     });
 
     test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", () => {
@@ -418,10 +415,11 @@ describe("Clickable", () => {
 
         // Act
         userEvent.click(screen.getByTestId("button"));
-        await wait(0);
 
         // Assert
-        expect(safeWithNavMock).toHaveBeenCalled();
+        await waitFor(() => {
+            expect(safeWithNavMock).toHaveBeenCalled();
+        });
         // client side nav to /foo
         expect(screen.getByText("Hello, world!")).toBeInTheDocument();
         // not a full page nav

package/src/components/clickable-behavior.js

@@ -205,7 +205,6 @@ export type ChildrenProps = {|
     onMouseLeave: () => mixed,
     onMouseDown: () => mixed,
     onMouseUp: (e: SyntheticMouseEvent<>) => mixed,
-    onDragStart: (e: SyntheticMouseEvent<>) => mixed,
     onTouchStart: () => mixed,
     onTouchEnd: () => mixed,
     onTouchCancel: () => mixed,
@@ -223,7 +222,6 @@ const disabledHandlers = {
     onMouseLeave: () => void 0,
     onMouseDown: () => void 0,
     onMouseUp: () => void 0,
-    onDragStart: () => void 0,
     onTouchStart: () => void 0,
     onTouchEnd: () => void 0,
     onTouchCancel: () => void 0,
@@ -265,7 +263,7 @@ const startState: ClickableState = {
  * 3. Keyup (spacebar/enter) -> focus state
  *
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
+ * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel,
  * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
  * component that has the ClickableBehavior. You cannot override these handlers
  * without potentially breaking the functionality of ClickableBehavior.
@@ -330,7 +328,6 @@ export default class ClickableBehavior extends React.Component<
 > {
     waitingForClick: boolean;
     enterClick: boolean;
-    dragging: boolean;
 
     static defaultProps: DefaultProps = {
         disabled: false,
@@ -356,7 +353,6 @@ export default class ClickableBehavior extends React.Component<
         this.state = startState;
         this.waitingForClick = false;
         this.enterClick = false;
-        this.dragging = false;
     }
 
     navigateOrReset(shouldNavigate: boolean) {
@@ -513,18 +509,13 @@ export default class ClickableBehavior extends React.Component<
     };
 
     handleMouseEnter: (e: SyntheticMouseEvent<>) => void = (e) => {
-        // When the left button is pressed already, we want it to be pressed
-        if (e.buttons === 1) {
-            this.dragging = true;
-            this.setState({pressed: true});
-        } else if (!this.waitingForClick) {
+        if (!this.waitingForClick) {
             this.setState({hovered: true});
         }
     };
 
     handleMouseLeave: () => void = () => {
         if (!this.waitingForClick) {
-            this.dragging = false;
             this.setState({hovered: false, pressed: false, focused: false});
         }
     };
@@ -534,18 +525,9 @@ export default class ClickableBehavior extends React.Component<
     };
 
     handleMouseUp: (e: SyntheticMouseEvent<>) => void = (e) => {
-        if (this.dragging) {
-            this.dragging = false;
-            this.handleClick(e);
-        }
         this.setState({pressed: false, focused: false});
     };
 
-    handleDragStart: (e: SyntheticMouseEvent<>) => void = (e) => {
-        this.dragging = true;
-        e.preventDefault();
-    };
-
     handleTouchStart: () => void = () => {
         this.setState({pressed: true});
     };
@@ -630,7 +612,6 @@ export default class ClickableBehavior extends React.Component<
                   onMouseLeave: this.handleMouseLeave,
                   onMouseDown: this.handleMouseDown,
                   onMouseUp: this.handleMouseUp,
-                  onDragStart: this.handleDragStart,
                   onTouchStart: this.handleTouchStart,
                   onTouchEnd: this.handleTouchEnd,
                   onTouchCancel: this.handleTouchCancel,