Practice 5

.bash_history

@@ -0,0 +1,34 @@
+cleae
+clear
+ls
+yarn test
+vi package.json
+clear
+exit
+yarn add @testing-library/react
+clear
+yarn test --watchAll
+yarn add "@testing-library/react"
+yarn
+clear
+yarn test
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+clear
+yarn test --coverage --watchAll=false
+clear
+yarn test --coverage --watchAll=fals
+git add .
+git commit -m "1"
+clear
+yarn test --coverage --watchAll=fals
+clear
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+yarn test --coverage --watchAll=false
+exit

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.8.5",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.5.2",
     "@types/node": "16.11.56",
@@ -46,5 +46,11 @@
       "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";
-
-test("renders learn react link", () => {
-  render(<App />);
-});
+import { store } from "./store";
+test("renders App.tsx", () => {
+ render(
+   <Provider store={store}><App /></Provider>
+ );
+//  screen.debug();
+  // expect(true).toBe(false)  // This make failing test case
+});

src/components/Todo/Todo.test.tsx

@@ -0,0 +1,25 @@
+ // 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,27 @@
+import { render, screen } from "@testing-library/react";
+import axios from "axios";
+import { Provider } from "react-redux";
+import { store } from "../../store";
+import { fetchTodo, fetchTodos } from "../../store/slices/todo";
+import TodoDetail from "./TodoDetail";
+
+describe("<TodoDetail />", () => {
+    it("should render without errors", () => {
+        render(
+            <Provider store={store}>
+                <TodoDetail />
+            </Provider>
+        );
+        screen.getByText("Name:");
+        screen.getByText("Content:");
+    });
+
+    const fakeTodo = {
+        id: 1, title: "test", content: "test", done: false
+    };
+    it("should handle fetchTodo", async () => {
+        axios.get = jest.fn().mockResolvedValue({ data: fakeTodo });
+        await store.dispatch(fetchTodo(1));
+        expect(store.getState().todo.selectedTodo).toEqual(fakeTodo); 
+    });
+})

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

@@ -0,0 +1,103 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import axios from "axios";
+
+import NewTodo from "./NewTodo";
+import * as todoSlice from "../../../store/slices/todo";
+import { store } from "../../../store";
+import { Provider } from "react-redux";
+
+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", () => {
+    render(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    screen.getByText("Add a Todo");
+  });
+  it("should render title input", () => {
+    render(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    screen.getByLabelText("Title");
+  });
+  it("should render content input", () => {
+    render(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    screen.getByLabelText("Content");
+  });
+  it("should render submit button", () => {
+    render(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    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,
+      },
+    });
+    render(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    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(
+        <Provider store={store}>
+            <NewTodo />
+        </Provider>
+    );
+    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/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"),
+    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();
+      });
+});