[Component Tests] AddItemModal

tomsmith8 commented 7 months ago

Task

Write unit tests for src/components/AddItemModal/index.tsx

Boiler plate example:

import { render, screen, fireEvent } from '@testing-library/react';
import { AddItemModal } from './AddItemModal';
import { ModalProvider } from '~/contexts/ModalContext';
import { UserStoreProvider } from '~/contexts/UserStoreContext';

describe('AddItemModal', () => {
  const renderComponent = () => render(
    <ModalProvider>
      <UserStoreProvider>
        <AddItemModal />
      </UserStoreProvider>
    </ModalProvider>
  );

  it('renders the modal and navigates through steps', async () => {
    renderComponent();

    // Check initial step is rendered
    expect(screen.getByText(/select node type/i)).toBeInTheDocument();

    // Mock user selecting a node type and clicking "Next"
    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'Image' } });
    fireEvent.click(screen.getByText(/next/i));

    // Verify navigation to the next step
    expect(screen.getByText(/enter source link/i)).toBeInTheDocument();

    // Navigate back
    fireEvent.click(screen.getByText(/previous/i));
    expect(screen.getByText(/select node type/i)).toBeInTheDocument();
  });

  // Additional tests here
});

Acceptance Criteria

[ ] Verify that the AddItemModal renders correctly.
[ ] Ensure that the BaseModal component is rendered with the correct props.
[ ] Confirm that the useForm hook is initialized with the correct default values and mode.
[ ] Test the navigation between steps (source type selection, source input, budget step) works as expected when the "Next" and "Previous" actions are triggered.
[ ] Ensure that the current step state is correctly updated upon navigation.
[ ] Mock the API call to submit the form data and verify the form submission process.
[ ] Test successful form submission displaying a success message and closing the modal.
[ ] Check the handling of API errors, including payment required (402) and other errors (400, general errors), and displaying appropriate notifications.
[ ] Ensure that the SourceTypeStep, SourceStep, and BudgetStep components are conditionally rendered based on the current step state.
[ ] Verify that the correct props are passed to each child component based on the form state.
[ ] Mock sphinx.enable, getLSat, payLsat, and updateBudget to test their integration within the form submission logic.
[ ] Test the scenario where a new LSAT is required, including the recursive call to handleSubmitForm.
[ ] Verify that the form state and current step state are reset when the modal is closed.
[ ] Mock useModal and useUserStore hooks to ensure they are called and their returned functions are integrated correctly for modal handling and budget updates.