finished writing test to add new todo using cypress

core/db

@@ -24,5 +24,6 @@
       "content": "alo alo w brazil",
       "done": false
     }
-  ]
+  ],
+  "dogs": []
 }

cypress/e2e/todo-feed.cy.ts

@@ -1,5 +1,39 @@
-describe("Todos feed", () => {
+const BASE_URL = "http://localhost:3000";
+
+describe("/ - Todos feed", () => {
     it("renders the page after loading", () => {
-        cy.visit("http://localhost:3000/")
+        cy.visit(BASE_URL)
+    })
+
+    it.only("creates a new todo after the user submits the form", () => {
+        // 0 - Intercept backend calls
+        cy.intercept("POST", `${BASE_URL}/api/todos`, (request) => {
+            request.reply({
+                statusCode: 201,
+                body: {
+                    todo: {
+                    "id": "04acb1b4-fc0b-44c9-822c-ea84efa31429",
+                    "date": "2024-06-02T16:40:41.761Z",
+                    "content": "Test todo",
+                    "done": false
+                    }
+                }
+            })
+        }).as("createTodo")
+
+        // 1 - Visit the page
+        cy.visit(BASE_URL);
+
+        // 2 - Select input and type a new todo
+        // const $inputAddTodo = cy.get("header > form > input"); Getting by cypress identifier
+        const $inputAddTodo = cy.get("input[name='Add todo']") 
+        $inputAddTodo.type("Test todo");
+
+        // 3 - Click on the submit button
+        const $btnAddTodo = cy.get("button[aria-label='Adicionar novo item']")
+        $btnAddTodo.click();
+
+        // 4 - Test if a new todo appeared on the screen
+        cy.get('tbody').contains("Test todo");
     })
 });

package.json

@@ -11,7 +11,7 @@
     "lint:fix": "npm run lint -- --fix",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
-    "test": "start-server-and-test dev http://localhost:3001 cy:run"
+    "test": "start-server-and-test dev http://localhost:3000 cy:run"
   },
   "author": "",
   "license": "ISC",

pages/index.tsx

@@ -73,6 +73,7 @@ function HomePage() {
                     });
                 }}>
                     <input 
+                        name="Add todo"
                         type="text" 
                         placeholder="Correr, Estudar..."
                         value = {newTodoContent}