Steve Kinney

Accident Counter: Solution

Your code might look a bit different, but here is one possible solution.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Counter } from './counter';

import '@testing-library/jest-dom';

describe('Counter ', () => {
  beforeEach(() => {
    render(<Counter />);
  });

  it('renders with an initial count of 0', () => {
    const countElement = screen.getByTestId('counter-count');
    expect(countElement).toHaveTextContent('0');
  });

  it('disables the "Decrement" and "Reset" buttons when the count is 0', () => {
    const decrementButton = screen.getByRole('button', { name: 'Decrement' });
    const resetButton = screen.getByRole('button', { name: 'Reset' });

    expect(decrementButton).toBeDisabled();
    expect(resetButton).toBeDisabled();
  });

  it('displays "days" when the count is 0', () => {
    const unitElement = screen.getByTestId('counter-unit');
    expect(unitElement).toHaveTextContent('days');
  });

  it('increments the count when the "Increment" button is clicked', async () => {
    const incrementButton = screen.getByRole('button', { name: 'Increment' });
    const countElement = screen.getByTestId('counter-count');

    await userEvent.click(incrementButton); // Using userEvent for a real click event

    expect(countElement).toHaveTextContent('1');
  });

  it('displays "day" when the count is 1', async () => {
    const incrementButton = screen.getByRole('button', { name: 'Increment' });
    const unitElement = screen.getByTestId('counter-unit');

    await userEvent.click(incrementButton); // Increment the count

    expect(unitElement).toHaveTextContent('day');
  });

  it('decrements the count when the "Decrement" button is clicked', async () => {
    const incrementButton = screen.getByRole('button', { name: 'Increment' });
    const decrementButton = screen.getByRole('button', { name: 'Decrement' });
    const countElement = screen.getByTestId('counter-count');

    await userEvent.click(incrementButton); // Increment first
    await userEvent.click(decrementButton); // Then decrement

    expect(countElement).toHaveTextContent('0');
  });

  it('does not allow decrementing below 0', async () => {
    const decrementButton = screen.getByRole('button', { name: 'Decrement' });
    const countElement = screen.getByTestId('counter-count');

    await userEvent.click(decrementButton); // Should not decrement below 0

    expect(countElement).toHaveTextContent('0');
  });

  it('resets the count when the "Reset" button is clicked', async () => {
    const incrementButton = screen.getByRole('button', { name: 'Increment' });
    const resetButton = screen.getByRole('button', { name: 'Reset' });
    const countElement = screen.getByTestId('counter-count');

    await userEvent.click(incrementButton); // Increment first
    await userEvent.click(resetButton); // Then reset

    expect(countElement).toHaveTextContent('0');
  });

  it('disables the "Decrement" and "Reset" buttons when the count is 0', () => {
    const decrementButton = screen.getByRole('button', { name: 'Decrement' });
    const resetButton = screen.getByRole('button', { name: 'Reset' });

    expect(decrementButton).toBeDisabled();
    expect(resetButton).toBeDisabled();
  });

  it('updates the document title based on the count', async () => {
    const incrementButton = screen.getByText('Increment');
    await userEvent.click(incrementButton);

    expect(document.title).toBe('1 day');

    await userEvent.click(incrementButton);
    expect(document.title).toBe('2 days');
  });
});

Last modified on .