Practice 05 _ 221005

package.json

@@ -46,5 +46,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/index.tsx",
+      "!src/test-utils/*"
+    ]
   }
 }

src/App.test.tsx

@@ -1,7 +1,11 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
 
 import App from "./App";
+import { store } from "./store";
 
-test("renders learn react link", () => {
-  render(<App />);
+test("renders App.tsx", () => {
+  render(<Provider store={store}><App /></Provider>);
+  // screen.debug();ww
+  expect(true).toBe(true);
 });

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+
+import Todo from "./Todo";
+
+
+describe("<Todo />", () => {
+    it("should render without errors", ()=>{
+        render(<Todo title={"TODO_TITLE"} done={false} />);
+        screen.getByText("TODO_TITLE");
+        const doneButton = screen.getByText("Done");
+        expect(doneButton).toBeInTheDocument();
+    });
+    it("should render undone mark when done is true", () => {
+        render(<Todo title={"TODO_TITLE"} done={true} />);
+        const title = screen.getByText("TODO_TITLE");
+        expect(title.classList.contains("done")).toBe(true);
+        screen.getByText("Undone");
+      });
+      it("should render done mark when done is false", () => {
+        render(<Todo title={"TODO_TITLE"} done={false} />);
+        const title = screen.getByText("TODO_TITLE");
+        expect(title.classList.contains("done")).toBe(false);
+        screen.getByText("Done");
+     });
+});

src/components/TodoDetail/TodoDetail.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes, Navigate } from "react-router";
+import { TodoState } from "../../store/slices/todo";
+import { getMockStore } from "../../test-utils/mocks";
+import TodoDetail from "./TodoDetail";
+import axios from "axios";
+
+const stubInitialState: TodoState = {
+    todos: [
+      { id: 3, title: "TODO_TEST_TITLE_3", content: "TODO_TEST_CONTENT_3", done: false },
+   ],
+    selectedTodo: null,
+};
+
+// const c = getMockStore({ todo: stubInitialState });
+
+describe("<TodoDetail />", () => {
+    let todoDetail: JSX.Element;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        todoDetail = (
+            <Provider store={getMockStore({ todo: stubInitialState })}>
+             {/* <Provider store={c}> */}
+                <MemoryRouter>
+                <Routes>
+                    <Route path="/todo-detail/:id" element={<TodoDetail />} />
+                    <Route path="*" element={<Navigate to={"/todo-detail/3"} />} />
+                </Routes>
+                </MemoryRouter>
+            </Provider>
+        );
+    });
+    it("should render TodoDetail", () => {
+        const { container } = render(todoDetail);
+        expect(container).toBeTruthy();
+    });
+    it("should render w/o errors", async () => {
+        jest.spyOn(axios, "get").mockImplementation(() => {
+            return Promise.resolve({
+              data: {
+                id: 3,
+                title: "TODO_TEST_TITLE_3",
+                content: "TODO_TEST_CONTENT_3",
+                done: false,
+              },
+            });
+          });
+        render(todoDetail);
+        await screen.findByText("TODO_TEST_TITLE_3");
+        await screen.findByText("TODO_TEST_CONTENT_3");
+    });
+    it("should not render if empty", async () => {
+        jest.spyOn(axios, "get").mockImplementation(() => Promise.reject());
+        render(todoDetail);
+        expect(screen.queryAllByText("TODO_TEST_TITLE_3")).toHaveLength(0);
+        expect(screen.queryAllByText("TODO_TEST_CONTENT_3")).toHaveLength(0);
+    });
+});

src/containers/TodoList/NewTodo/NewTodo.test.tsx

@@ -0,0 +1,89 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes, Navigate } from "react-router";
+import * as todoSlice  from "../../../store/slices/todo";
+import { getMockStore } from "../../../test-utils/mocks";
+import NewTodo from "./NewTodo";
+import axios from "axios";
+
+const stubInitialState: todoSlice.TodoState = {
+    todos: [
+      { id: 3, title: "TODO_TEST_TITLE_3", content: "TODO_TEST_CONTENT_3", done: false },
+   ],
+    selectedTodo: null,
+};
+
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Navigate: (props: any) => {
+    mockNavigate(props.to);
+    return null;
+  },
+  useNavigate: () => mockNavigate,
+}));
+
+describe("<NewTodo />", () => {
+    let newTodo: JSX.Element;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        newTodo = (
+            <Provider store={getMockStore({ todo: stubInitialState })}>
+             {/* <Provider store={c}> */}
+                <MemoryRouter>
+                <Routes>
+                    <Route path="/" element={<NewTodo />} />
+                    <Route path="*" element={<Navigate to={"/"} />} />
+                </Routes>
+                </MemoryRouter>
+            </Provider>
+        );
+    });
+    it("should render newTodo", () => {
+        const { container } = render(newTodo);
+        expect(container).toBeTruthy();
+    });
+    it("should render navigate to /todos when submitted", async () => {
+        jest.spyOn(axios, "post").mockResolvedValueOnce({
+          data: {
+            id: 1,
+            title: "TITLE",
+            content: "CONTENT",
+            done: false,
+          },
+        });
+        render(newTodo);
+        const titleInput = screen.getByLabelText("Title");
+        const contentInput = screen.getByLabelText("Content");
+        const submitButton = screen.getByText("Submit");
+        fireEvent.change(titleInput, { target: { value: "TITLE" } });
+        fireEvent.change(contentInput, { target: { value: "CONTENT" } });
+        await screen.findByDisplayValue("TITLE");
+        await screen.findByDisplayValue("CONTENT");
+        fireEvent.click(submitButton);
+        await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith("/todos"));
+      });
+      it("should alert error when submitted", async () => {
+        const mockPostTodo = jest.spyOn(todoSlice, "postTodo");
+        window.alert = jest.fn();
+        console.error = jest.fn();
+        jest.spyOn(axios, "post").mockRejectedValueOnce(new Error("ERROR"));
+        render(newTodo);
+        const titleInput = screen.getByLabelText("Title");
+        const contentInput = screen.getByLabelText("Content");
+        const submitButton = screen.getByText("Submit");
+        fireEvent.change(titleInput, { target: { value: "TITLE" } });
+        fireEvent.change(contentInput, { target: { value: "CONTENT" } });
+
+        await screen.findByDisplayValue("TITLE");
+        await screen.findByDisplayValue("CONTENT");
+        fireEvent.click(submitButton);
+
+        expect(mockPostTodo).toHaveBeenCalledWith({
+          title: "TITLE",
+          content: "CONTENT",
+        });
+        await waitFor(() => expect(mockNavigate).not.toHaveBeenCalled());
+        await waitFor(() => expect(window.alert).toHaveBeenCalledWith("Error on post Todo"));
+      });
+});

