@khanacademy/wonder-blocks-clickable 2.2.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -15,8 +15,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-core": "^3.2.0"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-core": "^4.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,7 +26,7 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

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

@@ -22,8 +22,9 @@ const wait = (delay: number = 0) =>
 describe("ClickableBehavior", () => {
     beforeEach(() => {
         // Note: window.location.assign and window.open need mock functions in
-        // the testing environment.
-        window.location.assign = jest.fn();
+        // the testing environment
+        delete window.location;
+        window.location = {assign: jest.fn()};
         window.open = jest.fn();
     });
 
@@ -566,6 +567,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });
@@ -1052,6 +1054,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });

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

@@ -13,6 +13,11 @@ const wait = (delay: number = 0) =>
     });
 
 describe("Clickable", () => {
+    beforeEach(() => {
+        delete window.location;
+        window.location = {assign: jest.fn()};
+    });
+
     test("client-side navigation", () => {
         // Arrange
         const wrapper = mount(
@@ -129,8 +134,6 @@ describe("Clickable", () => {
 
     test("should navigate to a specific link using the keyboard", () => {
         // Arrange
-        window.location.assign = jest.fn();
-
         const wrapper = mount(
             <Clickable testId="button" href="/foo" skipClientNav={true}>
                 {(eventState) => <h1>Click Me!</h1>}
@@ -276,7 +279,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -309,7 +311,6 @@ describe("Clickable", () => {
 
     test("beforeNav resolution and safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -336,8 +337,6 @@ describe("Clickable", () => {
         buttonWrapper.simulate("click", {button: 0});
         await wait(0);
         buttonWrapper.update();
-        await wait(0);
-        buttonWrapper.update();
 
         // Assert
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
@@ -345,7 +344,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -376,9 +374,8 @@ describe("Clickable", () => {
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
     });
 
-    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
+    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -406,12 +403,16 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
     });
 
     test("safeWithNav with beforeNav resolution and skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -442,7 +443,12 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
     });
 
     describe("raw events", () => {

package/src/components/clickable-behavior.js

@@ -558,9 +558,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)
@@ -585,9 +584,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)

package/src/components/clickable.md

@@ -145,6 +145,13 @@ const styles = StyleSheet.create({
 </MemoryRouter>
 ```
 
+### Running callbacks on navigation
+
+When using the `href` prop, the `onClick`, `beforeNav`, and `safeWithNav` props
+can be used to run callbacks when navigating to the new URL. Which prop to use
+depends on the use case. See the [Button](#section-button) documentation for
+details.
+
 ### Navigating with the Keyboard
 
 Clickable adds support to keyboard navigation. This way, your components are