diff --git a/src/App.tsx b/src/App.tsx index aee81ed..298b346 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,8 +27,11 @@ function App() { }; const onDarkThemeChanged = (isDarkThemeEnabled: boolean) => { - setDarkMode(isDarkThemeEnabled); - theme.darkMode = isDarkThemeEnabled; + // for some reason the event is fired with undefined + if (isDarkThemeEnabled !== undefined) { + setDarkMode(isDarkThemeEnabled); + theme.darkMode = isDarkThemeEnabled; + } }; useEffect(() => { diff --git a/src/__test__/ErrorHandling.test.tsx b/src/__test__/ErrorHandling.test.tsx index 38612ee..a334066 100644 --- a/src/__test__/ErrorHandling.test.tsx +++ b/src/__test__/ErrorHandling.test.tsx @@ -37,4 +37,31 @@ describe('Error handling', () => { expect(result.innerHTML).toEqual('invalid json'); }); }); + + describe('validation disabled', () => { + + it('should not render error when validate json is disabled', async () => { + render(); + + await waitFor(() => { + expect(screen.getByTestId('is-validate-json')).toBeChecked(); + }); + + await userEvent.click(screen.getByText('validate json')); + + await waitFor(() => { + expect(screen.getByTestId('is-validate-json')).not.toBeChecked(); + }); + + const editor = grabCurrentEditor(screen.getByTestId('editor-container')); + + await act(async () => { + await customType(editor, 'bla bla'); + }); + + await waitFor(() => { + expect(screen.queryByTestId('error')).not.toBeInTheDocument(); + }); + }); + }); }); diff --git a/src/__test__/UiElements.test.tsx b/src/__test__/UiElements.test.tsx index 1147614..a67bec1 100644 --- a/src/__test__/UiElements.test.tsx +++ b/src/__test__/UiElements.test.tsx @@ -79,4 +79,11 @@ describe('UI elements', () => { expect(screen.queryByTestId('app-container')).not.toHaveClass('dark'); }); + + it('should render validate json checkbox', () => { + render(); + + expect(screen.getByText('validate json')).toBeInTheDocument(); + expect(screen.getByTestId('is-validate-json')).toBeChecked(); + }); }); diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index a3b75ac..a76cb3f 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -4,7 +4,7 @@ import Switch from 'react-switch'; import fullConfig from '../../tailwindResolver'; interface Props { - onDarkModeChanged: any + onDarkModeChanged: (checked: boolean) => void; darkModeEnabled: boolean } diff --git a/src/pages/Editors.tsx b/src/pages/Editors.tsx index 23bea00..82a1baa 100644 --- a/src/pages/Editors.tsx +++ b/src/pages/Editors.tsx @@ -23,6 +23,7 @@ const code = ` const value = event.data.jsonAsString; const spacing = event.data.spacing; + const isValidateEnabled = event.data.isValidateEnabled; if (value) { // eslint-disable-next-line no-undef @@ -33,7 +34,9 @@ const code = ` }); try { - JSON.parse(value); + if (isValidateEnabled) { + JSON.parse(value); + } } catch (e) { console.error('error from worker: ', e); postMessage({ error: true, originalJson: value, result: format.result }); @@ -51,6 +54,7 @@ const code = ` export default function Editors({ onPersist, currentJson }: EditorsPageProps) { const worker = useRef(); + const [isValidateEnabled, setValidateEnabled] = useState(true); const [inProgress, setInProgress] = useState(false); const [originalJson, setOriginalResult] = useState(currentJson); const [result, setResult] = useState(''); @@ -80,7 +84,7 @@ export default function Editors({ onPersist, currentJson }: EditorsPageProps) { const onChange = (eventValue: string, eventSpacing: string) =>{ if (worker.current) { - worker.current.postMessage({ jsonAsString: eventValue, spacing: eventSpacing }); + worker.current.postMessage({ jsonAsString: eventValue, spacing: eventSpacing, isValidateEnabled }); } setOriginalResult(eventValue); setInProgress(true); @@ -124,8 +128,12 @@ export default function Editors({ onPersist, currentJson }: EditorsPageProps) { onChange(originalJson, newSpacing); }; - + // console.log(isValidateEnabled); return
+ + setValidateEnabled(!isValidateEnabled)} + data-testid="is-validate-json" checked={isValidateEnabled}/> +
{inProgress ? - + : null}
@@ -169,7 +177,7 @@ export default function Editors({ onPersist, currentJson }: EditorsPageProps) {
- {error &&

{error}

} + {isValidateEnabled && error &&

{error}

}
; }