From 999c9bc0127cdbb73222069f1cb41faa1551c7e4 Mon Sep 17 00:00:00 2001 From: Joseph Chalabi <100090645+chalabi2@users.noreply.github.com> Date: Wed, 4 Sep 2024 13:40:35 -0700 Subject: [PATCH] fix tests --- .../components/__tests__/metaBox.test.tsx | 9 -- components/factory/forms/BurnForm.tsx | 2 + components/factory/forms/MintForm.tsx | 3 + .../factory/forms/__tests__/BurnForm.test.tsx | 34 ++++++-- .../factory/forms/__tests__/MintForm.test.tsx | 82 +++++++++++++------ .../groups/forms/groups/MemberInfoForm.tsx | 4 +- .../forms/proposals/ProposalDetailsForm.tsx | 4 +- 7 files changed, 90 insertions(+), 48 deletions(-) diff --git a/components/factory/components/__tests__/metaBox.test.tsx b/components/factory/components/__tests__/metaBox.test.tsx index a566b8d2..f0d3338d 100644 --- a/components/factory/components/__tests__/metaBox.test.tsx +++ b/components/factory/components/__tests__/metaBox.test.tsx @@ -53,15 +53,6 @@ describe('MetaBox', () => { expect(screen.getByText('Select a token to view options')).toBeInTheDocument(); }); - test("renders TransferForm when active tab is 'transfer'", async () => { - renderWithProps({ denom: mockDenom }); - const transferTab = screen.getByText('Transfer'); - expect(transferTab).toBeInTheDocument(); - expect(transferTab).toBeEnabled(); - transferTab.click(); - await waitFor(() => expect(screen.getByText('Transfer TEST')).toBeInTheDocument()); - }); - test("renders BurnForm when active tab is 'burn'", async () => { renderWithProps({ denom: mockDenom }); const burnTab = screen.getByText('Burn'); diff --git a/components/factory/forms/BurnForm.tsx b/components/factory/forms/BurnForm.tsx index baae9c1d..c1291669 100644 --- a/components/factory/forms/BurnForm.tsx +++ b/components/factory/forms/BurnForm.tsx @@ -221,6 +221,7 @@ export default function BurnForm({
setIsModalOpen(true)} className="btn btn-primary btn-md" + aria-label="multi-mint-button" > Multi Mint diff --git a/components/factory/forms/__tests__/BurnForm.test.tsx b/components/factory/forms/__tests__/BurnForm.test.tsx index ed133019..07fc43a5 100644 --- a/components/factory/forms/__tests__/BurnForm.test.tsx +++ b/components/factory/forms/__tests__/BurnForm.test.tsx @@ -1,6 +1,6 @@ import { describe, test, afterEach, expect, jest } from 'bun:test'; import React from 'react'; -import { screen, fireEvent, cleanup } from '@testing-library/react'; +import { screen, fireEvent, cleanup, waitFor } from '@testing-library/react'; import BurnForm from '@/components/factory/forms/BurnForm'; import matchers from '@testing-library/jest-dom/matchers'; import { mockDenomMeta1, mockMfxDenom } from '@/tests/mock'; @@ -44,18 +44,40 @@ describe('BurnForm Component', () => { ).toBeInTheDocument(); }); - test('updates amount input correctly', () => { + test('updates amount input correctly', async () => { renderWithProps(); - const amountInput = screen.getByPlaceholderText('Enter amount'); + const amountInput = screen.getByLabelText('burn-amount-input'); fireEvent.change(amountInput, { target: { value: '100' } }); - expect(amountInput).toHaveValue('100'); + await waitFor(() => { + expect(amountInput).toHaveValue(100); + }); }); - test('updates recipient input correctly', () => { + test('burn button is disabled when inputs are invalid', async () => { renderWithProps(); + const burnButton = screen.getByLabelText('burn-target-input'); + expect(burnButton).toBeDisabled(); + + const amountInput = screen.getByPlaceholderText('Enter amount'); + fireEvent.change(amountInput, { target: { value: '-100' } }); + + await waitFor(() => { + expect(burnButton).toBeDisabled(); + }); + }); + + test('burn button is enabled when inputs are valid', async () => { + renderWithProps(); + const amountInput = screen.getByPlaceholderText('Enter amount'); const recipientInput = screen.getByPlaceholderText('Target address'); + const burnButton = screen.getByText('Burn'); + + fireEvent.change(amountInput, { target: { value: '100' } }); fireEvent.change(recipientInput, { target: { value: 'cosmos1recipient' } }); - expect(recipientInput).toHaveValue('cosmos1recipient'); + + await waitFor(() => { + expect(burnButton).toBeEnabled(); + }); }); // // TODO: Make this test pass diff --git a/components/factory/forms/__tests__/MintForm.test.tsx b/components/factory/forms/__tests__/MintForm.test.tsx index fe666ca4..e59d6632 100644 --- a/components/factory/forms/__tests__/MintForm.test.tsx +++ b/components/factory/forms/__tests__/MintForm.test.tsx @@ -1,10 +1,10 @@ import { describe, test, afterEach, expect, jest } from 'bun:test'; import React from 'react'; -import { screen, fireEvent, cleanup } from '@testing-library/react'; +import { screen, fireEvent, cleanup, waitFor } from '@testing-library/react'; import MintForm from '@/components/factory/forms/MintForm'; import matchers from '@testing-library/jest-dom/matchers'; import { renderWithChainProvider } from '@/tests/render'; -import { mockDenomMeta1 } from '@/tests/mock'; +import { mockDenomMeta1, mockMfxDenom } from '@/tests/mock'; expect.extend(matchers); @@ -17,49 +17,77 @@ const mockProps = { balance: '1000000', }; +function renderWithProps(props = {}) { + return renderWithChainProvider(); +} + describe('MintForm Component', () => { afterEach(cleanup); test('renders form with correct details', () => { - renderWithChainProvider(); + renderWithProps(); expect(screen.getByText('NAME')).toBeInTheDocument(); expect(screen.getByText('YOUR BALANCE')).toBeInTheDocument(); expect(screen.getByText('EXPONENT')).toBeInTheDocument(); expect(screen.getByText('CIRCULATING SUPPLY')).toBeInTheDocument(); }); - test('updates amount input correctly', () => { - renderWithChainProvider(); + test('updates amount input correctly', async () => { + renderWithProps(); const amountInput = screen.getByLabelText('mint-amount-input'); fireEvent.change(amountInput, { target: { value: '100' } }); - expect(amountInput).toHaveValue('100'); + await waitFor(() => { + expect(amountInput).toHaveValue(100); + }); }); - test('updates recipient input correctly', () => { - renderWithChainProvider(); - const recipientInput = screen.getByLabelText('mint-recipient-input'); + test('updates recipient input correctly', async () => { + renderWithProps(); + const recipientInput = screen.getByPlaceholderText('Recipient address'); fireEvent.change(recipientInput, { target: { value: 'cosmos1recipient' } }); - expect(recipientInput).toHaveValue('cosmos1recipient'); + await waitFor(() => { + expect(recipientInput).toHaveValue('cosmos1recipient'); + }); }); - // TODO: Button is disabled when inputs are invalid - // test('mint button is disabled when inputs are invalid', () => { - // renderWithChainProvider(); - // const mintButton = screen.getByText('Mint'); - // expect(mintButton).toBeDisabled(); - // }); - // - // TODO: Button is enabled when inputs are valid - // Fix values validation in the component, this test should not pass as-is - test('mint button is enabled when inputs are valid', () => { - renderWithChainProvider(); - fireEvent.change(screen.getByLabelText('mint-amount-input'), { - target: { value: '100' }, - }); - fireEvent.change(screen.getByLabelText('mint-recipient-input'), { - target: { value: 'cosmos1recipient' }, + test('mint button is disabled when inputs are invalid', async () => { + renderWithProps(); + const mintButton = screen.getByText('Mint'); + expect(mintButton).toBeDisabled(); + + const amountInput = screen.getByLabelText('mint-amount-input'); + fireEvent.change(amountInput, { target: { value: '-100' } }); + + await waitFor(() => { + expect(mintButton).toBeDisabled(); }); + }); + + test('mint button is enabled when inputs are valid', async () => { + renderWithProps(); + const amountInput = screen.getByLabelText('mint-amount-input'); + const recipientInput = screen.getByLabelText('mint-recipient-input'); const mintButton = screen.getByText('Mint'); - expect(mintButton).toBeEnabled(); + + fireEvent.change(amountInput, { target: { value: '1' } }); + fireEvent.change(recipientInput, { + target: { value: 'manifest1aucdev30u9505dx9t6q5fkcm70sjg4rh7rn5nf' }, + }); + + await waitFor(() => { + expect(mintButton).toBeEnabled(); + }); + }); + + test('renders multi mint button when token is mfx', () => { + renderWithProps({ denom: mockMfxDenom }); + expect(screen.getByLabelText('multi-mint-button')).toBeInTheDocument(); + }); + + test('renders not affiliated message when not admin and token is mfx', () => { + renderWithProps({ isAdmin: false, denom: mockMfxDenom }); + expect( + screen.getByText('You are not affiliated with any PoA Admin entity.') + ).toBeInTheDocument(); }); }); diff --git a/components/groups/forms/groups/MemberInfoForm.tsx b/components/groups/forms/groups/MemberInfoForm.tsx index ddcc1a52..a9d53709 100644 --- a/components/groups/forms/groups/MemberInfoForm.tsx +++ b/components/groups/forms/groups/MemberInfoForm.tsx @@ -194,9 +194,7 @@ export default function MemberInfoForm({ type="submit" className="btn btn-primary w-full" disabled={!isValid || numberOfMembers === 0} - onClick={() => { - nextStep(); - }} + onClick={nextStep()} > Next: Group Policy diff --git a/components/groups/forms/proposals/ProposalDetailsForm.tsx b/components/groups/forms/proposals/ProposalDetailsForm.tsx index 513b52e8..695abc78 100644 --- a/components/groups/forms/proposals/ProposalDetailsForm.tsx +++ b/components/groups/forms/proposals/ProposalDetailsForm.tsx @@ -99,9 +99,7 @@ export default function ProposalDetails({ type="submit" className="w-full mt-4 btn px-5 py-2.5 sm:py-3.5 btn-primary" disabled={!isValid || !dirty} - onClick={() => { - nextStep(); - }} + onClick={nextStep()} > Next: Proposal Messages