Feature/hook-tests

src/components/App/App.test.tsx

@@ -7,21 +7,22 @@ import CharacarterWrapper from "../../features/characters/store/CharactersWrappe
 
 describe("Given component App", () => {
   describe("When it is render", () => {
-    test("It should have a HTMLElement main", async () => {
+    test("Then it should have go to HomePage", async () => {
       render(
         <CharacarterWrapper>
           <ThemeProvider theme={mainTheme}>
-            <MemoryRouter initialEntries={[{ pathname: "/" }]}>
+            <MemoryRouter initialEntries={["/"]}>
               <App />
             </MemoryRouter>
           </ThemeProvider>
         </CharacarterWrapper>,
       );
-      const homePageElement = screen.getByRole("heading", {
+
+      const headingElment = screen.getByRole("heading", {
         name: "Characters",
       });
 
-      expect(homePageElement).toBeInTheDocument();
+      expect(headingElment).toBeInTheDocument();
     });
   });
 });

src/components/CharacterList/CharaterList.test.tsx

@@ -1,10 +1,10 @@
 import { ThemeProvider } from "styled-components";
 import mainTheme from "../../styles/mainTheme";
 import CharacterList from "./CharacterList";
-import { getAllByRole, render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import CharacarterWrapper from "../../features/characters/store/CharactersWrapper";
-import App from "../App/App";
 import { MemoryRouter } from "react-router-dom";
+import HomePage from "../../pages/HomePage/HomePage";
 
 describe("Given the component CharacterList", () => {
   describe("When CharacterList is initialize", () => {
@@ -29,25 +29,30 @@ describe("Given the component CharacterList", () => {
   });
 
   describe("When we recive data of characters", () => {
-    test("it expect to have characters cards", () => {
-      const expectedNames = ["Characters", "Link", "Yoshi"];
-
-      render(
-        <CharacarterWrapper>
-          <ThemeProvider theme={mainTheme}>
-            <MemoryRouter initialEntries={[{ pathname: "/" }]}>
-              <App />
-            </MemoryRouter>
-          </ThemeProvider>
-        </CharacarterWrapper>,
+    test("it expect to have characters cards", async () => {
+      const mario = "Mario";
+      const donkeyKong = "Donkey Kong";
+      await waitFor(() =>
+        render(
+          <CharacarterWrapper>
+            <ThemeProvider theme={mainTheme}>
+              <MemoryRouter initialEntries={["/"]}>
+                <HomePage />
+              </MemoryRouter>
+            </ThemeProvider>
+          </CharacarterWrapper>,
+        ),
       );
 
-      const mainElement = screen.getByRole("main");
-      const headingElements = getAllByRole(mainElement, "heading");
+      const marioElement = screen.getByRole("heading", {
+        name: mario,
+      });
 
-      headingElements.forEach((element, position) => {
-        expect(expectedNames[position]).toBe(element.textContent);
+      const donkeyKongElement = screen.getByRole("heading", {
+        name: donkeyKong,
       });
+      expect(marioElement).toBeInTheDocument();
+      expect(donkeyKongElement).toBeInTheDocument();
     });
   });
 });

src/data/apiSmash.ts

@@ -3,9 +3,7 @@ import {
   CharacterStructureApi,
 } from "../features/characters/types";
 
-const apiUrl = import.meta.env.VITE_API_URL;
-
-export const characterStructureApiToCharacterStructure = ({
+export const characterApiToCharacter = ({
   id,
   name,
   availability,
@@ -27,9 +25,3 @@ export const characterStructureApiToCharacterStructure = ({
 
   return characterStructure;
 };
-
-export const getCharacters = async (): Promise<Response> => {
-  const response = await fetch(`${apiUrl}/characters`);
-
-  return response;
-};

src/hooks/useCharactersApi.ts

@@ -1,25 +1,24 @@
 import { useCallback, useContext } from "react";
-import {
-  characterStructureApiToCharacterStructure,
-  getCharacters,
-} from "../data/apiSmash";
+import { characterApiToCharacter } from "../data/apiSmash";
 import { CharacterStructureApi } from "../features/characters/types";
 import CharactersContext from "../features/characters/store/CharactersContext";
 
+const apiUrl = import.meta.env.VITE_API_URL;
+
 export const useCharactersApi = () => {
   const { loadCharacters } = useContext(CharactersContext);
 
-  const loadCharactersApi = useCallback(async () => {
-    const response = await getCharacters();
+  const getCharacter = useCallback(async () => {
+    const response = await fetch(`${apiUrl}/characters`);
 
     const charactersApi = (await response.json()) as CharacterStructureApi[];
 
-    const characters = charactersApi.map((characterApi) =>
-      characterStructureApiToCharacterStructure(characterApi),
+    loadCharacters(
+      charactersApi.map((characterApi) =>
+        characterApiToCharacter(characterApi),
+      ),
     );
-
-    loadCharacters(characters);
   }, [loadCharacters]);
 
-  return { loadCharactersApi };
+  return { loadCharactersApi: getCharacter };
 };