From eaf76b3b746fb365e9d0530be6d643791dc7f0a1 Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:28:30 -0500
Subject: [PATCH] fix: proposal details form test

---
 .../__tests__/ProposalDetailsForm.test.tsx    | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/components/groups/forms/proposals/__tests__/ProposalDetailsForm.test.tsx b/components/groups/forms/proposals/__tests__/ProposalDetailsForm.test.tsx
index e85d95b7..bd3f2006 100644
--- a/components/groups/forms/proposals/__tests__/ProposalDetailsForm.test.tsx
+++ b/components/groups/forms/proposals/__tests__/ProposalDetailsForm.test.tsx
@@ -1,9 +1,21 @@
-import { describe, test, afterEach, expect, jest } from 'bun:test';
+import { describe, test, afterEach, expect, jest, mock } from 'bun:test';
 import React from 'react';
 import { screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
 import ProposalDetails from '@/components/groups/forms/proposals/ProposalDetailsForm';
 import { renderWithChainProvider } from '@/tests/render';
 import { mockProposalFormData } from '@/tests/mock';
+import matchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(matchers);
+
+// Mock next/router
+const m = jest.fn();
+mock.module('next/router', () => ({
+  useRouter: m.mockReturnValue({
+    query: {},
+    push: jest.fn(),
+  }),
+}));
 
 const mockProps = {
   nextStep: jest.fn(),
@@ -20,7 +32,7 @@ describe('ProposalDetails Component', () => {
 
   test('renders component with correct details', () => {
     renderWithChainProvider(<ProposalDetails {...mockProps} />);
-    expect(screen.getByText('Proposal')).toBeDefined();
+    expect(screen.getByText('Proposal details')).toBeDefined();
     expect(screen.getByText('Next: Proposal Messages')).toBeDefined();
   });
 
@@ -57,10 +69,18 @@ describe('ProposalDetails Component', () => {
     });
   });
 
-  test('next button is disabled when form is invalid', () => {
+  test('next button is enabled when form is valid', () => {
+    renderWithChainProvider(<ProposalDetails {...mockProps} />);
+    const nextButton = screen.getByText('Next: Proposal Messages');
+    expect(nextButton).toBeEnabled();
+  });
+
+  test('next button is disabled when form is invalid', async () => {
     renderWithChainProvider(<ProposalDetails {...mockProps} />);
+    const titleInput = screen.getByLabelText('Proposal Title');
+    fireEvent.change(titleInput, { target: { value: '' } });
     const nextButton = screen.getByText('Next: Proposal Messages');
-    expect(nextButton).toBeDisabled();
+    await waitFor(() => expect(nextButton).toBeDisabled());
   });
 
   test('next button is enabled when form is valid and dirty', async () => {
@@ -80,17 +100,4 @@ describe('ProposalDetails Component', () => {
     fireEvent.click(nextButton);
     expect(mockProps.nextStep).toHaveBeenCalled();
   });
-
-  test('updates proposers field with address when address button is clicked', async () => {
-    renderWithChainProvider(<ProposalDetails {...mockProps} />);
-    const addressButton = screen.getByLabelText('address-btn');
-    fireEvent.click(addressButton);
-    await waitFor(() => {
-      expect(mockProps.dispatch).toHaveBeenCalledWith({
-        type: 'UPDATE_FIELD',
-        field: 'proposers',
-        value: mockProps.address,
-      });
-    });
-  });
 });