From b85019a622e2e8877c7dc3bb762e48c067f3114f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kysel=C3=A1k?= <martin@kyselak.name>
Date: Wed, 3 Jan 2024 20:07:17 +0000
Subject: [PATCH] test: add WalletPage tests

Finishes tests for App, adds first tests fro Walletpage, fixes key for wallet transactions.
---
 package-lock.json        | 13 +++++-------
 package.json             |  2 +-
 src/App.test.tsx         |  7 ++++++
 src/SearchWalletForm.tsx |  1 +
 src/WalletFound.tsx      |  2 +-
 src/WalletPage.test.tsx  | 46 ++++++++++++++++++++++++++++++++++++++++
 6 files changed, 61 insertions(+), 10 deletions(-)
 create mode 100644 src/WalletPage.test.tsx

diff --git a/package-lock.json b/package-lock.json
index 2e50e35..edc1f38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@tatumio/tatum": "^4.1.34",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.68",
         "@types/react": "^18.2.46",
@@ -3983,14 +3983,11 @@
       }
     },
     "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
+      "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==",
       "engines": {
-        "node": ">=10",
+        "node": ">=12",
         "npm": ">=6"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index 5cc5970..225df25 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "@tatumio/tatum": "^4.1.34",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.46",
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 3ae3310..18a5207 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -3,6 +3,13 @@ import App from './App';
 
 test('should render Ethereum Wallet headline', () => {
   render(<App />);
+
   const headerElement = screen.getByText(/Ethereum Wallet/i);
   expect(headerElement).toBeInTheDocument();
+
+  const searchInput = screen.getByPlaceholderText(/Wallet address/i);
+  expect(searchInput).toBeInTheDocument();
+
+  const searchButton = screen.getByText(/Search/i);
+  expect(searchButton).toBeInTheDocument();
 });
diff --git a/src/SearchWalletForm.tsx b/src/SearchWalletForm.tsx
index 65d5f77..cbbc11d 100644
--- a/src/SearchWalletForm.tsx
+++ b/src/SearchWalletForm.tsx
@@ -24,6 +24,7 @@ export function SearchWalletForm({ onSearch }: Props) {
         <input
           type="text"
           id="address"
+          placeholder="Wallet address..."
           {...register('address', { required: 'You must enter a wallet address' })}
           className={getEditorStyle(errors.address)}
         />
diff --git a/src/WalletFound.tsx b/src/WalletFound.tsx
index 620b184..53f5b78 100644
--- a/src/WalletFound.tsx
+++ b/src/WalletFound.tsx
@@ -19,7 +19,7 @@ export function WalletFound({ walletData }: Props) {
       <h3 className="text-l font-bold pt-2">Transactions</h3>
       <ul className="list-none">
         {walletData[2].map((transaction) => (
-          <li key={transaction.address} className="pb-2">
+          <li key={transaction.hash} className="pb-2">
             <p className="text-sm truncate">Hash: {transaction.hash}</p>
             <p className="text-sm">Amount: {transaction.amount}</p>
             <p className="text-sm">Timestamp: {new Date(transaction.timestamp).toLocaleString()}</p>
diff --git a/src/WalletPage.test.tsx b/src/WalletPage.test.tsx
new file mode 100644
index 0000000..75736f7
--- /dev/null
+++ b/src/WalletPage.test.tsx
@@ -0,0 +1,46 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { WalletPage } from './WalletPage';
+import userEvent from '@testing-library/user-event';
+
+test('should return nothing for non-existing wallet address', async () => {
+  const user = userEvent.setup();
+
+  render(<WalletPage />);
+
+  const searchInput = screen.getByPlaceholderText('Wallet address...');
+  await user.type(searchInput, 'non-existing');
+
+  const searchButton = screen.getByText('Search');
+  act(() => {
+    user.click(searchButton);
+  });
+
+  const res = await waitFor(() => screen.findByText(/No wallet with address/i), { timeout: 5000 });
+  expect(res).toBeInTheDocument();
+});
+
+test('should return wallet data for valid wallet address', async () => {
+  const user = userEvent.setup();
+
+  render(<WalletPage />);
+
+  const searchInput = screen.getByPlaceholderText('Wallet address...');
+  await user.type(searchInput, '0xb794f5ea0ba39494ce839613fffba74279579268');
+
+  const searchButton = screen.getByText('Search');
+  act(() => {
+    user.click(searchButton);
+  });
+
+  const balance = await waitFor(() => screen.findByText(/Balance/i), { timeout: 5000 });
+  expect(balance).toBeInTheDocument();
+
+  const txheadline = await waitFor(() => screen.findByText(/Transactions/i), { timeout: 5000 });
+  expect(txheadline).toBeInTheDocument();
+
+  // TODO check the list of transactions, not only a headline
+});
+
+// TODO check a wallet with no transactions
+
+// TODO check validation - click search on empty input