Run E2E tests on GitHub Actions

.github/workflows/clientBuildAndDeploy.yml

@@ -1,11 +1,17 @@
-name: Client build and deploy
+# name: Client build and deploy
 
+# on:
+#   push:
+#     branches:
+#       - main
+#     paths:
+#       - "client/**"
+
+name: Run e2e tests
 on:
-  push:
+  pull_request:
     branches:
       - main
-    paths:
-      - "client/**"
 
 jobs:
   deploy:
@@ -17,19 +23,31 @@ jobs:
     steps:
       - name: Code checkout
         uses: actions/checkout@v3
+
+        # Sets up a specific version of Node.js for use in the workflow
       - name: Install NodeJS
         uses: actions/setup-node@v3
         with:
           node-version: 20.x
+        # Installs your project dependencies using npm ci
       - name: Install dependencies
         run: npm ci
+
+        # Builds your application using your package.json's build script
       - name: Build app
         run: npm run build
-      - name: Deploy
-        run: | 
-          cd build 
-          aws s3 sync . s3://perntodo
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_DEFAULT_REGION: us-east-1
+
+        # Run E2E tests
+      - name: Run E2E tests
+        run: npx playwright test
+        working-directory: ../server
+
+        # Deploys your application to AWS S3
+      # - name: Deploy
+      #   run: |
+      #     cd build
+      #     aws s3 sync . s3://perntodo
+      #   env:
+      #     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      #     AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      #     AWS_DEFAULT_REGION: us-east-1

client/src/components/ListTodos.jsx

@@ -34,6 +34,7 @@ const ListTodos = ({ todos, deleteTodo, onUpdateTodo }) => {
               <td>
                 <button
                   className="btn btn-danger"
+                  id="deleteBtn"
                   onClick={() => deleteTodo(todo.id)}
                 >
                   Delete

server/src/tests/end-to-end/pern-todo-app.end.spec.js

@@ -7,20 +7,24 @@ test.beforeEach(async ({ page }) => {
 test.describe("PERN Todo App", () => {
   test("should add a todo", async ({ page }) => {
     await page.fill("#todoInput", "Test Todo");
-    await page.pause();
     await page.click("#addTodoBtn");
     await expect(page.getByTestId("todo-description")).toHaveText("Test Todo", {
       timeout: 5000,
     });
   });
 
   test("should edit a todo", async ({ page }) => {
-    await page.pause();
     await page.click("#editBtn");
     await page.fill(".modal-body input", "Updated Test Todo");
     await page.click("#editDoneBtn");
     await expect(page.getByTestId("todo-description")).toHaveText(
       "Updated Test Todo"
     );
   });
+
+  test("should delete a todo", async ({ page }) => {
+    await page.pause();
+    await page.click("#deleteBtn");
+    await expect(page.getByTestId("todo-description")).toHaveCount(0);
+  });
 });