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)); createRoot(document.getElementById('root')).render(createElement(Counter));
</script> </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> <div class="" id="root"></div>
</body> </body>
</html> </html>

14
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 () => { it('increments the count when the "Increment" button is clicked', async () => {
const incrementButton = screen.getByText('Increment'); 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'); const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('1'); expect(countElement).toHaveTextContent('1');
@@ -29,7 +29,7 @@ describe('Counter Component', () => {
it('displays "day" when the count is 1', async () => { it('displays "day" when the count is 1', async () => {
const incrementButton = screen.getByText('Increment'); 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'); const unitElement = screen.getByTestId('counter-unit');
expect(unitElement).toHaveTextContent('day'); expect(unitElement).toHaveTextContent('day');
@@ -39,8 +39,8 @@ describe('Counter Component', () => {
const incrementButton = screen.getByText('Increment'); const incrementButton = screen.getByText('Increment');
const decrementButton = screen.getByText('Decrement'); const decrementButton = screen.getByText('Decrement');
await userEvent.click(incrementButton); // Increment first await userEvent.click(incrementButton); // Increment first
await userEvent.click(decrementButton); // Then decrement await userEvent.click(decrementButton); // Then decrement
const countElement = screen.getByTestId('counter-count'); const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0'); expect(countElement).toHaveTextContent('0');
@@ -48,7 +48,7 @@ describe('Counter Component', () => {
it('does not allow decrementing below 0', async () => { it('does not allow decrementing below 0', async () => {
const decrementButton = screen.getByText('Decrement'); 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'); const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0'); expect(countElement).toHaveTextContent('0');
@@ -58,8 +58,8 @@ describe('Counter Component', () => {
const incrementButton = screen.getByText('Increment'); const incrementButton = screen.getByText('Increment');
const resetButton = screen.getByText('Reset'); const resetButton = screen.getByText('Reset');
await userEvent.click(incrementButton); // Increment first await userEvent.click(incrementButton); // Increment first
await userEvent.click(resetButton); // Then reset await userEvent.click(resetButton); // Then reset
const countElement = screen.getByTestId('counter-count'); const countElement = screen.getByTestId('counter-count');
expect(countElement).toHaveTextContent('0'); expect(countElement).toHaveTextContent('0');

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

@@ -10,9 +10,9 @@ export const Counter = () => {
}, [state.count]); }, [state.count]);
return ( 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 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} {state.count}
</div> </div>
<p> <p>

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

@@ -8,6 +8,6 @@
} }
button { 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;
} }
} }

12
examples/calculator/styles.css
View File

@@ -4,21 +4,21 @@
@layer base { @layer base {
body { body {
@apply flex justify-center items-center h-screen bg-purple-50 font-sans m-0; @apply m-0 flex h-screen items-center justify-center bg-purple-50 font-sans;
} }
button { button {
@apply bg-slate-600 text-white text-xl cursor-pointer flex items-center justify-center transition duration-100 ease-in-out p-4 hover:bg-slate-700 active:bg-slate-800 rounded-xl; @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
} }
} }
@layer components { @layer components {
.calculator { .calculator {
@apply grid grid-cols-4 gap-2 bg-slate-950 rounded-xl shadow-lg p-4; @apply grid grid-cols-4 gap-2 rounded-xl bg-slate-950 p-4 shadow-lg;
} }
.number { .number {
@apply bg-slate-600 text-white text-xl cursor-pointer flex items-center justify-center transition duration-100 ease-in-out p-4 hover:bg-slate-700 active:bg-slate-800 rounded-xl; @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
&[data-value='0'] { &[data-value='0'] {
@apply col-span-3; @apply col-span-3;
} }
@@ -29,7 +29,7 @@
} }
#equals { #equals {
@apply bg-green-500 hover:bg-green-600 active:bg-green-700 col-start-3 col-span-2; @apply col-span-2 col-start-3 bg-green-500 hover:bg-green-600 active:bg-green-700;
} }
#clear { #clear {
@@ -37,6 +37,6 @@
} }
.display { .display {
@apply col-span-4 bg-cyan-100 text-cyan-800 border-cyan-200 outline outline-2 outline-transparent text-2xl text-right p-4 block font-semibold rounded-md; @apply col-span-4 block rounded-md border-cyan-200 bg-cyan-100 p-4 text-right text-2xl font-semibold text-cyan-800 outline outline-2 outline-transparent;
} }
} }

2
examples/task-list/src/components/application.tsx
View File

@@ -5,7 +5,7 @@ import { Tasks } from './tasks';
export const Application = () => { export const Application = () => {
return ( return (
<TaskProvider> <TaskProvider>
<main className="container max-w-xl my-10 space-y-8"> <main className="container my-10 max-w-xl space-y-8">
<CreateTask onSubmit={(title) => console.log(title)} /> <CreateTask onSubmit={(title) => console.log(title)} />
<Tasks /> <Tasks />
</main> </main>

4
examples/task-list/src/components/date-time.tsx
View File

@@ -16,8 +16,8 @@ export const DateTime = ({
}) => { }) => {
if (typeof date === 'string') date = new Date(date); if (typeof date === 'string') date = new Date(date);
return ( return (
<div className={merge('overflow-x-hidden space-x-2 text-xs', className)}> <div className={merge('space-x-2 overflow-x-hidden text-xs', className)}>
<span className="font-semibold after:content-[':'] after:text-slate-700 text-primary-800 dark:text-primary-200 dark:after:text-slate-300"> <span className="text-primary-800 dark:text-primary-200 font-semibold after:text-slate-700 after:content-[':'] dark:after:text-slate-300">
{title} {title}
</span> </span>
<span className="whitespace-pre">{formatDate.format(date)}</span> <span className="whitespace-pre">{formatDate.format(date)}</span>

12
examples/task-list/src/components/task.tsx
View File

@@ -11,7 +11,7 @@ export const Task = memo(({ task }: TaskProps) => {
const { updateTask, removeTask } = useTaskActions(); const { updateTask, removeTask } = useTaskActions();
return ( return (
<li className="block p-4 space-y-2 border-t first:rounded-t-md border-x last:border-b last:rounded-b-md dark:border-slate-700 border-slate-300"> <li className="block space-y-2 border-x border-t border-slate-300 p-4 first:rounded-t-md last:rounded-b-md last:border-b dark:border-slate-700">
<header className="flex flex-row items-center gap-4"> <header className="flex flex-row items-center gap-4">
<label htmlFor={`toggle-${task.id}`} className="sr-only"> <label htmlFor={`toggle-${task.id}`} className="sr-only">
Mark Task as {task.completed ? 'Incomplete' : 'Complete'} Mark Task as {task.completed ? 'Incomplete' : 'Complete'}
@@ -19,7 +19,7 @@ export const Task = memo(({ task }: TaskProps) => {
<input <input
id={`toggle-${task.id}`} id={`toggle-${task.id}`}
type="checkbox" type="checkbox"
className="block w-6 h-6" className="block h-6 w-6"
checked={task.completed} checked={task.completed}
onChange={() => updateTask(task.id, { completed: !task.completed })} onChange={() => updateTask(task.id, { completed: !task.completed })}
/> />
@@ -31,11 +31,11 @@ export const Task = memo(({ task }: TaskProps) => {
❌ ❌
</button> </button>
</header> </header>
<label className="text-xs grid grid-cols-[1.25rem_1fr] gap-1 cursor-pointer rounded-md bg-primary-50 dark:bg-slate-800 border-2 border-primary-100 dark:border-slate-900 p-2"> <label className="bg-primary-50 border-primary-100 grid cursor-pointer grid-cols-[1.25rem_1fr] gap-1 rounded-md border-2 p-2 text-xs dark:border-slate-900 dark:bg-slate-800">
<input type="checkbox" className="sr-only peer" /> <input type="checkbox" className="peer sr-only" />
<ChevronRightCircle className="block w-4 h-4 transition-transform peer-checked:rotate-90" /> <ChevronRightCircle className="block h-4 w-4 transition-transform peer-checked:rotate-90" />
<h3 className="select-none">Metadata</h3> <h3 className="select-none">Metadata</h3>
<div className="hidden col-span-2 gap-2 peer-checked:flex"> <div className="col-span-2 hidden gap-2 peer-checked:flex">
<DateTime date={task.createdAt} title="Created" /> <DateTime date={task.createdAt} title="Created" />
<DateTime date={task.lastModified} title="Modified" /> <DateTime date={task.lastModified} title="Modified" />
</div> </div>

16
examples/task-list/styles.css
View File

@@ -14,21 +14,21 @@
input[type='text'], input[type='text'],
input[type='email'], input[type='email'],
input[type='password'] { input[type='password'] {
@apply text-sm sm:text-base block w-full rounded-md border-0 py-1.5 px-2.5 shadow-sm ring-1 ring-inset ring-primary-600 placeholder:text-primary-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-50 dark:placeholder:text-slate-400; @apply ring-primary-600 placeholder:text-primary-600 block w-full rounded-md border-0 px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-inset sm:text-base sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-50 dark:placeholder:text-slate-400;
@apply focus:ring-2 focus:outline-none; @apply focus:outline-none focus:ring-2;
&:has(+ button[type='submit']) { &:has(+ button[type='submit']) {
@apply block w-full rounded-r-none; @apply block w-full rounded-r-none;
} }
} }
input[type='checkbox'] { input[type='checkbox'] {
@apply h-4 w-4 rounded border-primary-500 accent-primary-600 dark:bg-slate-800 dark:border-slate-700 dark:accent-primary-600; @apply border-primary-500 accent-primary-600 dark:accent-primary-600 h-4 w-4 rounded dark:border-slate-700 dark:bg-slate-800;
} }
button { button {
@apply button; @apply button;
input + & { input + & {
@apply rounded-l-none -ml-px; @apply -ml-px rounded-l-none;
} }
&[type='submit'] { &[type='submit'] {
@apply button-primary; @apply button-primary;
@@ -38,19 +38,19 @@
@layer components { @layer components {
.button { .button {
@apply relative inline-flex items-center justify-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-primary-300 hover:bg-slate-50 whitespace-pre disabled:cursor-not-allowed text-sm sm:text-base; @apply ring-primary-300 relative inline-flex items-center justify-center gap-x-1.5 whitespace-pre rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset hover:bg-slate-50 disabled:cursor-not-allowed sm:text-base;
} }
.button-primary { .button-primary {
@apply bg-primary-600 text-white cursor-pointer ring-primary-600 transition duration-100 ease-in-out hover:bg-primary-700 active:bg-primary-800 disabled:bg-primary-600/50 disabled:hover:bg-primary-600/50 disabled:active:bg-primary-600/50 disabled:cursor-not-allowed; @apply bg-primary-600 ring-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:bg-primary-600/50 disabled:hover:bg-primary-600/50 disabled:active:bg-primary-600/50 cursor-pointer text-white transition duration-100 ease-in-out disabled:cursor-not-allowed;
} }
.button-small { .button-small {
@apply py-1 px-1.5 text-xs; @apply px-1.5 py-1 text-xs;
} }
.button-destructive { .button-destructive {
@apply bg-red-600 text-white cursor-pointer ring-0 transition duration-100 ease-in-out hover:bg-red-700 active:bg-red-800 disabled:bg-red-600/50 disabled:hover:bg-red-600/50 disabled:active:bg-red-600/50 disabled:cursor-not-allowed disabled:ring-red-700/20; @apply cursor-pointer bg-red-600 text-white ring-0 transition duration-100 ease-in-out hover:bg-red-700 active:bg-red-800 disabled:cursor-not-allowed disabled:bg-red-600/50 disabled:ring-red-700/20 disabled:hover:bg-red-600/50 disabled:active:bg-red-600/50;
&.button-ghost { &.button-ghost {
@apply bg-transparent text-red-600 ring-red-600 hover:bg-red-600/10 active:bg-red-600/20 dark:hover:bg-red-400/30 dark:active:bg-red-400/40; @apply bg-transparent text-red-600 ring-red-600 hover:bg-red-600/10 active:bg-red-600/20 dark:hover:bg-red-400/30 dark:active:bg-red-400/40;
} }

2
packages/css-configuration/index.d.ts vendored
View File

@@ -1,4 +1,4 @@
/** /**
* @type import('vite').UserConfig['css'] * @type import('vite').UserConfig['css']
*/ */
export const css: import("vite").UserConfig["css"]; export const css: import('vite').UserConfig['css'];

8
packages/utilities/index.d.ts vendored
View File

@@ -1,3 +1,7 @@
export type RequireOnly<T, Keys extends keyof T = keyof T> = Partial<T> & Required<Pick<T, Keys>>; export type RequireOnly<T, Keys extends keyof T = keyof T> = Partial<T> &
Required<Pick<T, Keys>>;
export declare const isError: (error: unknown) => error is Error; export declare const isError: (error: unknown) => error is Error;
export declare const getErrorMessage: (error: unknown, defaultMessage: string) => string; export declare const getErrorMessage: (
error: unknown,
defaultMessage: string,
) => string;