GiveUp

.bash_history

@@ -0,0 +1,7 @@
+yarn 
+yarn test --watchAll
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+screen.debug() yarn test --coverage --watchAll=false

package.json

@@ -35,6 +35,13 @@
       "react-app/jest"
     ]
   },
+  "jest":{
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/index.tsx",
+      "!src/test-utils/*"
+      ]     
+  },
   "browserslist": {
     "production": [
       ">0.2%",

src/App.test.tsx

@@ -1,7 +1,13 @@
-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();
+  expect(true).toBe(true) // This make failing test case
+  });

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,23 @@
+// src/components/Todo/Todo.test.tsx
+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,26 @@
+import {
+    AnyAction,
+    configureStore,
+    EnhancedStore
+   } from "@reduxjs/toolkit";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { AppDispatch } from "../../store";
+import { selectTodo, fetchTodo } from "../../store/slices/todo";
+import axios from "axios";
+import { TodoState } from "../../store/slices/todo";
+import { getMockStore } from "../../test-utils/mocks";
+
+const fakeid = {number:0};
+
+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 });

src/containers/TodoList/TodoList.test.tsx

@@ -0,0 +1,92 @@
+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";
+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];
+        // 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();
+    });
+
+    });

src/store/slices/todo.test.ts

@@ -0,0 +1,104 @@
+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 } }
+     );
+     }); // end beforeAll
+     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)
+        });
+    }); // end describe   

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) {

src/test-utils/mocks.ts

@@ -0,0 +1,9 @@
+import { configureStore, PreloadedState } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+import todoReducer from "../store/slices/todo";
+export const getMockStore = (preloadedState?: PreloadedState<RootState>) => {
+return configureStore({
+ reducer: { todo: todoReducer },
+ preloadedState,
+ });
+};