cerchez07/introduction-to-testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add counter example; fix configuration

Browse Source
This commit is contained in:
Steve Kinney
2024-09-16 15:44:34 -06:00
parent 1747f705a6
commit b13029bffc
15 changed files with 813 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
examples/accident-counter/README.md Normal file
View File

20
examples/accident-counter/index.html Normal file
View File

@@ -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>

34
examples/accident-counter/package.json Normal file
View File

@@ -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"
}
}

7
examples/accident-counter/postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
export default {
plugins: {
'@tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
};

42
examples/accident-counter/src/counter.tsx Normal file
View File

@@ -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>
);
};

29
examples/accident-counter/src/reducer.test.js Normal file
View File

@@ -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);
});
});

29
examples/accident-counter/src/reducer.ts Normal file
View File

@@ -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;
}
}

13
examples/accident-counter/styles.css Normal file
View File

@@ -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;
}
}

13
examples/accident-counter/tailwind.config.js Normal file
View File

@@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {
container: {
center: true,
padding: '1rem',
},
},
},
plugins: [],
};

6
examples/accident-counter/vite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});

8
examples/accident-counter/vitest.config.js Normal file
View File

@@ -0,0 +1,8 @@
import { mergeConfig } from 'vitest/config';
import config from './vite.config';
export default mergeConfig(config, {
test: {
environment: 'happy-dom',
},
});

2
examples/characters/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "basic-math",
"name": "characters",
"version": "1.0.0",
"description": "Let's talk about adding and subtracting numbers.",
"main": "src/index.js",