react-testing-library

src/App.js

@@ -1,4 +1,3 @@
-import logo from './logo.svg';
 import './App.css';
 import Banner from './components/Banner/Banner';
 import { Switch, Route } from "react-router-dom"
@@ -10,8 +9,8 @@ function App() {
     <div className="App">
       <Banner />
       <Switch>
-        <Route strict exact path="/" component={TodoPage}/>
-        <Route strict exact path="/followers" component={FollowersPage}/>
+        <Route strict exact path="/" component={TodoPage} />
+        <Route strict exact path="/followers" component={FollowersPage} />
       </Switch>
     </div>
   );

src/__mocks__/axios.js

@@ -0,0 +1,22 @@
+const mockResponse = {
+    data: {
+        results: [
+            {
+                name: {
+                    first: "Laith",
+                    last: "Harb"
+                },
+                picture: {
+                    large: "https://randomuser.me/api/portraits/men/39.jpg"
+                },
+                login: {
+                    username: "ThePhonyGOAT"
+                }
+            }
+        ]
+    }
+}
+
+export default {
+    get: jest.fn().mockResolvedValue(mockResponse)
+}

src/components/AddInput/AddInput.js

@@ -1,13 +1,12 @@
 import React, { useState } from 'react'
 import "./AddInput.css"
 import { v4 } from "uuid"
