@khanacademy/wonder-blocks-clickable 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.4.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.6.1
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "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.1"
   },
   "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.6.0"
   }
 }

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) {
@@ -608,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 () => {
@@ -923,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 () => {
@@ -1002,7 +1000,6 @@ describe("ClickableBehavior", () => {
 
                 // Act
                 userEvent.click(screen.getByRole("button"));
-                await wait(0);
 
                 // Assert
                 expect(
@@ -1047,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