chore: add currency element test

src/components/flow/routers/airtime/currency/CurrencyElement.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import CurrencyElement from './CurrencyElement';
+import { CurrencyElementProps } from './CurrencyElement';
+import { AssetType } from 'store/flowContext';
+import styles from './CurrencyElement.module.scss';
+
+const mockStore = configureStore([]);
+
+describe('CurrencyElement Component', () => {
+  let store: any;
+
+  const mockOnChange = vi.fn();
+  const mockOnRemove = vi.fn();
+
+  const defaultProps: CurrencyElementProps = {
+    currencies: {
+      items: {
+        ['id1']: {
+          id: 'default currency',
+          name: 'default currency',
+          type: AssetType.Currency,
+        },
+      },
+      type: AssetType.Currency,
+    },
+    transfer: {
+      value: { amount: '100', code: 'USD' },
+      validationFailures: [],
+    },
+    index: 0,
+    exclude: [],
+    onChange: mockOnChange,
+    onRemove: mockOnRemove,
+  };
+
+  beforeEach(() => {
+    store = mockStore({
+      flowContext: {
+        assetStore: {
+          completion: {
+            items: [],
+          },
+        },
+      },
+    });
+  });
+
+  it('renders correctly with default props', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <CurrencyElement {...defaultProps} />
+      </Provider>,
+    );
+    expect(getByText(/default currency/i)).toBeInTheDocument();
+  });
+
+  it('renders amount input when index is greater than -1', () => {
+    const props = {
+      ...defaultProps,
+      index: 1,
+    };
+
+    const { getByPlaceholderText } = render(
+      <Provider store={store}>
+        <CurrencyElement {...props} />
+      </Provider>,
+    );
+
+    expect(getByPlaceholderText(/Transfer Amount/i)).toBeInTheDocument();
+  });
+
+  it('renders remove icon when index is greater than -1', () => {
+    const props = {
+      ...defaultProps,
+      index: 1,
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <CurrencyElement {...props} />
+      </Provider>,
+    );
+
+    const removeIcon = container.querySelector(`div.${styles.remove}`);
+    expect(removeIcon).toBeInTheDocument();
+  });
+
+  it('calls onRemove when remove icon is clicked', () => {
+    const props = {
+      ...defaultProps,
+      index: 1,
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <CurrencyElement {...props} />
+      </Provider>,
+    );
+
+    const removeIcon = container.querySelector(`div.${styles.remove}`);
+    fireEvent.click(removeIcon);
+
+    expect(mockOnRemove).toHaveBeenCalledWith(1);
+  });
+});