test: More coverage

Author: imp-dance

CONTRIBUTING.md

@@ -42,11 +42,17 @@ For now, try to following existing patterns. Formalized code-guidelines will com
 - First, make sure you create a link between your local package and the testing-app. In the root of the repository:
 
 ```bash
-$ npm link
-$ cd testing-app
-$ npm link @ryfylke-react/rtk-query-loader
+$ yarn run setup-link
 ```
 
+> If this doesn't work, try to run the commands manually:
+>
+> ```bash
+> $ npm link
+> $ cd testing-app
+> $ npm link @ryfylke-react/rtk-query-loader
+> ```
+
 - In the `testing-app` directory, install dependencies, and then run the tests:
 
 ```bash

package.json

@@ -9,7 +9,8 @@
     "build": "yarn build:esm && yarn build:cjs",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "prepare": "yarn build"
+    "prepare": "yarn build",
+    "setup-link": "npm link && cd testing-app && npm link @ryfylke-react/rtk-query-loader"
   },
   "repository": {
     "type": "git",

src/index.ts

@@ -1,3 +1,4 @@
+export { aggregateToQuery } from "./aggregateToQuery";
 export { createLoader, createUseLoader } from "./createLoader";
 export { RTKLoader } from "./RTKLoader";
 export type {

testing-app/src/testComponents.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import {
+  createLoader,
+  InferLoaderData,
+  withLoader,
+} from "@ryfylke-react/rtk-query-loader";
 import { useRef, useState } from "react";
 import { aggregateToQuery } from "../../src/aggregateToQuery";
-import { createLoader } from "../../src/createLoader";
-import { InferLoaderData } from "../../src/types";
-import { withLoader } from "../../src/withLoader";
 import {
   Pokemon,
   Pokemons,

testing-app/src/tests.test.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import {
+  createLoader,
+  withLoader,
+} from "@ryfylke-react/rtk-query-loader";
 import userEvent from "@testing-library/user-event";
 import { useState } from "react";
-import { createLoader } from "../../src/createLoader";
-import { withLoader } from "../../src/withLoader";
 import {
   useGetPokemonByNameQuery,
   useGetPokemonsQuery,
@@ -14,9 +16,13 @@ import {
   LoadPokemon,
   SimpleLoadedComponent,
   TestAggregateComponent,
-  TestTransformed,
 } from "./testComponents";
-import { render, screen, waitFor } from "./utils";
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "./utils";
 
 describe("aggregateToQuery", () => {
   test("It aggregates query status", async () => {
@@ -59,7 +65,9 @@ describe("withLoader", () => {
 
   test("onFetching renders when applicable", async () => {
     render(<FetchTestRenderer />);
-    expect(screen.getByText("Loading")).toBeVisible();
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Loading")
+    );
     await waitFor(() =>
       expect(screen.getByRole("textbox")).toBeVisible()
     );
@@ -68,34 +76,57 @@ describe("withLoader", () => {
     await waitFor(() =>
       expect(screen.getByText("Fetching")).toBeVisible()
     );
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Fetching")
+    );
     await waitFor(() =>
       expect(screen.getByText("#3")).toBeVisible()
     );
   });
 
-  test("whileFetching renders when applicable", async () => {
+  test("Internal state won't reset when using whileFetching", async () => {
     render(<FetchTestRenderer while />);
-    expect(screen.getByText("Loading")).toBeVisible();
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Loading")
+    );
     await waitFor(() =>
       expect(screen.getByRole("textbox")).toBeVisible()
     );
     const input = screen.getByRole("textbox");
     userEvent.type(input, "Abc{Enter}");
-    await waitFor(
-      () =>
-        expect(screen.getByText("FetchingWhile")).toBeVisible(),
-      { interval: 20 }
+    await waitFor(() =>
+      expect(screen.getByText("FetchingWhile")).toBeVisible()
+    );
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("FetchingWhile")
     );
     await waitFor(() =>
       expect(screen.getByText("#3")).toBeVisible()
     );
+    expect(screen.getByRole("textbox")).toHaveValue("Abc");
   });
 
-  test("Can transform the output of the loader", async () => {
-    render(<TestTransformed />);
+  // Not wanted behavior, but expected behavior:
+  test("Internal state will reset when using onFetching", async () => {
+    render(<FetchTestRenderer />);
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Loading")
+    );
     await waitFor(() =>
-      expect(screen.getByText("charizard")).toBeVisible()
+      expect(screen.getByRole("textbox")).toBeVisible()
+    );
+    const input = screen.getByRole("textbox");
+    userEvent.type(input, "Abc{Enter}");
+    await waitFor(() =>
+      expect(screen.getByText("Fetching")).toBeVisible()
+    );
+    await waitForElementToBeRemoved(() =>
+      screen.queryByText("Fetching")
+    );
+    await waitFor(() =>
+      expect(screen.getByText("#3")).toBeVisible()
     );
+    expect(screen.getByRole("textbox")).toHaveValue("");
   });
 
   describe(".extend()", () => {
@@ -241,7 +272,7 @@ describe("withLoader", () => {
             <ul>
               <li>{loaderData[0].data.name}</li>
               {loaderData[1].data.results.map((pokemon) => (
-                <li>{pokemon.name}</li>
+                <li key={pokemon.name}>{pokemon.name}</li>
               ))}
             </ul>
           </div>