create and delete task testing

src/App.tsx

@@ -8,7 +8,7 @@ function App() {
       <CreateTask />
       <TodoList />
     </Container>
-  );
+);
 }
 
 export default App;

src/Components/CreateTask/CreateTask.tsx

@@ -27,7 +27,8 @@ const CreateTask = () => {
             onClick={addItem}
             type="submit"
             height="4.3rem"
-            name="add todo"
+            role="button"
+            name="createTask"
             width="4.3rem"
           >
             <AddIcon />

src/Components/Task/Task.tsx

@@ -1,4 +1,4 @@
-import { AddIcon, CheckIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
+import {  CheckIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons";
 import {
   Button,
   Card,
@@ -31,7 +31,7 @@ const Task: FC<Todo> = ({ id, text }) => {
             >
               <EditIcon boxSize={4} />
             </Button>
-            <Button onClick={() => deleteTodo(id)}>
+            <Button data-testid="delete-element" onClick={() => deleteTodo(id)}>
               <DeleteIcon color={"red"} boxSize={4} />
             </Button>
           </Flex>

src/__test__/create_task.test.tsx

@@ -1,3 +1,24 @@
-test("demo", () => {
-  expect(true).toBe(true);
+import "@testing-library/jest-dom";
+
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TodoProvider } from "../Context/TodoContext";
+import App from "../App";
+
+test("adds a new task to the list", () => {
+  render(
+    <TodoProvider>
+      <App />
+    </TodoProvider>
+  );
+
+  const inputElement = screen.getByPlaceholderText(/what need to do/i);
+
+  const addButton = screen.getByRole("button", { name: "" });
+
+  fireEvent.change(inputElement, { target: { value: "testTodo" } });
+
+  fireEvent.click(addButton);
+
+  const newTaskElement = screen.getByText("testTodo");
+  expect(newTaskElement).toBeInTheDocument();
 });

src/__test__/delete_task.test.tsx

@@ -0,0 +1,25 @@
+import "@testing-library/jest-dom";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { TodoProvider } from "../Context/TodoContext";
+import App from "../App";
+
+test("delete a task from the list", async () => {
+  render(
+    <TodoProvider>
+      <App />
+    </TodoProvider>
+  );
+  const inputElement = screen.getByPlaceholderText(/what need to do/i);
+
+  const addButton = screen.getByRole("button", { name: "" });
+  fireEvent.change(inputElement, { target: { value: "testTodo" } });
+
+  fireEvent.click(addButton);
+  const deleteButton = screen.getByTestId("delete-element");
+
+  fireEvent.click(deleteButton);
+
+  const deletedTaskElement = screen.queryByText(/testTodo/i);
+  expect(deletedTaskElement).toBeNull();
+});

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["@testing-library/jest-dom"],
     "esModuleInterop":true,
     "target": "ES2020",
     "useDefineForClassFields": true,