chore: Some more testing and cleanup

Author: imp-dance

src/RTKLoader.tsx

@@ -20,10 +20,6 @@ export function RTKLoader<T>(
     return props.loader ?? <React.Fragment />;
   }
   if (props.query.isError && props.query.error) {
-    console.warn(
-      `RTKLoader error: ${props.query.requestId}`,
-      props.query.error
-    );
     return (
       props.onError?.(props.query.error as SerializedError) ?? (
         <React.Fragment />

src/createLoader.ts

@@ -80,23 +80,3 @@ export const createLoader = <
 
   return loader;
 };
-
-/* const getData = <T>(): T | undefined => "" as T;
-
-const l = createLoader({
-  queries: () =>
-    [
-      {
-        data: getData<{ key: string }>(),
-        isError: false,
-        isFetching: false,
-        isLoading: false,
-        isSuccess: false,
-        isUninitialized: true,
-        refetch: () => {},
-      },
-    ] as const,
-  transform: (queries) => ({
-    test: queries[0].data.key,
-  }),
-}); */

testing-app/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.68",
     "@types/react": "^18.0.21",
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^1.8.6",
+    "@testing-library/dom": "^8.19.0",
     "msw": "^0.47.4",
     "react-redux": "^8.0.4",
     "redux": "^4.2.0"

testing-app/src/testComponents.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { useRef, useState } from "react";
 import { aggregateToQuery } from "../../src/aggregateToQuery";
 import { createLoader } from "../../src/createLoader";
 import { withLoader } from "../../src/withLoader";
@@ -81,6 +82,43 @@ export const FailTester = withLoader(
   })
 );
 
+export const FetchTestComponent = () => {
+  const [name, setName] = useState("charizard");
+
+  return <FetchTester name={name} onChange={setName} />;
+};
+
+export const FetchTester = withLoader(
+  (props, loaderData) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    return (
+      <div>
+        #{loaderData[0].data.id}
+        <br />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            props.onChange(inputRef.current?.value ?? "");
+          }}
+        >
+          <input type="text" ref={inputRef} />
+          <button>Go</button>
+        </form>
+      </div>
+    );
+  },
+  createLoader({
+    queries: (name: string) =>
+      [useGetPokemonByNameQuery(name)] as const,
+    queriesArg: (props: {
+      name: string;
+      onChange: (name: string) => void;
+    }) => props.name,
+    onLoading: () => <div>Loading</div>,
+    onFetching: () => <div>Fetching</div>,
+  })
+);
+
 export const TestAggregateComponent = () => {
   const q1 = useGetPokemonByNameQuery("charizard");
   const q2 = useGetPokemonsQuery(undefined);

testing-app/src/tests.test.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import userEvent from "@testing-library/user-event";
 import {
   ExtendedLoaderComponent,
   FailTester,
+  FetchTestComponent,
   LoadPokemon,
   SimpleLoadedComponent,
   TestAggregateComponent,
@@ -47,6 +49,22 @@ describe("withLoader", () => {
     );
   });
 
+  test("onFetching renders when applicable", async () => {
+    render(<FetchTestComponent />);
+    expect(screen.getByText("Loading")).toBeVisible();
+    await waitFor(() =>
+      expect(screen.getByRole("textbox")).toBeVisible()
+    );
+    const input = screen.getByRole("textbox");
+    userEvent.type(input, "Abc{Enter}");
+    await waitFor(() =>
+      expect(screen.getByText("Fetching")).toBeVisible()
+    );
+    await waitFor(() =>
+      expect(screen.getByText("#3")).toBeVisible()
+    );
+  });
+
   describe(".extend()", () => {
     test("Can extend onLoading", async () => {
       render(<ExtendedLoaderComponent />);

testing-app/yarn.lock

@@ -1783,7 +1783,7 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^8.5.0":
+"@testing-library/dom@^8.19.0", "@testing-library/dom@^8.5.0":
   version "8.19.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
   integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
@@ -1821,12 +1821,10 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
 
 "@tootallnate/once@1":
   version "1.1.2"