-import TodoList from '../TodoList/TodoList'
 
 function AddInput({
     setTodos, todos
 }) {
 
-    const [todo, setTodo] = useState("")
+    const [todo, setTodo] = useState("");
 
     const addTodo = () => {
         let updatedTodos = [
@@ -19,18 +18,18 @@ function AddInput({
             }
         ]
         setTodos(updatedTodos);
-        setTodo("")
+        setTodo("");
     }
 
     return (
         <div className="input-container">
-            <input 
-                className="input" 
-                value={todo} 
+            <input
+                className="input"
+                value={todo}
                 onChange={(e) => setTodo(e.target.value)}
                 placeholder="Add a new task here..."
             />
-            <button 
+            <button
                 className="add-btn"
                 onClick={addTodo}
             >

src/components/AddInput/__test__/AddInput.test.js

@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import AddInput from "../AddInput";
+
+const mockedSetTodo = jest.fn();
+
+describe("AddInput", () => {
+    it('should render input element', async () => {
+        render(
+            <AddInput
+                todos={[]}
+                setTodos={mockedSetTodo} />
+        );
+        const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
+        expect(inputElement).toBeInTheDocument();
+    });
+
+    it('should be able to type in input', async () => {
+        render(
+            <AddInput
+                todos={[]}
+                setTodos={mockedSetTodo} />
+        );
+        const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
+        fireEvent.change(inputElement, {
+            target: {
+                value: "Go Grocery Shopping"
+            }
+        });
+        expect(inputElement.value).toBe("Go Grocery Shopping");
+    });
+
+    it('should have empty input when add button is clicked', async () => {
+        render(
+            <AddInput
+                todos={[]}
+                setTodos={mockedSetTodo} />
+        );
+        const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
+        const buttonElement = screen.getByRole("button", { name: /Add/i });
+        fireEvent.change(inputElement, { target: { value: "Go Grocery Shopping" } });
+        fireEvent.click(buttonElement);
+        expect(inputElement.value).toBe("");
+    });
+});

src/components/Banner/Banner.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import "./Banner.css"
-import mountain from "../../assets/images/mountain.jpg"
 
 export default function Banner() {
     return (

src/components/FollowersList/FollowersList.js

@@ -12,16 +12,20 @@ export default function FollowersList() {
     }, []);
 
     const fetchFollowers = async () => {
-        const {data} = await axios.get("https://randomuser.me/api/?results=5")
-        setFollowers(data.results)
+        const { data } = await axios.get("https://randomuser.me/api/?results=5");
+        setFollowers(data.results);
     }
 
     return (
         <div className="followerslist-container">
             <div>
-                {followers.map(follower => (
-                    <div className="follower-item">
-                        <img src={follower.picture.large}/>
+                {followers.map((follower, index) => (
+                    <div
+                        className="follower-item"
+                        data-testid={`follower-item-${index}`}
+                        key={index}
+                    >
+                        <img src={follower.picture.large} alt="avatar_img" />
                         <div className="followers-details">
                             <div className="follower-item-name">
                                 <h4>{follower.name.first}</h4> <h4>{follower.name.last}</h4>

src/components/FollowersList/__test__/FollowersList.test.js

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import FollowersList from "../FollowersList";
+import { BrowserRouter } from "react-router-dom/cjs/react-router-dom.min";
+
+const MockFollowersList = () => {
+    return (
+        <BrowserRouter>
+            <FollowersList />
+        </BrowserRouter>
+    )
+};
+
+describe("FollowersList", () => {
+
+    beforeEach(() => {
+        console.log("RUNNING BY EACH TEST");
+    });
+
+    beforeAll(() => {
+        console.log("RUN ONCE BEFORE ALL TESTS");
+    });
+
+    afterEach(() => {
+        console.log("RUNNING AFTER TEST");
+    });
+
+    afterAll(() => {
+        console.log("RUN ONCE AFTER ALL TESTS");
+    });
+
+
+    it('should render follower items', async () => {
+        render(<MockFollowersList />);
+        const followerDivElement = await screen.findByTestId("follower-item-0");
+        expect(followerDivElement).toBeInTheDocument();
+    });
+
+    // it('should render multiple follower items', async () => {
+    //     render(<MockFollowersList />);
+    //     const followerDivElements = await screen.findAllByTestId(/follower-item/i);
+    //     expect(followerDivElements.length).toBe(5);
+    // });
+});

src/components/Header/Header.js

@@ -4,5 +4,10 @@ import "./Header.css"
 export default function Header({
     title
 }) {
-    return <h1 className="header">{title}</h1>
+    return (
+        <>
+            <h1 className="header" data-testid="header-1">{title}</h1>
+            {/* <h3 title="Header" className="header">Cats</h3> */}
+        </>
+    )
 }

src/components/Header/__test__/Header.test.js

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import Header from "../Header";
+
+describe("Header", () => {
+    it('should render same text passed into title prop', async () => {
+        render(<Header title="My Header" />);
+        const headingElement = screen.getByText(/my header/i);
+        expect(headingElement).toBeInTheDocument();
+    });
+});
+
+// // it('should render same text passed into title prop', async () => {
+// //     render(<Header title="My Header" />);
+// //     const headingElement = screen.getByRole("heading");
+// //     expect(headingElement).toBeInTheDocument();
+// // });
+
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = screen.getByRole("heading", { name: "My Header" });
+//     expect(headingElement).toBeInTheDocument();
+// });
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = screen.getByTitle("Header");
+//     expect(headingElement).toBeInTheDocument();
+// });
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = screen.getByTestId("header-1");
+//     expect(headingElement).toBeInTheDocument();
+// });
+
+// // FIND BY
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = await screen.findByText(/my header/i);
+//     expect(headingElement).toBeInTheDocument();
+// });
+
+// // QueryBY
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = screen.queryByText(/dogs/i);
+//     expect(headingElement).not.toBeInTheDocument();
+// });
+
+// // ALL
+
+// it('should render same text passed into title prop', async () => {
+//     render(<Header title="My Header" />);
+//     const headingElement = screen.getAllByRole("heading");
+//     expect(headingElement.length).toBe(2);
+// });

src/components/Todo/Todo.js

@@ -6,16 +6,16 @@ import "./Todo.css"
 
 function Todo() {
 
-    const [todos, setTodos] = useState([])
+    const [todos, setTodos] = useState([]);
 
     return (
         <div className="todo">
             <Header title="Todo" />
-            <AddInput 
+            <AddInput
                 setTodos={setTodos}
                 todos={todos}
             />
-            <TodoList 
+            <TodoList
                 todos={todos}
                 setTodos={setTodos}
             />

src/components/Todo/__test__/Todo.test.js

@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import Todo from "../Todo";
+import { BrowserRouter } from "react-router-dom/cjs/react-router-dom.min";
+
+const MockTodo = () => {
+    return (
+        <BrowserRouter>
+            <Todo />
+        </BrowserRouter>
+    )
+};
+
+const addTask = (tasks) => {
+    const inputElement = screen.getByPlaceholderText(/Add a new task here.../i);
+    const buttonElement = screen.getByRole("button", { name: /Add/i });
+    tasks.forEach(task => {
+        fireEvent.change(inputElement, { target: { value: task } });
+        fireEvent.click(buttonElement);
+    })
+}
+
+describe("Todo", () => {
+    it('should render same text passed into title prop', async () => {
+        render(<MockTodo />);
+        addTask(["Go Grocery Shopping"]);
+        const divElement = screen.getByText(/Go Grocery Shopping/i);
+        expect(divElement).toBeInTheDocument();
+    });
+
+    it('should render multiply items', async () => {
+        render(<MockTodo />);
+        addTask(["Go Grocery Shopping", "Pet my Cat", "Wash my Hands"]);
+        const divElement = screen.getAllByTestId("task-container");
+        expect(divElement.length).toBe(3);
+    });
+
+    it('task should not have completed class when initially rendered', async () => {
+        render(<MockTodo />);
+        addTask(["Go Grocery Shopping"]);
+        const divElement = screen.getByText(/Go Grocery Shopping/i);
+        expect(divElement).not.toHaveClass("todo-item-active");
+    });
+
+    it('task should have completed class when clicked', async () => {
+        render(<MockTodo />);
+        addTask(["Go Grocery Shopping"]);
+        const divElement = screen.getByText(/Go Grocery Shopping/i);
+        fireEvent.click(divElement);
+        expect(divElement).toHaveClass("todo-item-active");
+    });
+});

src/components/TodoFooter/TodoFooter.js

@@ -7,7 +7,7 @@ function TodoFooter({
 }) {
     return (
         <div className="todo-footer">
-            <p>{numberOfIncompleteTasks} {numberOfIncompleteTasks === 1 ? "task" : "tasks"} left</p>
+            <p data-testid="paragraph">{numberOfIncompleteTasks} {numberOfIncompleteTasks === 1 ? "task" : "tasks"} left</p>
             <Link to="/followers">Followers</Link>
         </div>
     )