Practice 5

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,14 @@
-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>
+  );
+  // eslint-disable-next-line testing-library/no-debugging-utils
+  // screen.debug();
+  // expect(true).toBe(false);
 });

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,24 @@
+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"); // Implicit assertion
+    const doneButton = screen.getByText("Done");
+    expect(doneButton).toBeInTheDocument();
+  });
+
+  it("should render done mark when done is true", ()=>{
+    render(<Todo title={"TODO_TITLE"} done={true} />);
+    const title = screen.getByText("TODO_TITLE"); // Implicit assertion
+    expect(title.classList.contains("done")).toBe(true);
+    screen.getByText("Undone");
+  })
+  it("should render undone mark when done is false", ()=>{
+    render(<Todo title={"TODO_TITLE"} done={false} />);
+    const title = screen.getByText("TODO_TITLE"); // Implicit assertion
+    expect(title.classList.contains("done")).toBe(false);
+    screen.getByText("Done");
+  })
+})

src/components/TodoDetail/TodoDetail.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getMockStore } from "../../test-utils/mock";
+import { TodoState } from "../../store/slices/todo";
+import axios from "axios";
+import TodoDetail from "./TodoDetail";
+
+const stubInitialState: TodoState = {
+  todos: [
+    { id: 3, title: "TODO_TEST_TITLE_3", content: "TODO_TEST_CONTENT_3", done: false },
+  ],
+  selectedTodo: null,
+};
+const mockStore = getMockStore({ todo: stubInitialState });
+
+describe("<TodoDetail />", () => {
+  let todoDetail: JSX.Element;
+
+  beforeEach(()=>{
+    jest.clearAllMocks();
+    todoDetail = (
+      <Provider store={mockStore}>
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<TodoDetail/>}/>
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    )
+  });
+
+  it("should not render if there is no todo", async () => {
+    render(todoDetail);
+    jest.spyOn(axios, "get").mockImplementationOnce(() => Promise.reject());
+    expect(screen.queryAllByText("TODO_TEST_TITLE_3")).toHaveLength(0);
+  });
+
+  it("should render without 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");
+  });
+
+});

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

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { getMockStore } from "../../../test-utils/mock";
+import { TodoState } from "../../../store/slices/todo";
+import axios from "axios";
+import NewTodo from "./NewTodo";
+import * as todoSlice from "../../../store/slices/todo";
+
+const stubInitialState: TodoState = {
+  todos: [
+    {id: 1, title: "TODO_TEST_TITLE_1", content: "TODO_TEST_CONTENT_1", done: false},
+  ],
+  selectedTodo: null,
+};
+const mockStore = getMockStore({ todo: stubInitialState });
+
+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={mockStore}>
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<NewTodo/>}/>
+          </Routes>
+        </MemoryRouter>
+      </Provider>
+    )
+  });
+  afterEach(() => { jest.clearAllMocks() });
+
+  it("should render NewTodo", ()=>{
+    const {container} = render(newTodo);
+    expect(container).toBeTruthy();
+  });
+  it("should render title", ()=>{
+    render(newTodo);
+    screen.getByText("Add a Todo");
+  });
+  it("should render title input", ()=>{
+    render(newTodo);
+    screen.getByLabelText("Title");
+  });
+  it("should render content input", ()=>{
+    render(newTodo);
+    screen.getByLabelText("Content");
+  });
+  it("should render submit button", ()=>{
+    render(newTodo);
+    screen.getByText("Submit");
+  });
+  it("should navigate to /todos when new todo submitted", async ()=>{
+    jest.spyOn(axios, "post").mockResolvedValueOnce({
+      data: {
+        id: 1,
+        title: "TITLE",
+        content: "CONTENT",
+        done: false,
+      }
+    });
+    render(newTodo);
+    const title = screen.getByLabelText("Title");
+    const content = screen.getByLabelText("Content");
+    const submit = screen.getByText("Submit");
+
+    fireEvent.change(title, {target: {value: "TITLE"}});
+    fireEvent.change(content, {target: {value: "CONTENT"}});
+
+    await screen.findByDisplayValue("TITLE");
+    await screen.findByDisplayValue("CONTENT");
+
+    fireEvent.click(submit);
+    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/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/mock";
+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"),
+  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();
+  });
+})