From 5aa34586265ac9b10effff11badeb87369bc864e Mon Sep 17 00:00:00 2001
From: Robin van Zanten <38441984+RCVZ@users.noreply.github.com>
Date: Thu, 29 Apr 2021 11:33:32 +0200
Subject: [PATCH] feat(project): add root component

---
 src/components/Root/Root.test.tsx             | 22 +++++++++++++
 src/components/Root/Root.tsx                  | 32 +++++++++++++------
 .../Root/__snapshots__/Root.test.tsx.snap     | 11 +++++++
 3 files changed, 56 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Root/Root.test.tsx
 create mode 100644 src/components/Root/__snapshots__/Root.test.tsx.snap

diff --git a/src/components/Root/Root.test.tsx b/src/components/Root/Root.test.tsx
new file mode 100644
index 000000000..fa41d0ba0
--- /dev/null
+++ b/src/components/Root/Root.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { mockWindowLocation, render } from '../../testUtils';
+
+import Root from './Root';
+
+describe('<Root />', () => {
+  it('renders and matches snapshot', () => {
+    mockWindowLocation('/');
+    const { container } = render(<Root />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders error page when error prop is passed', () => {
+    mockWindowLocation('/');
+    const error = new Error();
+    const { container } = render(<Root error={error} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
index efd53f7ea..60818679e 100644
--- a/src/components/Root/Root.tsx
+++ b/src/components/Root/Root.tsx
@@ -1,29 +1,43 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-// import styles from './Root.module.scss';
+import Home from '../../screens/Home/Home';
+import Header from '../Header/Header';
 
-const Home = () => {
-  return <span>Home</span>;
-};
+// Mock screens
 
 const PlaylistScreen = () => {
-  return <span>PlaylistScreen</span>;
+  return (
+    <>
+      <Header></Header>
+      <span style={{ color: 'white' }}>PlaylistScreen</span>
+    </>
+  );
+};
+const Settings = () => {
+  return (
+    <>
+      <Header></Header> <span style={{ color: 'white' }}>Settings</span>{' '}
+    </>
+  );
 };
 
-interface RootProps {
-  error: Error | null;
-}
+// Mock screens
+
+type RootProps = {
+  error?: Error | null;
+};
 
 const Root: FC<RootProps> = ({ error }: RootProps) => {
   if (error) {
-    return <span>{error}</span>;
+    return <div>Error!</div>;
   }
 
   return (
     <Switch>
       <Route path="/" component={Home} exact />
       <Route path="/p/:id" component={PlaylistScreen} exact />
+      <Route path="/u" component={Settings} exact />
     </Switch>
   );
 };
diff --git a/src/components/Root/__snapshots__/Root.test.tsx.snap b/src/components/Root/__snapshots__/Root.test.tsx.snap
new file mode 100644
index 000000000..955f450d4
--- /dev/null
+++ b/src/components/Root/__snapshots__/Root.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Root /> renders and matches snapshot 1`] = `<div />`;
+
+exports[`<Root /> renders error page when error prop is passed 1`] = `
+<div>
+  <div>
+    Error!
+  </div>
+</div>
+`;