[COMPONENT TESTING] - Upcoming & Past Events

[JaedonSpurlock01]

We need to write Jest test cases for the Upcoming and Past Events component. The goal of this issue is to ensure that the component functions as expected by testing its rendering, behavior, and edge cases.

Acceptance Criteria

• [ ] Write test cases for all key functionalities of the Upcoming & Past Events component.
• [ ] Use mock data using the GDSCEvent type. (Ask me for help if needed).
• [ ] Ensure the component renders correctly.
• [ ] Test props, state, and any side effects (e.g., events, hooks).
• [ ] Include snapshot testing (if applicable).
• [ ] Ensure tests pass without errors or warnings.

Testing Instructions

• Clone the repository and set up the development environment by following the instructions in the README.
• Find the component located at /components/main/events/<upcoming | past>-events.tsx
• Create a new test file tests/components/events/events-list.tsx
• Implement the test cases as described in the acceptance criteria.
• Run the test suite using npm run test inside the terminal
• Ensure that all tests pass before submitting a PR.

Additional Resources Jest Documentation

To get you started, here is some example code with Jest, feel free to use these or the docs,

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom'; // for extra matchers like `toBeInTheDocument`
import { <ComponentName> } from '../path/to/component';

describe('<ComponentName> Component Tests', () => {

  it('renders without crashing', () => {
    render(<ComponentName />);
    const element = screen.getByTestId('<component-testid>');
    expect(element).toBeInTheDocument();
  });

  it('renders with correct props', () => {
    const { getByText } = render(<ComponentName propName="Test Prop" />);
    expect(getByText('Test Prop')).toBeInTheDocument();
  });

  it('handles click event correctly', () => {
    const handleClick = jest.fn();
    render(<ComponentName onClick={handleClick} />);
    const button = screen.getByRole('button');
    fireEvent.click(button);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  // Add more specific tests for the component as needed

  it('matches snapshot', () => {
    const { asFragment } = render(<ComponentName />);
    expect(asFragment()).toMatchSnapshot();
  });
});