Mini challenge 2

.prettierrc

@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "tabWidth": 2,
+  "tabWidth": 4,
   "printWidth": 90,
   "semi": true,
   "singleQuote": true,

package.json

@@ -10,12 +10,14 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "npm run test -- --coverage --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -32,7 +34,11 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "@testing-library/react-hooks": "^3.4.1",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-fetch-mock": "^3.0.3",
+    "react-test-renderer": "^16.13.1"
   },
   "browserslist": {
     "production": [
@@ -57,5 +63,11 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/index.js"
+    ]
   }
 }

src/components/App/App.component.jsx

@@ -1,58 +1,41 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-import AuthProvider from '../../providers/Auth';
+import React, { useState } from 'react';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import HomePage from '../../pages/Home';
-import LoginPage from '../../pages/Login';
-import NotFound from '../../pages/NotFound';
-import SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
-import Layout from '../Layout';
-import { random } from '../../utils/fns';
+import Button from '../Button';
 
-function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
+const lightTheme = {
+    bg: '#fff',
+    text: '#121212',
+};
 
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
+const darkTheme = {
+    bg: '#121212',
+    text: '#fff',
+};
 
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
+const GlobalStyles = createGlobalStyle`body{
+  color: ${(props) => props.theme.text};
+  background-color: ${(props) => props.theme.bg};
+  transition: 0.5s;
+}`;
 
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
+function App() {
+    const [mode, setMode] = useState('light');
 
-  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
-      </AuthProvider>
-    </BrowserRouter>
-  );
+    return (
+        <ThemeProvider theme={mode === 'light' ? lightTheme : darkTheme}>
+            <GlobalStyles />
+            <Button
+                size="10px"
+                onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+            >
+                Change Theme
+            </Button>
+            <div id="home-section">
+                <HomePage />
+            </div>
+        </ThemeProvider>
+    );
 }
 
 export default App;

src/components/App/App.component.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen, queryByAttribute } from '@testing-library/react';
+import App from '.';
+
+describe('App Component tests', () => {
+    it('App Contains change theme defined', () => {
+        render(<App />);
+        expect(screen.getByText('Change Theme')).toBeDefined();
+    });
+    it('App Contains home section defined', () => {
+        const getById = queryByAttribute.bind(null, 'id');
+        const dom = render(<App />);
+        expect(getById(dom.container, 'home-section')).toBeDefined();
+    });
+});

src/components/Button/Button.jsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+    background: transparent;
+    border: none;
+    font-size: ${(props) => props.size};
+    cursor: pointer;
+    color: #919191;
+`;
+
+export default Button;

src/components/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

src/components/Emoji/Emoji.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Emoji = (props) => (
+    <span
+        className="emoji"
+        role="img"
+        aria-label={props.label ? props.label : ''}
+        aria-hidden={props.label ? 'false' : 'true'}
+    >
+        {props.symbol}
+    </span>
+);
+
+export default Emoji;

src/components/Emoji/Emoji.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Emoji from '.';
+
+describe('Emoji Component tests', () => {
+    it('Emoji span Contains the right emoji', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍')).toBeDefined();
+    });
+    it('Emoji span shoul be span', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍').tagName).toBe('SPAN');
+    });
+});

src/components/Emoji/index.js

@@ -0,0 +1 @@
+export { default } from './Emoji';