Add task list demo application

examples/accident-counter/src/counter.test.jsx

@@ -0,0 +1,85 @@
+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 Component', () => {
+  beforeEach(() => {
+    render(<Counter />);
+  });
+
+  it('renders with an initial count of 0', () => {
+    const countElement = screen.getByTestId('counter-count');
+    expect(countElement).toHaveTextContent('0');
+  });
+
+  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.getByText('Increment');
+    await userEvent.click(incrementButton);  // Using userEvent for a real click event
+
+    const countElement = screen.getByTestId('counter-count');
+    expect(countElement).toHaveTextContent('1');
+  });
+
+  it('displays "day" when the count is 1', async () => {
+    const incrementButton = screen.getByText('Increment');
+    await userEvent.click(incrementButton);  // Increment the count
+
+    const unitElement = screen.getByTestId('counter-unit');
+    expect(unitElement).toHaveTextContent('day');
+  });
+
+  it('decrements the count when the "Decrement" button is clicked', async () => {
+    const incrementButton = screen.getByText('Increment');
+    const decrementButton = screen.getByText('Decrement');
+
+    await userEvent.click(incrementButton);  // Increment first
+    await userEvent.click(decrementButton);  // Then decrement
+
+    const countElement = screen.getByTestId('counter-count');
+    expect(countElement).toHaveTextContent('0');
+  });
+
+  it('does not allow decrementing below 0', async () => {
+    const decrementButton = screen.getByText('Decrement');
+    await userEvent.click(decrementButton);  // Should not decrement below 0
+
+    const countElement = screen.getByTestId('counter-count');
+    expect(countElement).toHaveTextContent('0');
+  });
+
+  it('resets the count when the "Reset" button is clicked', async () => {
+    const incrementButton = screen.getByText('Increment');
+    const resetButton = screen.getByText('Reset');
+
+    await userEvent.click(incrementButton);  // Increment first
+    await userEvent.click(resetButton);      // Then reset
+
+    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.getByText('Decrement');
+    const resetButton = screen.getByText('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');
+  });
+});

examples/accident-counter/src/counter.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer, useEffect } from 'react';
+import { useReducer, useEffect } from 'react';
 import { reducer } from './reducer';
 
 export const Counter = () => {
@@ -12,12 +12,12 @@ export const Counter = () => {
   return (
     <div className="p-8 space-y-8 text-center bg-white border rounded-md shadow-lg border-slate-400">
       <div className="space-y-4">
-        <div data-test-id="counter-count" className="font-semibold text-8xl">
+        <div data-testid="counter-count" className="font-semibold text-8xl">
           {state.count}
         </div>
         <p>
-          <span data-test-id="counter-unit">{unit}</span> since the last
-          accident.
+          <span data-testid="counter-unit">{unit}</span> since the last
+          JavaScript-related accident.
         </p>
       </div>
       <div className="flex gap-4">

examples/accident-counter/src/reducer.test.js

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { reducer } from './reducer';
 
 describe('reducer', () => {