Fix CharactersWrapper react component naming

isdi-coders-2023 · Nov 3, 2023 · 09cefa8 · 09cefa8
1 parent cd26087
commit 09cefa8
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git a/src/components/App/App.test.tsx b/src/components/App/App.test.tsx
@@ -3,19 +3,19 @@ import mainTheme from "../../styles/mainTheme";
 import { ThemeProvider } from "styled-components";
 import { MemoryRouter } from "react-router-dom";
 import App from "./App";
-import CharacarterWrapper from "../../features/characters/store/CharactersWrapper";
+import CharactersWrapper from "../../features/characters/store/CharactersWrapper";
 
 describe("Given component App", () => {
   describe("When it is render", () => {
-    test("Then it should have go to HomePage", async () => {
+    test("Then it should go to HomePage", async () => {
       render(
-        <CharacarterWrapper>
+        <CharactersWrapper>
           <ThemeProvider theme={mainTheme}>
             <MemoryRouter initialEntries={["/"]}>
               <App />
             </MemoryRouter>
           </ThemeProvider>
-        </CharacarterWrapper>,
+        </CharactersWrapper>,
       );
 
       const headingElment = screen.getByRole("heading", {

diff --git a/src/components/CharacterCard/CharacterCard.test.tsx b/src/components/CharacterCard/CharacterCard.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import CharacarterWrapper from "../../features/characters/store/CharactersWrapper";
+import CharactersWrapper from "../../features/characters/store/CharactersWrapper";
 import { ThemeProvider } from "styled-components";
 import mainTheme from "../../styles/mainTheme";
 import { BrowserRouter } from "react-router-dom";
@@ -22,13 +22,13 @@ describe("Given the CharacterCardComponent", () => {
       };
 
       render(
-        <CharacarterWrapper>
+        <CharactersWrapper>
           <ThemeProvider theme={mainTheme}>
             <BrowserRouter>
               <CharacterCard character={marioInformation} />
             </BrowserRouter>
           </ThemeProvider>
-        </CharacarterWrapper>,
+        </CharactersWrapper>,
       );
 
       const name = screen.getByRole("heading") as HTMLHeadingElement;

diff --git a/src/components/CharacterList/CharaterList.test.tsx b/src/components/CharacterList/CharaterList.test.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from "styled-components";
 import mainTheme from "../../styles/mainTheme";
 import CharacterList from "./CharacterList";
 import { render, screen, waitFor } from "@testing-library/react";
-import CharacarterWrapper from "../../features/characters/store/CharactersWrapper";
+import CharactersWrapper from "../../features/characters/store/CharactersWrapper";
 import { MemoryRouter } from "react-router-dom";
 import HomePage from "../../pages/HomePage/HomePage";
 
@@ -13,11 +13,11 @@ describe("Given the component CharacterList", () => {
       const liTagName = "listitem";
 
       render(
-        <CharacarterWrapper>
+        <CharactersWrapper>
           <ThemeProvider theme={mainTheme}>
             <CharacterList />
           </ThemeProvider>
-        </CharacarterWrapper>,
+        </CharactersWrapper>,
       );
 
       const elementList = screen.queryByRole(ulTagName);
@@ -29,18 +29,18 @@ describe("Given the component CharacterList", () => {
   });
 
   describe("When we recive data of characters", () => {
-    test("it expect to have characters cards", async () => {
+    test("Then it should return Mario and Donkey Kong", async () => {
       const mario = "Mario";
       const donkeyKong = "Donkey Kong";
       await waitFor(() =>
         render(
-          <CharacarterWrapper>
+          <CharactersWrapper>
             <ThemeProvider theme={mainTheme}>
               <MemoryRouter initialEntries={["/"]}>
                 <HomePage />
               </MemoryRouter>
             </ThemeProvider>
-          </CharacarterWrapper>,
+          </CharactersWrapper>,
         ),
       );
 

diff --git a/src/features/characters/store/CharactersWrapper.tsx b/src/features/characters/store/CharactersWrapper.tsx
@@ -2,7 +2,7 @@ import { useMemo, useCallback, useState, PropsWithChildren } from "react";
 import { CharacterStructure } from "../types";
 import CharactersContext from "./CharactersContext";
 
-const CharacarterWrapper = ({ children }: PropsWithChildren) => {
+const CharactersWrapper = ({ children }: PropsWithChildren) => {
   const [characters, setCharacters] = useState<CharacterStructure[]>([]);
 
   const loadCharacters = useCallback((characters: CharacterStructure[]) => {
@@ -21,4 +21,4 @@ const CharacarterWrapper = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default CharacarterWrapper;
+export default CharactersWrapper;
diff --git a/src/main.tsx b/src/main.tsx
@@ -4,19 +4,19 @@ import App from "./components/App/App";
 import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 import mainTheme from "./styles/mainTheme";
-import CharacarterWrapper from "./features/characters/store/CharactersWrapper";
+import CharactersWrapper from "./features/characters/store/CharactersWrapper";
 import GlobalStyle from "./styles/GlobalStyle";
 import "@fontsource-variable/changa";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <CharacarterWrapper>
+    <CharactersWrapper>
       <ThemeProvider theme={mainTheme}>
         <BrowserRouter>
           <GlobalStyle />
           <App />
         </BrowserRouter>
       </ThemeProvider>
-    </CharacarterWrapper>
+    </CharactersWrapper>
   </React.StrictMode>,
 );
diff --git a/src/pages/HomePage/HomePage.test.tsx b/src/pages/HomePage/HomePage.test.tsx
@@ -2,7 +2,7 @@ import { ThemeProvider } from "styled-components";
 import HomePage from "./HomePage";
 import { screen, render } from "@testing-library/react";
 import mainTheme from "../../styles/mainTheme";
-import CharacarterWrapper from "../../features/characters/store/CharactersWrapper";
+import CharactersWrapper from "../../features/characters/store/CharactersWrapper";
 import { BrowserRouter } from "react-router-dom";
 
 describe("Given a HomePage component", () => {
@@ -11,13 +11,13 @@ describe("Given a HomePage component", () => {
       const expectedText = "Characters";
 
       render(
-        <CharacarterWrapper>
+        <CharactersWrapper>
           <BrowserRouter>
             <ThemeProvider theme={mainTheme}>
               <HomePage />
             </ThemeProvider>
           </BrowserRouter>
-        </CharacarterWrapper>,
+        </CharactersWrapper>,
       );
 
       const text = screen.getByRole("heading", { name: expectedText });