src/containers/TodoList/NewTodo/NewTodo.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { useDispatch } from "react-redux";
 import { Navigate } from "react-router-dom";
-// import { useNavigate } from "react-router-dom";
 import { AppDispatch } from "../../../store";
 import { postTodo } from "../../../store/slices/todo";
 import "./NewTodo.css";
@@ -12,14 +11,6 @@ export default function NewTodo() {
   const [submitted, setSubmitted] = useState<boolean>(false);
   const dispatch = useDispatch<AppDispatch>();
 
-  // const navigate = useNavigate()
-  // const postTodoHandler = () => {
-  //   const data = { title: title, content: content };
-  //   alert("Submitted\n" + data.title + "\n" + data.content);
-  //   setSubmitted(true);
-  //   navigate('/todos')
-  // };
-
   const postTodoHandler = async () => {
     const data = { title: title, content: content };
     const result = await dispatch(postTodo(data));

src/containers/TodoList/TodoList.test.tsx

@@ -0,0 +1,94 @@
+import { IProps as TodoProps } from "../../components/Todo/Todo";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { TodoState } from "../../store/slices/todo";
+import { getMockStore } from "../../test-utils/mocks";
+import TodoList from "./TodoList";
+
+
+jest.mock("../../components/Todo/Todo", () => (props: TodoProps) => (
+    <div data-testid="spyTodo">
+        <div className="title" onClick={props.clickDetail}>
+            {props.title}
+        </div>
+        <button className="doneButton" onClick={props.clickDone}>done</button>
+        <button className="deleteButton" onClick={props.clickDelete}>delete</button>
+    </div>
+));
+
+const stubInitialState: TodoState = {
+    todos: [
+      { id: 1, title: "TODO_TEST_TITLE_1", content: "TODO_TEST_CONTENT_1", done: false },
+      { id: 2, title: "TODO_TEST_TITLE_2", content: "TODO_TEST_CONTENT_2", done: false },
+      { id: 3, title: "TODO_TEST_TITLE_3", content: "TODO_TEST_CONTENT_3", done: false },
+   ],
+    selectedTodo: null,
+};
+
+const mockStore = getMockStore({ todo: stubInitialState });
+
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"), // Other stuffs are still alive.
+    useNavigate: () => mockNavigate,
+}));
+
+const mockDispatch = jest.fn();
+jest.mock("react-redux", () => ({
+    ...jest.requireActual("react-redux"),
+    useDispatch: () => mockDispatch,
+}));
+
+describe("<TodoList />", () => {
+    let todoList: JSX.Element;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        todoList = (
+        <Provider store={mockStore}>
+            <MemoryRouter>
+            <Routes>
+                <Route path="/" element={<TodoList title="TODOLIST_TEST_TITLE" />} />
+            </Routes>
+            </MemoryRouter>
+        </Provider>
+        );
+    });
+    it("should render TodoList", () => {
+        const { container } = render(todoList);
+        expect(container).toBeTruthy();
+    });
+    it("should render todos", () => {
+        render(todoList);
+        const todos = screen.getAllByTestId("spyTodo");
+        expect(todos).toHaveLength(3);
+    });
+    it("should handle clickDetail", () => {
+        render(todoList);
+        const todos = screen.getAllByTestId("spyTodo");
+        const todo = todos[0];
+        // eslint-disable-next-line testing-library/no-node-access
+        const title = todo.querySelector(".title");
+        fireEvent.click(title!);
+        expect(mockNavigate).toHaveBeenCalledTimes(1);
+    });
+    it("should handle clickDone", () => {
+        render(todoList);
+        const todos = screen.getAllByTestId("spyTodo");
+        const todo = todos[0];
+        // eslint-disable-next-line testing-library/no-node-access
+        const doneButton = todo.querySelector(".doneButton");
+        fireEvent.click(doneButton!);
+        expect(mockDispatch).toHaveBeenCalled();
+    });
+    it("should handle clickDelete", () => {
+        render(todoList);
+        const todos = screen.getAllByTestId("spyTodo");
+        const todo = todos[0];
+        // eslint-disable-next-line testing-library/no-node-access
+        const deleteButton = todo.querySelector(".deleteButton");
+        fireEvent.click(deleteButton!);
+        expect(mockDispatch).toHaveBeenCalled();
+    });
+});