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

Run Prettier

Browse Source
This commit is contained in:
Steve Kinney
2024-09-18 08:00:07 -06:00
parent d4a9c0431b
commit e7496860b9
11 changed files with 43 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/accident-counter/index.html
View File

@@ -11,7 +11,7 @@
createRoot(document.getElementById('root')).render(createElement(Counter));
</script>
<body class="container flex items-center justify-center min-h-screen">
<body class="container flex min-h-screen items-center justify-center">
<div class="" id="root"></div>
</body>
</html>

18
examples/accident-counter/src/counter.test.jsx
View File

@@ -21,7 +21,7 @@ describe('Counter Component', () => {
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
await userEvent.click(incrementButton); // Using userEvent for a real click event
const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('1');
@@ -29,7 +29,7 @@ describe('Counter Component', () => {
it('displays "day" when the count is 1', async () => {
const incrementButton = screen.getByText('Increment');
await userEvent.click(incrementButton); // Increment the count
await userEvent.click(incrementButton); // Increment the count
const unitElement = screen.getByTestId('counter-unit');
expect(unitElement).toHaveTextContent('day');
@@ -39,8 +39,8 @@ describe('Counter Component', () => {
const incrementButton = screen.getByText('Increment');
const decrementButton = screen.getByText('Decrement');
await userEvent.click(incrementButton); // Increment first
await userEvent.click(decrementButton); // Then decrement
await userEvent.click(incrementButton); // Increment first
await userEvent.click(decrementButton); // Then decrement
const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0');
@@ -48,7 +48,7 @@ describe('Counter Component', () => {
it('does not allow decrementing below 0', async () => {
const decrementButton = screen.getByText('Decrement');
await userEvent.click(decrementButton); // Should not decrement below 0
await userEvent.click(decrementButton); // Should not decrement below 0
const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0');
@@ -58,8 +58,8 @@ describe('Counter Component', () => {
const incrementButton = screen.getByText('Increment');
const resetButton = screen.getByText('Reset');
await userEvent.click(incrementButton); // Increment first
await userEvent.click(resetButton); // Then reset
await userEvent.click(incrementButton); // Increment first
await userEvent.click(resetButton); // Then reset
const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0');
@@ -78,8 +78,8 @@ describe('Counter Component', () => {
await userEvent.click(incrementButton);
expect(document.title).toBe('1 day');
await userEvent.click(incrementButton);
expect(document.title).toBe('2 days');
});
});
});

4
examples/accident-counter/src/counter.tsx
View File

@@ -10,9 +10,9 @@ export const Counter = () => {
}, [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-8 rounded-md border border-slate-400 bg-white p-8 text-center shadow-lg">
<div className="space-y-4">
<div data-testid="counter-count" className="font-semibold text-8xl">
<div data-testid="counter-count" className="text-8xl font-semibold">
{state.count}
</div>
<p>

2
examples/accident-counter/styles.css
View File

@@ -8,6 +8,6 @@
}
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;
@apply inline-flex cursor-pointer items-center justify-center rounded-md bg-cyan-600 px-4 py-2.5 text-white transition duration-100 ease-in-out hover:bg-cyan-700 active:bg-cyan-800 disabled:cursor-not-allowed disabled:bg-slate-200/50 disabled:text-cyan-600;
}
}