Steve Kinney

Introduction to Testing

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 .