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();
+ await render();
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();
+ 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();
+ 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');
+ });
});