feat(project): add root component

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();
+  });
+});

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>
   );
 };

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>
+`;