Week5 practice

src/App.test.tsx

@@ -1,7 +1,11 @@
-import { render } from "@testing-library/react";
+import { screen,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>);
+//   screen.debug();
+  expect(true).toBe(true);
 });

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import Todo from "./Todo";
+describe("<Todo />", () => {
+ 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,37 @@
+import { 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 TodoDetail from "./TodoDetail"
+
+const stubInitialState: TodoState = {
+  todos:[
+    { id: 1, title: "TODO_TEST_TITLE_1", content: "TODO_TEST_CONTENT_1", done: false },
+  ],
+  selectedTodo: { id: 1, title: "TODO_TEST_TITLE_1", content: "TODO_TEST_CONTENT_1", done: false }
+}
+
+const mockStore = getMockStore({ todo: stubInitialState });
+
+
+describe("<TodoDetail/>", () => {
+  let todoDetail: JSX.Element;
+  todoDetail = (
+      <Provider store={mockStore}>
+        <MemoryRouter>
+            <Routes>
+              <Route path="/" element={<TodoDetail/>} />
+            </Routes>
+        </MemoryRouter>
+      </Provider>
+  );
+
+  it("should render correctly", () => {
+    render(todoDetail);
+    const title = screen.getByText("TODO_TEST_TITLE_1");
+    const content = screen.getByText("TODO_TEST_CONTENT_1");
+    expect(title.classList.contains("right")).toBe(true);
+    expect(content.classList.contains("right")).toBe(true);
+  })
+})

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

@@ -0,0 +1,83 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import axios from "axios";
+import { Provider, useDispatch } from "react-redux";
+import { TodoState } from "../../../store/slices/todo";
+import { getMockStore } from "../../../test-utils/mock";
+import NewTodo from "./NewTodo"
+
+const mockNavigate = jest.fn();
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"),
+    Navigate: (props: any) => {
+        mockNavigate(props.to);
+    },
+}));
+
+
+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 });
+
+describe("<NewTodo/>", () => {
+
+    beforeEach(() => { jest.clearAllMocks() });
+
+    it("should render NewTodo", () => {
+        render(<Provider store={mockStore}><NewTodo/></Provider>);
+
+        const mockDispatch = jest.fn();
+        jest.mock('react-redux', () => ({
+            ...jest.requireActual("react-redux"),
+            useDispatch: () => mockDispatch
+        }));
+
+        const button = screen.getAllByRole("button");
+        const textboxes = screen.getAllByRole("textbox");
+        expect(button).toHaveLength(1);
+        expect(textboxes).toHaveLength(2);
+    })
+
+    it("should handle postTodo", async () => {
+        render(<Provider store={mockStore}><NewTodo/></Provider>);
+
+        jest.spyOn(axios, "post").mockResolvedValueOnce({
+            data: {
+              id: 1,
+              title: "TITLE",
+              content: "CONTENT",
+              done: false,
+            },
+        });
+
+        const button = screen.getAllByRole("button");
+        const textboxes = screen.getAllByRole("textbox");
+        fireEvent.change(textboxes[0], { target: {value: "NEW_TODO_TITLE"}});
+        fireEvent.change(textboxes[1], { target: {value: "NEW_TODO_CONTENT"}});
+        fireEvent.click(button[0]);
+        await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith("/todos"));
+    })
+
+    it("should handle postTodo error",async () => {
+        const mockAlert = jest.fn();
+        window.alert = mockAlert;
+        const mockConsoleError = jest.fn();
+        console.error = mockConsoleError;
+        jest.spyOn(axios, "post").mockRejectedValueOnce(new Error("ERROR"));
+
+        render(<Provider store={mockStore}><NewTodo/></Provider>);
+        const button = screen.getAllByRole("button");
+        const textboxes = screen.getAllByRole("textbox");
+        fireEvent.change(textboxes[0], { target: {value: "NEW_TODO_TITLE"}});
+        fireEvent.change(textboxes[1], { target: {value: "NEW_TODO_CONTENT"}});
+        fireEvent.click(button[0]);
+        await waitFor(() => expect(mockAlert).toHaveBeenCalledWith("Error on post Todo"));
+        await waitFor(() => expect(mockConsoleError).toHaveBeenCalled());
+    })
+})

src/containers/TodoList/TodoList.test.tsx

@@ -0,0 +1,97 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { IProps as TodoProps } from "../../components/Todo/Todo";
+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];
+        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.ts

@@ -0,0 +1,90 @@
+import { AnyAction, configureStore, EnhancedStore } from "@reduxjs/toolkit"
+import axios from "axios";
+import { ThunkMiddleware } from "redux-thunk"
+import reducer, { deleteTodo, fetchTodo, fetchTodos, postTodo, TodoState, 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}});
+    });
+
+    afterEach(() => { jest.clearAllMocks() });
+
+    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").mockResolvedValue({
+            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) {

src/test-utils/mock.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,
+        });
+    };