chore: small cleanup

tjmaynes · Jun 25, 2024 · ca6a009 · ca6a009
1 parent 0f9ae23
commit ca6a009
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
@@ -18,7 +18,15 @@ test.describe('when a user navigates to the homepage', () => {
     await expect(page.getByLabel('Pretty')).toBeDisabled()
     await expect(page.getByLabel('Compress')).toBeDisabled()
     await expect(page.getByLabel('Copy')).toBeDisabled()
-    await expect(page.getByLabel('Clear')).toBeVisible()
+    await expect(page.getByLabel('Clear')).toBeDisabled()
+  })
+
+  test('clear is enabled when a single character is typed', async ({
+    page,
+  }) => {
+    await page.getByPlaceholder('Type or paste your json here...').fill('h')
+
+    await expect(page.getByLabel('Clear')).not.toBeDisabled()
   })
 
   getJsonExamples().forEach(({ text, description, isValid }) => {

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,7 +3,7 @@ import { SimpleJsonEditor } from '@/components'
 const App = () => {
   return (
     <div className="grid grid-flow-row">
-      <header>Json Validator</header>
+      <header>JSON Validator</header>
       <SimpleJsonEditor />
       <footer>TJ Maynes</footer>
     </div>

diff --git a/src/components/SimpleJsonEditor.tsx b/src/components/SimpleJsonEditor.tsx
@@ -126,18 +126,20 @@ export const SimpleJsonEditor = () => {
   const onCopyButtonClickedHandler = useCallback(() => {
     navigator.clipboard.writeText(state.value)
 
-    toast.success('Copied to clipboard!')
+    toast('Copied to clipboard!', { icon: '✍' })
   }, [state])
 
   const onClearButtonClickedHandler = useCallback(() => {
     dispatch({
       action: SimpleJsonEditorActions.ON_CLEAR_BUTTON_CLICK,
     })
+
+    toast('Boom!', { icon: '💣' })
   }, [])
 
   return (
     <div className="flex flex-col w-full h-full bg-amber-200 p-10">
-      <p className="mb-7 text-center text-6xl">{emoji}</p>
+      <p className="mb-7 text-center text-7xl">{emoji}</p>
       <JsonEditor
         placeholder="Type or paste your json here..."
         value={state.value}
@@ -149,9 +151,9 @@ export const SimpleJsonEditor = () => {
         }
         cssAttributes={{ borderColor: color }}
       />
-      <div className="grid grid-flow-row sm:grid-flow-col gap-4 sm:max-w-[400px] my-4">
+      <div className="grid grid-flow-row sm:grid-flow-col gap-4 sm:max-w-[500px] my-4">
         <SimpleJsonEditorButton
-          text="Pretty"
+          text="Pretty print"
           disabled={state.state !== SimpleJsonEditorStates.VALID}
           onClick={() => onPrettyButtonClickedHandler()}
         />
@@ -167,7 +169,7 @@ export const SimpleJsonEditor = () => {
         />
         <SimpleJsonEditorButton
           text="Clear"
-          disabled={false}
+          disabled={state.value.length <= 0}
           onClick={() => onClearButtonClickedHandler()}
         />
       </div>