@khanacademy/wonder-blocks-data 4.0.0 → 6.0.0

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

@@ -7,19 +7,29 @@ import {render, act} from "@testing-library/react";
 import * as ReactDOMServer from "react-dom/server";
 import {Server, View} from "@khanacademy/wonder-blocks-core";
 
+import {clearSharedCache} from "../../hooks/use-shared-cache.js";
 import TrackData from "../track-data.js";
 import {RequestFulfillment} from "../../util/request-fulfillment.js";
 import {SsrCache} from "../../util/ssr-cache.js";
 import {RequestTracker} from "../../util/request-tracking.js";
-import InterceptData from "../intercept-data.js";
+import InterceptRequests from "../intercept-requests.js";
 import Data from "../data.js";
+import {
+    // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
+    // have fixed:
+    // https://github.com/import-js/eslint-plugin-import/issues/2073
+    // eslint-disable-next-line import/named
+    WhenClientSide,
+} from "../../hooks/use-hydratable-effect.js";
 
 describe("Data", () => {
     beforeEach(() => {
+        clearSharedCache();
+
         const responseCache = new SsrCache();
         jest.spyOn(SsrCache, "Default", "get").mockReturnValue(responseCache);
         jest.spyOn(RequestFulfillment, "Default", "get").mockReturnValue(
-            new RequestFulfillment(responseCache),
+            new RequestFulfillment(),
         );
         jest.spyOn(RequestTracker, "Default", "get").mockReturnValue(
             new RequestTracker(responseCache),
@@ -35,7 +45,7 @@ describe("Data", () => {
             jest.spyOn(Server, "isServerSide").mockReturnValue(false);
         });
 
-        describe("without cached data", () => {
+        describe("without hydrated data", () => {
             beforeEach(() => {
                 /**
                  * Each of these test cases will not have cached data to be
@@ -107,7 +117,7 @@ describe("Data", () => {
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
             });
 
-            it("should render with an error if the request rejects to an error", async () => {
+            it("should render with an error if the handler request rejects to an error", async () => {
                 // Arrange
                 const fulfillSpy = jest.spyOn(
                     RequestFulfillment.Default,
@@ -122,20 +132,25 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
+
                 /**
                  * We wait for the fulfillment to resolve.
                  */
-                await act(() => fulfillSpy.mock.results[0].value);
+                await act(() =>
+                    fulfillSpy.mock.results[0].value.catch(() => {
+                        /* do nothing */
+                    }),
+                );
 
                 // Assert
-                expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
-                expect(fakeChildrenFn).toHaveBeenLastCalledWith({
+                expect(fakeChildrenFn).toHaveBeenNthCalledWith(2, {
                     status: "error",
-                    error: "OH NOES!",
+                    error: expect.any(Error),
                 });
+                expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
             });
 
-            it("should render with data if the request resolves with data", async () => {
+            it("should render with data if the handler resolves with data", async () => {
                 // Arrange
                 const fulfillSpy = jest.spyOn(
                     RequestFulfillment.Default,
@@ -164,52 +179,68 @@ describe("Data", () => {
                 });
             });
 
-            it.each`
-                error
-                ${"CATASTROPHE!"}
-                ${new Error("CATASTROPHE!")}
-            `(
-                "should render with an error if the request rejects with $error",
-                async ({error}) => {
-                    // Arrange
-                    const fulfillSpy = jest
-                        .spyOn(RequestFulfillment.Default, "fulfill")
-                        .mockReturnValue(Promise.reject(error));
+            it("should render with aborted if the request rejects with an abort error", async () => {
+                // Arrange
+                const fulfillSpy = jest.spyOn(
+                    RequestFulfillment.Default,
+                    "fulfill",
+                );
 
-                    const fakeHandler = () => Promise.resolve("YAY!");
-                    const fakeChildrenFn = jest.fn(() => null);
-                    const consoleSpy = jest
-                        .spyOn(console, "error")
-                        .mockImplementation(() => {
-                            /* Just to shut it up */
-                        });
+                const abortError = new Error("bang bang, abort!");
+                abortError.name = "AbortError";
+                const fakeHandler = () => Promise.reject(abortError);
+                const fakeChildrenFn = jest.fn(() => null);
 
-                    // Act
-                    render(
-                        <Data handler={fakeHandler} requestId="ID">
-                            {fakeChildrenFn}
-                        </Data>,
-                    );
-                    /**
-                     * We wait for the fulfillment to reject.
-                     */
-                    await act(() =>
-                        fulfillSpy.mock.results[0].value.catch(() => {}),
-                    );
+                // Act
+                render(
+                    <Data handler={fakeHandler} requestId="ID">
+                        {fakeChildrenFn}
+                    </Data>,
+                );
+                /**
+                 * We wait for the fulfillment to resolve.
+                 */
+                await act(() => fulfillSpy.mock.results[0].value);
 
-                    // Assert
-                    expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
-                    expect(fakeChildrenFn).toHaveBeenLastCalledWith({
+                // Assert
+                expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
+                expect(fakeChildrenFn).toHaveBeenLastCalledWith({
+                    status: "aborted",
+                });
+            });
+
+            it("should render with an error if the RequestFulfillment rejects with an error", async () => {
+                // Arrange
+                const fulfillSpy = jest
+                    .spyOn(RequestFulfillment.Default, "fulfill")
+                    .mockResolvedValue({
                         status: "error",
-                        error: "CATASTROPHE!",
+                        error: new Error("CATASTROPHE!"),
                     });
-                    expect(consoleSpy).toHaveBeenCalledWith(
-                        expect.stringMatching(
-                            "Unexpected error occurred during data fulfillment:(?: Error:)? CATASTROPHE!",
-                        ),
-                    );
-                },
-            );
+
+                const fakeHandler = () => Promise.resolve("YAY!");
+                const fakeChildrenFn = jest.fn(() => null);
+
+                // Act
+                render(
+                    <Data handler={fakeHandler} requestId="ID">
+                        {fakeChildrenFn}
+                    </Data>,
+                );
+                /**
+                 * We wait for the fulfillment to reject.
+                 */
+                await act(() =>
+                    fulfillSpy.mock.results[0].value.catch(() => {}),
+                );
+
+                // Assert
+                expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
+                expect(fakeChildrenFn).toHaveBeenLastCalledWith({
+                    status: "error",
+                    error: expect.any(Error),
+                });
+            });
 
             it("should start loading if the id changes and request not cached", async () => {
                 // Arrange
@@ -239,12 +270,13 @@ describe("Data", () => {
                 );
 
                 // Assert
-                // Render 1: Caused by handler changed
-                // Render 2: Caused by result state changing to null
-                expect(fakeChildrenFn).toHaveBeenCalledTimes(2);
+                expect(fakeChildrenFn).toHaveBeenCalledTimes(1);
                 expect(fakeChildrenFn).toHaveBeenLastCalledWith({
                     status: "loading",
                 });
+
+                // We have to do this or testing-library gets very upset.
+                await act(() => fulfillSpy.mock.results[0].value);
             });
 
             it("should ignore resolution of pending handler fulfillment when id changes", async () => {
@@ -319,7 +351,10 @@ describe("Data", () => {
 
             it("should ignore catastrophic request fulfillment when id changes", async () => {
                 // Arrange
-                const catastrophe = Promise.reject("CATASTROPHE!");
+                const catastrophe = Promise.resolve({
+                    status: "error",
+                    error: new Error("CATASTROPHE!"),
+                });
                 jest.spyOn(
                     RequestFulfillment.Default,
                     "fulfill",
@@ -347,12 +382,12 @@ describe("Data", () => {
                 // Assert
                 expect(fakeChildrenFn).not.toHaveBeenCalledWith({
                     status: "error",
-                    error: "CATASTROPHE!",
+                    error: expect.any(Error),
                 });
             });
 
             describe("with data interceptor", () => {
-                it("should request data from interceptor", () => {
+                it("should request data from interceptor", async () => {
                     // Arrange
                     const fakeHandler = jest.fn().mockResolvedValue("data");
                     const fakeChildrenFn = jest.fn(() => null);
@@ -362,22 +397,20 @@ describe("Data", () => {
 
                     // Act
                     render(
-                        <InterceptData
-                            requestId="ID"
-                            handler={interceptHandler}
-                        >
+                        <InterceptRequests interceptor={interceptHandler}>
                             <Data handler={fakeHandler} requestId="ID">
                                 {fakeChildrenFn}
                             </Data>
-                        </InterceptData>,
+                        </InterceptRequests>,
                     );
+                    await act(() => interceptHandler.mock.results[0].value);
 
                     // Assert
                     expect(interceptHandler).toHaveBeenCalledTimes(1);
                     expect(fakeHandler).not.toHaveBeenCalled();
                 });
 
-                it("should invoke handler method if interceptor method returns null", () => {
+                it("should invoke handler method if interceptor method returns null", async () => {
                     // Arrange
                     const fakeHandler = jest.fn().mockResolvedValue("data");
                     const fakeChildrenFn = jest.fn(() => null);
@@ -385,59 +418,21 @@ describe("Data", () => {
 
                     // Act
                     render(
-                        <InterceptData
-                            handler={interceptHandler}
-                            requestId="ID"
-                        >
+                        <InterceptRequests interceptor={interceptHandler}>
                             <Data handler={fakeHandler} requestId="ID">
                                 {fakeChildrenFn}
                             </Data>
-                        </InterceptData>,
+                        </InterceptRequests>,
                     );
+                    await act(() => fakeHandler.mock.results[0].value);
 
                     // Assert
                     expect(interceptHandler).toHaveBeenCalledTimes(1);
                     expect(fakeHandler).toHaveBeenCalledTimes(1);
                 });
             });
-        });
-
-        describe("with cache data", () => {
-            beforeEach(() => {
-                /**
-                 * Each of these test cases will start out with some cached data
-                 * retrieved.
-                 */
-                jest.spyOn(
-                    SsrCache.Default,
-                    "getEntry",
-                    // Fake once because that's how the cache would work,
-                    // deleting the hydrated value as soon as it was used.
-                ).mockReturnValueOnce({
-                    data: "YAY! DATA!",
-                });
-            });
 
-            it("should render first time with the cached data", () => {
-                // Arrange
-                const fakeHandler = () => Promise.resolve("data");
-                const fakeChildrenFn = jest.fn(() => null);
-
-                // Act
-                render(
-                    <Data handler={fakeHandler} requestId="ID">
-                        {fakeChildrenFn}
-                    </Data>,
-                );
-
-                // Assert
-                expect(fakeChildrenFn).toHaveBeenCalledWith({
-                    status: "success",
-                    data: "YAY! DATA!",
-                });
-            });
-
-            it("should retain old data while reloading if showOldDataWhileLoading is true", async () => {
+            it("should retain old data while reloading if retainResultOnChange is true", async () => {
                 // Arrange
                 const response1 = Promise.resolve("data1");
                 const response2 = Promise.resolve("data2");
@@ -449,49 +444,76 @@ describe("Data", () => {
                 const wrapper = render(
                     <Data
                         handler={fakeHandler1}
-                        requestId="ID"
-                        showOldDataWhileLoading={false}
+                        requestId="ID1"
+                        retainResultOnChange={true}
                     >
                         {fakeChildrenFn}
                     </Data>,
                 );
+                fakeChildrenFn.mockClear();
+                await act(() => response1);
                 wrapper.rerender(
                     <Data
                         handler={fakeHandler2}
-                        requestId="ID"
-                        showOldDataWhileLoading={true}
+                        requestId="ID2"
+                        retainResultOnChange={true}
                     >
                         {fakeChildrenFn}
                     </Data>,
                 );
+                await act(() => response2);
 
                 // Assert
                 expect(fakeChildrenFn).not.toHaveBeenCalledWith({
                     status: "loading",
                 });
+                expect(fakeChildrenFn).toHaveBeenCalledWith({
+                    status: "success",
+                    data: "data1",
+                });
+                expect(fakeChildrenFn).toHaveBeenLastCalledWith({
+                    status: "success",
+                    data: "data2",
+                });
             });
+        });
 
-            it("should not request data when alwaysRequestOnHydration is false and cache has a valid data result", () => {
+        describe("with hydrated data", () => {
+            beforeEach(() => {
+                /**
+                 * Each of these test cases will start out with some cached data
+                 * retrieved.
+                 */
+                jest.spyOn(
+                    SsrCache.Default,
+                    "getEntry",
+                    // Fake once because that's how the cache would work,
+                    // deleting the hydrated value as soon as it was used.
+                ).mockReturnValueOnce({
+                    data: "YAY! DATA!",
+                });
+            });
+
+            it("should render first time with the cached data", () => {
                 // Arrange
-                const fakeHandler = jest.fn().mockResolvedValue("data");
+                const fakeHandler = () => Promise.resolve("data");
                 const fakeChildrenFn = jest.fn(() => null);
 
                 // Act
                 render(
-                    <Data
-                        handler={fakeHandler}
-                        requestId="ID"
-                        alwaysRequestOnHydration={false}
-                    >
+                    <Data handler={fakeHandler} requestId="ID">
                         {fakeChildrenFn}
                     </Data>,
                 );
 
                 // Assert
-                expect(fakeHandler).not.toHaveBeenCalled();
+                expect(fakeChildrenFn).toHaveBeenCalledWith({
+                    status: "success",
+                    data: "YAY! DATA!",
+                });
             });
 
-            it("should request data if cached data value is valid but alwaysRequestOnHydration is true", () => {
+            it("should not request data when clientBehavior is WhenClientSide.ExecuteWhenNoSuccessResult and cache has a valid success result", () => {
                 // Arrange
                 const fakeHandler = jest.fn().mockResolvedValue("data");
                 const fakeChildrenFn = jest.fn(() => null);
@@ -501,43 +523,34 @@ describe("Data", () => {
                     <Data
                         handler={fakeHandler}
                         requestId="ID"
-                        alwaysRequestOnHydration={true}
+                        clientBehavior={
+                            WhenClientSide.ExecuteWhenNoSuccessResult
+                        }
                     >
                         {fakeChildrenFn}
                     </Data>,
                 );
 
                 // Assert
-                expect(fakeHandler).toHaveBeenCalledTimes(1);
-            });
-        });
-
-        describe("with cached abort", () => {
-            beforeEach(() => {
-                /**
-                 * Each of these test cases will start out with a cached abort.
-                 */
-                jest.spyOn(
-                    SsrCache.Default,
-                    "getEntry",
-                    // Fake once because that's how the cache would work,
-                    // deleting the hydrated value as soon as it was used.
-                ).mockReturnValueOnce({
-                    data: null,
-                });
+                expect(fakeHandler).not.toHaveBeenCalled();
             });
 
-            it("should request data if cached data value is null (i.e. represents an aborted request)", () => {
+            it("should request data if cached data value is valid but clientBehavior is WhenClientSide.AlwaysExecute is true", async () => {
                 // Arrange
                 const fakeHandler = jest.fn().mockResolvedValue("data");
                 const fakeChildrenFn = jest.fn(() => null);
 
                 // Act
                 render(
-                    <Data handler={fakeHandler} requestId="ID">
+                    <Data
+                        handler={fakeHandler}
+                        requestId="ID"
+                        clientBehavior={WhenClientSide.AlwaysExecute}
+                    >
                         {fakeChildrenFn}
                     </Data>,
                 );
+                await act(() => fakeHandler.mock.results[0].value);
 
                 // Assert
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
@@ -559,7 +572,7 @@ describe("Data", () => {
                 });
             });
 
-            it("should always request data if there's a cached error", () => {
+            it("should always request data if there's a cached error", async () => {
                 // Arrange
                 const fakeHandler = jest.fn().mockResolvedValue("data");
                 const fakeChildrenFn = jest.fn(() => null);
@@ -570,6 +583,8 @@ describe("Data", () => {
                         {fakeChildrenFn}
                     </Data>,
                 );
+                // Have to await the promise in an act to keep TL/R happy.
+                await act(() => fakeHandler.mock.results[0].value);
 
                 // Assert
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
@@ -662,14 +677,11 @@ describe("Data", () => {
 
                     // Act
                     ReactDOMServer.renderToString(
-                        <InterceptData
-                            handler={interceptedHandler}
-                            requestId="ID"
-                        >
+                        <InterceptRequests interceptor={interceptedHandler}>
                             <Data handler={fakeHandler} requestId="ID">
                                 {fakeChildrenFn}
                             </Data>
-                        </InterceptData>,
+                        </InterceptRequests>,
                     );
 
                     // Assert
@@ -692,14 +704,11 @@ describe("Data", () => {
                     // Act
                     ReactDOMServer.renderToString(
                         <TrackData>
-                            <InterceptData
-                                requestId="ID"
-                                handler={interceptedHandler}
-                            >
+                            <InterceptRequests interceptor={interceptedHandler}>
                                 <Data handler={fakeHandler} requestId="ID">
                                     {fakeChildrenFn}
                                 </Data>
-                            </InterceptData>
+                            </InterceptRequests>
                         </TrackData>,
                     );
 
@@ -777,7 +786,7 @@ describe("Data", () => {
                 // Assert
                 expect(fakeChildrenFn).toHaveBeenCalledWith({
                     status: "error",
-                    error: "OH NO! IT GO BOOM",
+                    error: expect.any(Error),
                 });
             });
 
@@ -817,14 +826,11 @@ describe("Data", () => {
 
                     // Act
                     ReactDOMServer.renderToString(
-                        <InterceptData
-                            handler={interceptHandler}
-                            requestId="ID"
-                        >
+                        <InterceptRequests interceptor={interceptHandler}>
                             <Data handler={fakeHandler} requestId="ID">
                                 {fakeChildrenFn}
                             </Data>
-                        </InterceptData>,
+                        </InterceptRequests>,
                     );
 
                     // Assert

package/src/components/__tests__/intercept-requests.test.js

@@ -0,0 +1,58 @@
+// @flow
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import InterceptContext from "../intercept-context.js";
+import InterceptRequests from "../intercept-requests.js";
+
+describe("InterceptRequests", () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("should update context with fulfillRequest method", () => {
+        // Arrange
+        const fakeHandler = (requestId): Promise<string> =>
+            Promise.resolve("data");
+        const props = {
+            interceptor: fakeHandler,
+        };
+        const captureContextFn = jest.fn();
+
+        // Act
+        render(
+            <InterceptRequests {...props}>
+                <InterceptContext.Consumer>
+                    {captureContextFn}
+                </InterceptContext.Consumer>
+            </InterceptRequests>,
+        );
+
+        // Assert
+        expect(captureContextFn).toHaveBeenCalledWith([fakeHandler]);
+    });
+
+    it("should override parent InterceptRequests", () => {
+        // Arrange
+        const fakeHandler1 = jest.fn();
+        const fakeHandler2 = jest.fn();
+        const captureContextFn = jest.fn();
+
+        // Act
+        render(
+            <InterceptRequests interceptor={fakeHandler1}>
+                <InterceptRequests interceptor={fakeHandler2}>
+                    <InterceptContext.Consumer>
+                        {captureContextFn}
+                    </InterceptContext.Consumer>
+                </InterceptRequests>
+            </InterceptRequests>,
+        );
+
+        // Assert
+        expect(captureContextFn).toHaveBeenCalledWith([
+            fakeHandler1,
+            fakeHandler2,
+        ]);
+    });
+});