Add counter example; fix configuration

2024-09-16 15:44:34 -06:00
parent 1747f705a6
commit b13029bffc
15 changed files with 813 additions and 8 deletions
--- a/examples/accident-counter/README.md
+++ b/examples/accident-counter/README.md
--- a/examples/accident-counter/index.html
+++ b/examples/accident-counter/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Accident Counter</title>
+  </head>
+  <script type="module" lang="jsx">
+    import { createElement } from 'react';
+    import { createRoot } from 'react-dom/client';
+    import { Counter } from './src/counter.tsx';
+    import './styles.css';
+
+    createRoot(document.getElementById('root')).render(createElement(Counter));
+  </script>
+  <body>
+    <div
+      class="container flex items-center justify-center h-screen"
+      id="root"
+    ></div>
+  </body>
+</html>
--- a/examples/accident-counter/package.json
+++ b/examples/accident-counter/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "accident-counter",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "start": "vitest --ui",
+    "test": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevekinney/testing-javascript.git"
+  },
+  "author": "Steve Kinney <hello@stevekinney.net>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stevekinney/testing-javascript/issues"
+  },
+  "homepage": "https://github.com/stevekinney/testing-javascript#readme",
+  "devDependencies": {
+    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.6",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.11",
+    "vite": "^5.4.5",
+    "vitest": "^2.1.1"
+  }
+}
--- a/examples/accident-counter/postcss.config.js
+++ b/examples/accident-counter/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    '@tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/examples/accident-counter/src/counter.tsx
+++ b/examples/accident-counter/src/counter.tsx
@@ -0,0 +1,42 @@
+import React, { useReducer, useEffect } from 'react';
+import { reducer } from './reducer';
+
+export const Counter = () => {
+  const [state, dispatch] = useReducer(reducer, { count: 0 });
+  const unit = state.count === 1 ? 'day' : 'days';
+
+  useEffect(() => {
+    window.document.title = `${state.count} ${unit}`;
+  }, [state.count]);
+
+  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">
+          {state.count}
+        </div>
+        <p>
+          <span data-test-id="counter-unit">{unit}</span> since the last
+          accident.
+        </p>
+      </div>
+      <div className="flex gap-4">
+        <button onClick={() => dispatch({ type: 'increment' })}>
+          Increment
+        </button>
+        <button
+          onClick={() => dispatch({ type: 'decrement' })}
+          disabled={state.count === 0}
+        >
+          Decrement
+        </button>
+        <button
+          onClick={() => dispatch({ type: 'reset' })}
+          disabled={state.count === 0}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
--- a/examples/accident-counter/src/reducer.test.js
+++ b/examples/accident-counter/src/reducer.test.js
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { reducer } from './reducer';
+
+describe('reducer', () => {
+  it('should return the initial state', () => {
+    const initialState = { count: 0 };
+    expect(reducer()).toEqual(initialState);
+  });
+
+  it('should handle decrement action', () => {
+    const initialState = { count: 0 };
+    const action = { type: 'increment' };
+    const expectedState = { count: 1 };
+    expect(reducer(initialState, action)).toEqual(expectedState);
+  });
+
+  it('should handle increment action', () => {
+    const initialState = { count: 1 };
+    const action = { type: 'decrement' };
+    const expectedState = { count: 0 };
+    expect(reducer(initialState, action)).toEqual(expectedState);
+  });
+
+  it('should handle unknown action', () => {
+    const initialState = { count: 0 };
+    const action = { type: 'UNKNOWN' };
+    expect(reducer(initialState, action)).toEqual(initialState);
+  });
+});
--- a/examples/accident-counter/src/reducer.ts
+++ b/examples/accident-counter/src/reducer.ts
@@ -0,0 +1,29 @@
+type CounterState = {
+  count: number;
+};
+
+type CounterAction =
+  | { type: 'increment' }
+  | { type: 'decrement' }
+  | { type: 'reset' };
+
+export function reducer(
+  state: CounterState = { count: 0 },
+  action: CounterAction,
+): CounterState {
+  if (!action) return state;
+
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 };
+    case 'decrement':
+      if (state.count > 0) {
+        return { count: state.count - 1 };
+      }
+      return { count: 0 };
+    case 'reset':
+      return { count: 0 };
+    default:
+      return state;
+  }
+}
--- a/examples/accident-counter/styles.css
+++ b/examples/accident-counter/styles.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-slate-300;
+  }
+
+  button {
+    @apply bg-cyan-600 text-white cursor-pointer inline-flex items-center justify-center transition duration-100 ease-in-out px-4 py-2.5 hover:bg-cyan-700 active:bg-cyan-800 rounded-md disabled:bg-slate-200/50 disabled:cursor-not-allowed disabled:text-cyan-600;
+  }
+}
--- a/examples/accident-counter/tailwind.config.js
+++ b/examples/accident-counter/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./**/*.{html,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: '1rem',
+      },
+    },
+  },
+  plugins: [],
+};
--- a/examples/accident-counter/vite.config.ts
+++ b/examples/accident-counter/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
--- a/examples/accident-counter/vitest.config.js
+++ b/examples/accident-counter/vitest.config.js
@@ -0,0 +1,8 @@
+import { mergeConfig } from 'vitest/config';
+import config from './vite.config';
+
+export default mergeConfig(config, {
+  test: {
+    environment: 'happy-dom',
+  },
+});