Display validation errors (#13)

src/ClientApp.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import resume from '../resume.json';
+import { ClientApp } from './ClientApp';
+
+describe('<ClientApp />', () => {
+  it('renders errors', () => {
+    render(
+      <ClientApp
+        resume={{
+          ...resume,
+          basics: {
+            ...resume.basics,
+            url: '',
+          },
+        }}
+      />
+    );
+    expect(screen.getByText('resume.json is invalid')).toBeInTheDocument();
+    expect(screen.getByText(/invalid_string/)).toBeInTheDocument();
+  });
+
+  it('renders resume', () => {
+    render(<ClientApp resume={resume} />);
+    expect(screen.getByText('Pässi Villanen')).toBeInTheDocument();
+  });
+});

src/ClientApp.tsx

@@ -0,0 +1,17 @@
+import { FC, StrictMode } from 'react';
+import { Resume } from './Resume';
+import { Error } from './components/Error';
+import { resumeSchema } from './schema';
+
+export const ClientApp: FC<{ resume: unknown }> = ({ resume }) => {
+  const parsedResume = resumeSchema.safeParse(resume);
+  return (
+    <StrictMode>
+      {parsedResume.success ? (
+        <Resume resume={parsedResume.data} />
+      ) : (
+        <Error errors={parsedResume.error} />
+      )}
+    </StrictMode>
+  );
+};

src/Resume.tsx

@@ -7,7 +7,6 @@ import { Projects } from './components/Projects';
 import { SkillsAndLanguages } from './components/SkillsAndLanguages';
 import { Work } from './components/Work';
 import { ResumeSchema } from './schema';
-import { GlobalStyle } from './styles/GlobalStyle';
 
 interface Props {
   resume: ResumeSchema;
@@ -16,7 +15,6 @@ interface Props {
 export const Resume: FC<Props> = ({ resume }) => {
   return (
     <Layout>
-      <GlobalStyle />
       <Header basics={resume.basics} />
       <Work work={resume.work} />
       <Projects projects={resume.projects} />

src/client.tsx

@@ -1,18 +1,7 @@
-import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import resume from '../resume.json';
-import { Resume } from './Resume';
-import { resumeSchema } from './schema';
-
-const App = () => {
-  const parsedResume = resumeSchema.parse(resume);
-  return (
-    <StrictMode>
-      <Resume resume={parsedResume} />
-    </StrictMode>
-  );
-};
+import { ClientApp } from './ClientApp';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <App />
+  <ClientApp resume={resume} />
 );

src/components/Error.tsx

@@ -0,0 +1,36 @@
+import { ZodError } from 'zod';
+import { Layout } from './Layout';
+import styled from 'styled-components';
+import { FC } from 'react';
+
+export const Error: FC<{ errors: ZodError }> = ({ errors }) => {
+  return (
+    <Layout>
+      <h1>resume.json is invalid</h1>
+      <List>
+        {errors.errors.map((error) => (
+          <ListItem key={error.path.join(', ')}>
+            <h2>{error.message}</h2>
+            <div>
+              {error.code} at{' '}
+              {error.path.map((error) => `"${error}"`).join(' > ')}
+            </div>
+          </ListItem>
+        ))}
+      </List>
+    </Layout>
+  );
+};
+
+const List = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const ListItem = styled.li`
+  margin-top: 48px;
+  div {
+    margin-left: 16px;
+  }
+`;

src/components/Layout.tsx

@@ -1,8 +1,14 @@
 import { FC, PropsWithChildren } from 'react';
 import styled from 'styled-components';
+import { GlobalStyle } from '../styles/GlobalStyle';
 
 export const Layout: FC<PropsWithChildren> = ({ children }) => {
-  return <Container>{children}</Container>;
+  return (
+    <Container>
+      <GlobalStyle />
+      {children}
+    </Container>
+  );
 };
 
 const Container = styled.div`

vitest.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   plugins: [react()],
   test: {
     globals: true,
-    exclude: [...configDefaults.exclude],
+    exclude: [...configDefaults.exclude, 'index.js'],
     environment: 'jsdom',
     setupFiles: './test/setup.ts',
     coverage: {
@@ -16,6 +16,7 @@ export default defineConfig({
         '**/*.test.*',
         '**/*/coverage',
         '**/*/client.tsx',
+        'index.js',
       ],
       provider: 'c8',
     },