fix: group policy form test

fmorency · Nov 7, 2024 · 967da28 · 967da28
1 parent 4b8aff3
commit 967da28
Showing 1 changed file with 33 additions and 38 deletions.
diff --git a/components/groups/forms/groups/__tests__/GroupPolicyForm.test.tsx b/components/groups/forms/groups/__tests__/GroupPolicyForm.test.tsx
@@ -15,6 +15,19 @@ const mockProps = {
   dispatch: jest.fn(),
 };
 
+// TODO: This test suite is throwing. Fix it.
+//    Warning: Cannot update a component (`GroupPolicyForm`) while rendering a different component (`Formik`). To locate the bad setState() call inside `Formik`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
+//        at Formik (node_modules/formik/dist/formik.cjs.development.js:1077:19)
+//        at div
+//        at div
+//        at div
+//        at section
+//        at GroupPolicyForm (components/groups/forms/groups/GroupPolicyForm.tsx:37:3)
+//        at ToastProvider (contexts/toastContext.tsx:13:43)
+//        at ChainProvider (node_modules/@cosmos-kit/react-lite/cjs/provider.js:8:26)
+//        at SelectedWalletRepoProvider (node_modules/@cosmos-kit/react/cjs/context/useSelectedWalletContext.js:8:64)
+//        at ChainProvider (node_modules/@cosmos-kit/react/cjs/provider.js:11:26)
+//        at QueryClientProvider (node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:20:3)
 describe('GroupPolicyForm Component', () => {
   afterEach(() => {
     cleanup();
@@ -24,23 +37,26 @@ describe('GroupPolicyForm Component', () => {
   test('renders component with correct details', () => {
     renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
     expect(screen.getByText('Group Policy')).toBeInTheDocument();
-    expect(screen.getByText('Voting Period')).toBeInTheDocument();
-    expect(screen.getByText('Voting Threshold')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Days')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Hours')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Minutes')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Seconds')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('e.g., 1')).toBeInTheDocument();
   });
 
   test('updates form fields correctly', async () => {
     renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
-    const votingAmountInput = screen.getByPlaceholderText('Enter duration');
-    fireEvent.change(votingAmountInput, { target: { value: '2' } });
-    expect(votingAmountInput).toHaveValue(2);
+    const hoursInput = screen.getByPlaceholderText('Hours');
+    fireEvent.change(hoursInput, { target: { value: '2' } });
+    expect(hoursInput).toHaveValue(2);
 
-    const votingThresholdInput = screen.getByPlaceholderText('e.g. (1)');
-    fireEvent.change(votingThresholdInput, { target: { value: '3' } });
+    const votingThresholdInput = screen.getByPlaceholderText('e.g., 1');
+    fireEvent.change(votingThresholdInput, { target: { value: 3 } });
     await waitFor(() => {
       expect(mockProps.dispatch).toHaveBeenCalledWith({
         type: 'UPDATE_FIELD',
         field: 'votingThreshold',
-        value: '3',
+        value: 3,
       });
     });
   });
@@ -51,53 +67,32 @@ describe('GroupPolicyForm Component', () => {
     expect(nextButton).toBeDisabled();
   });
 
-  test('next button is disabled when form is invalid', async () => {
+  test('next button is enabled when form is valid and dirty', async () => {
     renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
     const nextButton = screen.getByText('Next: Member Info');
     expect(nextButton).toBeDisabled();
 
-    const votingThresholdInput = screen.getByPlaceholderText('e.g. (1)');
-    fireEvent.change(votingThresholdInput, { target: { value: '' } });
-    await waitFor(() => {
-      expect(nextButton).toBeDisabled();
-    });
-
-    fireEvent.change(votingThresholdInput, { target: { value: '1' } });
-    await waitFor(() => {
-      expect(nextButton).toBeEnabled();
-    });
-
-    const votingAmountInput = screen.getByPlaceholderText('Enter duration');
-    // The value will be set to 1 if the input is less than 1
-    fireEvent.change(votingAmountInput, { target: { value: '0' } });
-    expect(votingAmountInput).toHaveValue(1);
-  });
-
-  test('next button is enabled when form is valid and dirty', async () => {
-    renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
-    const votingThresholdInput = screen.getByPlaceholderText('e.g. (1)');
-    fireEvent.change(votingThresholdInput, { target: { value: '3' } });
-    await waitFor(() => {
-      expect(screen.getByText('Next: Member Info')).toBeEnabled();
-    });
+    const votingAmountInput = screen.getByPlaceholderText('Hours');
+    fireEvent.change(votingAmountInput, { target: { value: '2' } });
+    expect(votingAmountInput).toHaveValue(2);
+    expect(nextButton).toBeEnabled();
   });
 
   test('calls nextStep when next button is clicked', async () => {
     renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
-    const votingThresholdInput = screen.getByPlaceholderText('e.g. (1)');
-    fireEvent.change(votingThresholdInput, { target: { value: '3' } });
+    const votingAmountInput = screen.getByPlaceholderText('Hours');
+    fireEvent.change(votingAmountInput, { target: { value: '2' } });
+    const nextButton = screen.getByText('Next: Member Info');
     await waitFor(() => {
-      const nextButton = screen.getByText('Next: Member Info');
       expect(nextButton).toBeEnabled();
     });
-    const nextButton = screen.getByText('Next: Member Info');
     fireEvent.click(nextButton);
     expect(mockProps.nextStep).toHaveBeenCalled();
   });
 
   test('calls prevStep when prev button is clicked', () => {
     renderWithChainProvider(<GroupPolicyForm {...mockProps} />);
-    const prevButton = screen.getByText('Prev: Group Details');
+    const prevButton = screen.getByText('Back: Group Details');
     fireEvent.click(prevButton);
     expect(mockProps.prevStep).toHaveBeenCalled();
   });