Practice Session

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,13 @@
 import { render } 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>
+  );
 });

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,23 @@
+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"); // Implicit assertion
+    expect(doneButton).toBeInTheDocument(); // Explicit assertion
+  });
+  it("should render done 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 undone 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,50 @@
+import { screen } from "@testing-library/react";
+import axios from "axios";
+import { MemoryRouter, Navigate, Route, Routes } from "react-router";
+import { renderWithProviders } from "../../test-utils/mock";
+import TodoDetail from "./TodoDetail";
+
+const renderTodoDetail = () => {
+  renderWithProviders(
+    <MemoryRouter>
+      <Routes>
+        <Route path="/todo-detail/:id" element={<TodoDetail />} />
+        <Route path="*" element={<Navigate to={"/todo-detail/3"} />} />
+      </Routes>
+    </MemoryRouter>,
+    {
+      preloadedState: {
+        todo: {
+          todos: [
+            { id: 3, title: "TODO_TEST_TITLE_3", content: "TODO_TEST_CONTENT_3", done: false },
+          ],
+          selectedTodo: null,
+        },
+      },
+    }
+  );
+};
+
+describe("<TodoDetail />", () => {
+  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,
+        },
+      });
+    });
+    renderTodoDetail();
+    await screen.findByText("TODO_TEST_TITLE_3");
+    await screen.findByText("TODO_TEST_CONTENT_3");
+  });
+
+  it("should not render if there is no todo", async () => {
+    renderTodoDetail();
+    jest.spyOn(axios, "get").mockImplementationOnce(() => Promise.reject());
+    expect(screen.queryAllByText("TODO_TEST_TITLE_3")).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,78 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import axios from "axios";
+
+import NewTodo from "./NewTodo";
+import { renderWithProviders } from "../../../test-utils/mock";
+import * as todoSlice from "../../../store/slices/todo";
+
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  Navigate: (props: any) => {
+    mockNavigate(props.to);
+    return null;
+  },
+  useNavigate: () => mockNavigate,
+}));
+
+describe("<NewTodo />", () => {
+  it("should render without errors", () => {
+    renderWithProviders(<NewTodo />);
+    screen.getByText("Add a Todo");
+  });
+  it("should render title input", () => {
+    renderWithProviders(<NewTodo />);
+    screen.getByLabelText("Title");
+  });
+  it("should render content input", () => {
+    renderWithProviders(<NewTodo />);
+    screen.getByLabelText("Content");
+  });
+  it("should render submit button", () => {
+    renderWithProviders(<NewTodo />);
+    screen.getByText("Submit");
+  });
+  it("should render navigate to /todos when submitted", async () => {
+    jest.spyOn(axios, "post").mockResolvedValueOnce({
+      data: {
+        id: 1,
+        title: "TITLE",
+        content: "CONTENT",
+        done: false,
+      },
+    });
+    renderWithProviders(<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"));
+    renderWithProviders(<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,91 @@
+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";
+import { IProps as TodoProps } from "../../components/Todo/Todo";
+
+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];
+    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];
+    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];
+    const deleteButton = todo.querySelector(".deleteButton");
+    fireEvent.click(deleteButton!);
+    expect(mockDispatch).toHaveBeenCalled();
+  });
+});

src/store/slices/todo.test.tsx

@@ -0,0 +1,79 @@
+import { AnyAction, configureStore, EnhancedStore } from "@reduxjs/toolkit";
+import axios from "axios";
+import { ThunkMiddleware } from "redux-thunk";
+import reducer, { TodoState } from "./todo";
+import { fetchTodos, fetchTodo, postTodo, deleteTodo, toggleDone } from "./todo";
+describe("todo reducer", () => {
+  let store: EnhancedStore<
+    { todo: TodoState },
+    AnyAction,
+    [ThunkMiddleware<{ todo: TodoState }, AnyAction, undefined>]
+  >;
+  const fakeTodo = {
+    id: 1,
+    title: "test",
+    content: "test",
+    done: false,
+  };
+
+  beforeAll(() => {
+    store = configureStore({ reducer: { todo: reducer } });
+  });
+  it("should handle initial state", () => {
+    expect(reducer(undefined, { type: "unknown" })).toEqual({
+      todos: [],
+      selectedTodo: null,
+    });
+  });
+  it("should handle fetchTodos", async () => {
+    axios.get = jest.fn().mockResolvedValue({ data: [fakeTodo] });
+    await store.dispatch(fetchTodos());
+    expect(store.getState().todo.todos).toEqual([fakeTodo]);
+  });
+  it("should handle fetchTodo", async () => {
+    axios.get = jest.fn().mockResolvedValue({ data: fakeTodo });
+    await store.dispatch(fetchTodo(1));
+    expect(store.getState().todo.selectedTodo).toEqual(fakeTodo);
+  });
+  it("should handle deleteTodo", async () => {
+    axios.delete = jest.fn().mockResolvedValue({ data: null });
+    await store.dispatch(deleteTodo(1));
+    expect(store.getState().todo.todos).toEqual([]);
+  });
+  it("should handle postTodo", async () => {
+    jest.spyOn(axios, "post").mockResolvedValue({
+      data: fakeTodo,
+    });
+    await store.dispatch(postTodo({ title: "test", content: "test" }));
+    expect(store.getState().todo.todos).toEqual([fakeTodo]);
+  });
+  it("should handle toggleDone", async () => {
+    jest.spyOn(axios, "put").mockResolvedValue({
+      data: fakeTodo,
+    });
+    await store.dispatch(toggleDone(fakeTodo.id));
+    expect(store.getState().todo.todos.find((v) => v.id === fakeTodo.id)?.done).toEqual(true);
+  });
+  it("should handle error on postTodo", async () => {
+    const mockConsoleError = jest.fn();
+    console.error = mockConsoleError;
+    jest.spyOn(axios, "post").mockRejectedValue({
+      response: { data: { title: ["error"] } },
+    });
+    await store.dispatch(postTodo({ title: "test", content: "test" }));
+    expect(mockConsoleError).toBeCalled();
+  });
+  it("should handle null on fetchTodo", async () => {
+    axios.get = jest.fn().mockResolvedValue({ data: null });
+    await store.dispatch(fetchTodo(1));
+    expect(store.getState().todo.selectedTodo).toEqual(null);
+  });
+  it("should handle not existing todo toggle", async () => {
+    const beforeState = store.getState().todo;
+    jest.spyOn(axios, "put").mockResolvedValue({
+      data: { ...fakeTodo, id: 10 },
+    });
+    await store.dispatch(toggleDone(2));
+    expect(store.getState().todo).toEqual(beforeState);
+  });
+});

src/store/slices/todo.ts

@@ -60,11 +60,6 @@ export const todoSlice = createSlice({
   name: "todo",
   initialState,
   reducers: {
-    getAll: (state, action: PayloadAction<{ todos: TodoType[] }>) => {},
-    getTodo: (state, action: PayloadAction<{ targetId: number }>) => {
-      const target = state.todos.find((td) => td.id === action.payload.targetId);
-      state.selectedTodo = target ?? null;
-    },
     toggleDone: (state, action: PayloadAction<{ targetId: number }>) => {
       const todo = state.todos.find((value) => value.id === action.payload.targetId);
       if (todo) {