From 92d8f9452c9825436b88b9dca053e1daa8c10f59 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 20 Jan 2024 09:42:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20chore(deps-dev):=20add=20dependency?=
 =?UTF-8?q?=20@testing-library/user-event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 14 +++++++++++++
 package.json      |  1 +
 src/App.test.tsx  | 52 +++++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 934e703..c29ae47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.2",
         "@types/react": "^18.2.43",
         "@types/react-dom": "^18.2.17",
         "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -1245,6 +1246,19 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
diff --git a/package.json b/package.json
index b769421..05cb6bc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 25aeb51..f0a23cc 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,18 +1,62 @@
 // Imports
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent  from '@testing-library/user-event';
 
 // To Test
 import App from './App';
 
 // Tests
 describe('Renders main page correctly', async () => {
+    /**
+     * Resets all renders after each test
+     */
+    afterEach(() => {
+        cleanup();
+    });
+
+    /**
+     * Passes - shows title correctly
+     */
     it('Should render the page correctly', async () => {
         // Setup
-        render(<App />);
+        await render(<App />);
         const h1 = await screen.queryByText('Vite + React');
 
-        // Expectations
+        // Post Expectations
         expect(h1).not.toBeNull();
     });
+
+    /**
+     * Passes - shows the button count correctly present
+     */
+    it('Should show the button count set to 0', async () => {
+        // Setup
+        await render(<App />);
+        const button = await screen.queryByText('count is 0');
+
+        // Expectations
+        expect(button).not.toBeNull();
+    });
+
+    /**
+     * Passes - clicks the button 3 times and shows the correct count
+     */
+    it('Should show the button count set to 3', async () => {
+        // Setup
+        const user = userEvent.setup();
+        await render(<App />);
+        const button = await screen.queryByText('count is 0');
+
+        // Pre Expectations
+        expect(button).not.toBeNull();
+
+        // Actions
+        await user.click(button as HTMLElement);
+        await user.click(button as HTMLElement);
+        await user.click(button as HTMLElement);
+
+        // Post Expectations
+        expect(button?.innerHTML).toBe('count is 3');
+    });
 });