102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
import { render, screen, act } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
import { Counter } from './counter';
|
|
|
|
import '@testing-library/jest-dom/vitest';
|
|
|
|
describe('Counter ', () => {
|
|
it('renders with an initial count of 0', () => {
|
|
render(<Counter />);
|
|
const counter = screen.getByTestId('counter-count');
|
|
expect(counter).toHaveTextContent('0');
|
|
});
|
|
|
|
it('disables the "Decrement" and "Reset" buttons when the count is 0', () => {
|
|
render(<Counter />);
|
|
const decrementButton = screen.getByRole('button', { name: /decrement/i });
|
|
const resetButton = screen.getByRole('button', { name: /reset/i });
|
|
|
|
expect(decrementButton).toBeDisabled();
|
|
expect(resetButton).toBeDisabled();
|
|
});
|
|
|
|
it('displays "days" when the count is 0', () => {
|
|
render(<Counter />);
|
|
const unit = screen.getByTestId('counter-unit');
|
|
expect(unit).toHaveTextContent('days');
|
|
});
|
|
|
|
it('increments the count when the "Increment" button is clicked', async () => {
|
|
render(<Counter />);
|
|
const incrementButton = screen.getByRole('button', { name: /increment/i });
|
|
const counter = screen.getByTestId('counter-count');
|
|
|
|
await act(async () => {
|
|
await userEvent.click(incrementButton);
|
|
});
|
|
|
|
expect(counter).toHaveTextContent('1');
|
|
});
|
|
|
|
it('displays "day" when the count is 1', async () => {
|
|
render(<Counter />);
|
|
const incrementButton = screen.getByRole('button', { name: /increment/i });
|
|
const unit = screen.getByTestId('counter-unit');
|
|
|
|
await act(async () => {
|
|
await userEvent.click(incrementButton);
|
|
});
|
|
|
|
expect(unit).toHaveTextContent('day');
|
|
});
|
|
|
|
it('decrements the count when the "Decrement" button is clicked', async () => {
|
|
render(<Counter initialCount={1} />);
|
|
const decrementButton = screen.getByRole('button', { name: /decrement/i });
|
|
const count = screen.getByTestId('counter-count');
|
|
|
|
expect(decrementButton).not.toBeDisabled();
|
|
|
|
await act(async () => {
|
|
await userEvent.click(decrementButton);
|
|
});
|
|
|
|
expect(count).toHaveTextContent('0');
|
|
expect(decrementButton).toBeDisabled();
|
|
});
|
|
|
|
it('does not allow decrementing below 0', async () => {
|
|
render(<Counter />);
|
|
const decrementButton = screen.getByRole('button', { name: /decrement/i });
|
|
const count = screen.getByTestId('counter-count');
|
|
|
|
await act(async () => {
|
|
await userEvent.click(decrementButton);
|
|
});
|
|
|
|
expect(count).toHaveTextContent('0');
|
|
});
|
|
|
|
it.todo(
|
|
'resets the count when the "Reset" button is clicked',
|
|
async () => {},
|
|
);
|
|
|
|
it.todo(
|
|
'disables the "Decrement" and "Reset" buttons when the count is 0',
|
|
() => {},
|
|
);
|
|
|
|
it('updates the document title based on the count', async () => {
|
|
const { getByRole } = render(<Counter />);
|
|
const incrementButton = getByRole('button', { name: /increment/i });
|
|
|
|
await act(async () => {
|
|
await userEvent.click(incrementButton);
|
|
});
|
|
|
|
expect(document.title).toEqual(expect.stringContaining('1 day'));
|
|
});
|
|
});
|