test: add WalletPage tests

Finishes tests for App, adds first tests fro Walletpage, fixes key for wallet transactions.

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",

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();
 });

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)}
         />

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>

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