From a8b259f71b3b48d6bccc9e78ddf819bd94fcb32a Mon Sep 17 00:00:00 2001 From: cylcrow Date: Fri, 19 Feb 2021 14:35:51 -0600 Subject: [PATCH 01/19] :white_check_mark: :heavy_plus_sign: :art: :fire: Fork, cleanup and first tests and component's creation - Removed unnecessary files - Added first tests - Added first components - Added dependencies for testing --- .eslintrc | 2 +- package.json | 8 +- src/components/App/App.component.jsx | 56 +- src/components/App/App.test.jsx | 40 + .../App/__snapshots__/App.test.jsx.snap | 3 + src/components/Fortune/Fortune.component.jsx | 12 - src/components/Fortune/Fortune.styles.css | 5 - src/components/Fortune/index.js | 1 - src/components/Layout/Layout.component.jsx | 9 - src/components/Layout/Layout.styles.css | 9 - src/components/Layout/LayoutWrapper.jsx | 14 + src/components/Layout/LayoutWrapper.test.jsx | 42 ++ src/components/Layout/MainContent.jsx | 7 + src/components/Layout/Navbar.jsx | 7 + .../__snapshots__/LayoutWrapper.test.jsx.snap | 10 + src/components/Layout/index.js | 4 +- src/components/Private/Private.component.jsx | 14 - src/components/Private/index.js | 1 - src/global.css | 52 +- src/pages/Home/Home.page.jsx | 39 - src/pages/Home/Home.styles.css | 8 - src/pages/Home/index.js | 1 - src/pages/Login/Login.page.jsx | 39 - src/pages/Login/Login.styles.css | 47 -- src/pages/Login/index.js | 1 - src/pages/NotFound/NotFound.page.jsx | 17 - src/pages/NotFound/NotFound.styles.css | 13 - src/pages/NotFound/index.js | 1 - src/pages/Secret/Secret.page.jsx | 24 - src/pages/Secret/index.js | 1 - src/providers/Auth/Auth.provider.jsx | 44 -- src/providers/Auth/index.js | 1 - src/utils/constants.js | 3 - src/utils/fns.js | 5 - src/utils/hooks/useFortune.js | 31 - src/utils/storage.js | 17 - src/utils/testing.js | 4 + yarn.lock | 704 +++++++++++++++++- 38 files changed, 840 insertions(+), 456 deletions(-) create mode 100644 src/components/App/App.test.jsx create mode 100644 src/components/App/__snapshots__/App.test.jsx.snap delete mode 100644 src/components/Fortune/Fortune.component.jsx delete mode 100644 src/components/Fortune/Fortune.styles.css delete mode 100644 src/components/Fortune/index.js delete mode 100644 src/components/Layout/Layout.component.jsx delete mode 100644 src/components/Layout/Layout.styles.css create mode 100644 src/components/Layout/LayoutWrapper.jsx create mode 100644 src/components/Layout/LayoutWrapper.test.jsx create mode 100644 src/components/Layout/MainContent.jsx create mode 100644 src/components/Layout/Navbar.jsx create mode 100644 src/components/Layout/__snapshots__/LayoutWrapper.test.jsx.snap delete mode 100644 src/components/Private/Private.component.jsx delete mode 100644 src/components/Private/index.js delete mode 100644 src/pages/Home/Home.page.jsx delete mode 100644 src/pages/Home/Home.styles.css delete mode 100644 src/pages/Home/index.js delete mode 100644 src/pages/Login/Login.page.jsx delete mode 100644 src/pages/Login/Login.styles.css delete mode 100644 src/pages/Login/index.js delete mode 100644 src/pages/NotFound/NotFound.page.jsx delete mode 100644 src/pages/NotFound/NotFound.styles.css delete mode 100644 src/pages/NotFound/index.js delete mode 100644 src/pages/Secret/Secret.page.jsx delete mode 100644 src/pages/Secret/index.js delete mode 100644 src/providers/Auth/Auth.provider.jsx delete mode 100644 src/providers/Auth/index.js delete mode 100644 src/utils/constants.js delete mode 100644 src/utils/fns.js delete mode 100644 src/utils/hooks/useFortune.js delete mode 100644 src/utils/storage.js create mode 100644 src/utils/testing.js diff --git a/.eslintrc b/.eslintrc index ba178545c..e5e605cd2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,7 @@ "plugins": ["prettier"], "rules": { "prettier/prettier": "error", - "react/jsx-filename-extension": "error", + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], "react-hooks/exhaustive-deps": "warn", "import/no-unresolved": ["off", { "ignore": [".css$"] }], "import/prefer-default-export": "off", diff --git a/package.json b/package.json index 5bc0e0d0d..865e94c84 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,16 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^10.4.9", "@testing-library/user-event": "^12.1.3", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.6", + "enzyme-to-json": "^3.6.1", "react": "^16.13.1", "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", + "react-test-renderer": "^17.0.1", + "styled-components": "^5.2.1" }, "scripts": { "start": "react-scripts start", @@ -30,6 +35,7 @@ "eslint-plugin-react": "^7.20.6", "eslint-plugin-react-hooks": "^4.1.0", "husky": "^4.2.5", + "jest-styled-components": "^7.0.3", "lint-staged": "^10.2.13", "prettier": "^2.1.1", "pretty-quick": "^3.0.0" diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx index e372d6849..62e48d72a 100644 --- a/src/components/App/App.component.jsx +++ b/src/components/App/App.component.jsx @@ -1,58 +1,8 @@ -import React, { useLayoutEffect } from 'react'; -import { BrowserRouter, Switch, Route } from 'react-router-dom'; - -import AuthProvider from '../../providers/Auth'; -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 React from 'react'; +import { LayoutWrapper } from '../Layout'; function App() { - useLayoutEffect(() => { - const { body } = document; - - function rotateBackground() { - const xPercent = random(100); - const yPercent = random(100); - body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`); - } - - const intervalId = setInterval(rotateBackground, 3000); - body.addEventListener('click', rotateBackground); - - return () => { - clearInterval(intervalId); - body.removeEventListener('click', rotateBackground); - }; - }, []); - - return ( - - - - - - - - - - - - - - - - - - - - - - ); + return ; } export default App; diff --git a/src/components/App/App.test.jsx b/src/components/App/App.test.jsx new file mode 100644 index 000000000..d0d5ce5b2 --- /dev/null +++ b/src/components/App/App.test.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import '../../utils/testing'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { shallow } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import { getByTestId } from '@testing-library/react'; +import App from './index'; + +let container; +const build = () => { + render(, container); + return { + LayoutWrapper: () => getByTestId(container, 'layout-wrapper'), + }; +}; + +beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); +}); + +afterEach(() => { + unmountComponentAtNode(container); + container.remove(); + container = null; + return container; +}); + +describe('App layout', () => { + it('renders', () => { + const wrapper = shallow(); + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + it('displays layout wrapper', () => { + const { LayoutWrapper } = build(); + + expect(LayoutWrapper()).toBeInTheDocument(); + }); +}); diff --git a/src/components/App/__snapshots__/App.test.jsx.snap b/src/components/App/__snapshots__/App.test.jsx.snap new file mode 100644 index 000000000..a5531efa6 --- /dev/null +++ b/src/components/App/__snapshots__/App.test.jsx.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`App layout renders 1`] = ``; diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx deleted file mode 100644 index fdd00219c..000000000 --- a/src/components/Fortune/Fortune.component.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { useFortune } from '../../utils/hooks/useFortune'; -import './Fortune.styles.css'; - -function Fortune() { - const { fortune } = useFortune(); - - return {fortune} ; -} - -export default Fortune; diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css deleted file mode 100644 index 360014874..000000000 --- a/src/components/Fortune/Fortune.styles.css +++ /dev/null @@ -1,5 +0,0 @@ -.fortune { - position: fixed; - bottom: 0; - right: 0; -} diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js deleted file mode 100644 index 3e887bf31..000000000 --- a/src/components/Fortune/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Fortune.component'; diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx deleted file mode 100644 index b82ea3517..000000000 --- a/src/components/Layout/Layout.component.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import './Layout.styles.css'; - -function Layout({ children }) { - return
{children}
; -} - -export default Layout; diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css deleted file mode 100644 index e873b7c07..000000000 --- a/src/components/Layout/Layout.styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.container { - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: -3rem; -} diff --git a/src/components/Layout/LayoutWrapper.jsx b/src/components/Layout/LayoutWrapper.jsx new file mode 100644 index 000000000..d89505913 --- /dev/null +++ b/src/components/Layout/LayoutWrapper.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Navbar from './Navbar'; +import MainContent from './MainContent'; + +const LayoutWrapper = () => { + return ( +
+ + +
+ ); +}; + +export default LayoutWrapper; diff --git a/src/components/Layout/LayoutWrapper.test.jsx b/src/components/Layout/LayoutWrapper.test.jsx new file mode 100644 index 000000000..f8edcf073 --- /dev/null +++ b/src/components/Layout/LayoutWrapper.test.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import '../../utils/testing'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { shallow } from 'enzyme'; +import toJson from 'enzyme-to-json'; +import { getByTestId } from '@testing-library/react'; +import LayoutWrapper from './LayoutWrapper'; + +let container; +const build = () => { + render(, container); + return { + Navbar: () => getByTestId(container, 'navbar'), + MainContent: () => getByTestId(container, 'main-content'), + }; +}; + +beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); +}); + +afterEach(() => { + unmountComponentAtNode(container); + container.remove(); + container = null; + return container; +}); + +describe('LayoutWrapper', () => { + it('renders', () => { + const wrapper = shallow(); + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + it('displays Navbar and MainContent', () => { + const { Navbar, MainContent } = build(); + + expect(Navbar()).toBeInTheDocument(); + expect(MainContent()).toBeInTheDocument(); + }); +}); diff --git a/src/components/Layout/MainContent.jsx b/src/components/Layout/MainContent.jsx new file mode 100644 index 000000000..d9c6db3d6 --- /dev/null +++ b/src/components/Layout/MainContent.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const MainContent = () => { + return
I'm your main content
; +}; + +export default MainContent; diff --git a/src/components/Layout/Navbar.jsx b/src/components/Layout/Navbar.jsx new file mode 100644 index 000000000..e7386264b --- /dev/null +++ b/src/components/Layout/Navbar.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Navbar = () => { + return
Hi, I'm a navbar
; +}; + +export default Navbar; diff --git a/src/components/Layout/__snapshots__/LayoutWrapper.test.jsx.snap b/src/components/Layout/__snapshots__/LayoutWrapper.test.jsx.snap new file mode 100644 index 000000000..12534f05d --- /dev/null +++ b/src/components/Layout/__snapshots__/LayoutWrapper.test.jsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LayoutWrapper renders 1`] = ` +
+ + +
+`; diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js index 46c368b74..710f7841b 100644 --- a/src/components/Layout/index.js +++ b/src/components/Layout/index.js @@ -1 +1,3 @@ -export { default } from './Layout.component'; +export { default as LayoutWrapper } from './LayoutWrapper'; +export { default as Navbar } from './Navbar'; +export { default as MainContent } from './MainContent'; diff --git a/src/components/Private/Private.component.jsx b/src/components/Private/Private.component.jsx deleted file mode 100644 index 4298a0cdf..000000000 --- a/src/components/Private/Private.component.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Route, Redirect } from 'react-router-dom'; - -import { useAuth } from '../../providers/Auth'; - -function Private({ children, ...rest }) { - const { authenticated } = useAuth(); - - return ( - (authenticated ? children : )} /> - ); -} - -export default Private; diff --git a/src/components/Private/index.js b/src/components/Private/index.js deleted file mode 100644 index 2252ad618..000000000 --- a/src/components/Private/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Private.component'; diff --git a/src/global.css b/src/global.css index 4feb3c75e..1a5e1c106 100644 --- a/src/global.css +++ b/src/global.css @@ -1,53 +1,3 @@ html { - font-size: 1.125rem; - line-height: 1.6; - font-weight: 400; font-family: sans-serif; - box-sizing: border-box; - scroll-behavior: smooth; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -body { - margin: 0; - padding: 0; - text-rendering: optimizeLegibility; - background-image: linear-gradient( - 120deg, - #eea2a2 0, - #bbc1bf 19%, - #57c6e1 42%, - #b49fda 79%, - #7ac5d8 100% - ); - background-size: 400% 400%; - background-position: var(--bg-position); - transition: background-position 2s ease; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.separator::before { - content: '•'; - color: white; - padding: 0.4rem; -} - -a { - text-decoration: none; - font-weight: bold; - color: white; -} - -a:active { - color: blueviolet; -} - -hr { -} +} \ No newline at end of file diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx deleted file mode 100644 index 08d1dd5c0..000000000 --- a/src/pages/Home/Home.page.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useRef } from 'react'; -import { Link, useHistory } from 'react-router-dom'; - -import { useAuth } from '../../providers/Auth'; -import './Home.styles.css'; - -function HomePage() { - const history = useHistory(); - const sectionRef = useRef(null); - const { authenticated, logout } = useAuth(); - - function deAuthenticate(event) { - event.preventDefault(); - logout(); - history.push('/'); - } - - return ( -
-

Hello stranger!

- {authenticated ? ( - <> -

Good to have you back

- - - ← logout - - - show me something cool → - - - ) : ( - let me in → - )} -
- ); -} - -export default HomePage; diff --git a/src/pages/Home/Home.styles.css b/src/pages/Home/Home.styles.css deleted file mode 100644 index 5e0a702c3..000000000 --- a/src/pages/Home/Home.styles.css +++ /dev/null @@ -1,8 +0,0 @@ -.homepage { - text-align: center; -} - -.homepage h1 { - font-size: 3rem; - letter-spacing: -2px; -} diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js deleted file mode 100644 index e288d0036..000000000 --- a/src/pages/Home/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Home.page'; diff --git a/src/pages/Login/Login.page.jsx b/src/pages/Login/Login.page.jsx deleted file mode 100644 index 89367f276..000000000 --- a/src/pages/Login/Login.page.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { useHistory } from 'react-router'; - -import { useAuth } from '../../providers/Auth'; -import './Login.styles.css'; - -function LoginPage() { - const { login } = useAuth(); - const history = useHistory(); - - function authenticate(event) { - event.preventDefault(); - login(); - history.push('/secret'); - } - - return ( -
-

Welcome back!

-
-
- -
-
- -
- -
-
- ); -} - -export default LoginPage; diff --git a/src/pages/Login/Login.styles.css b/src/pages/Login/Login.styles.css deleted file mode 100644 index d4cfdde73..000000000 --- a/src/pages/Login/Login.styles.css +++ /dev/null @@ -1,47 +0,0 @@ -.login { - width: 300px; -} - -.login h1 { - text-align: center; - letter-spacing: -1px; -} - -.login-form { - display: flex; - flex-direction: column; - align-items: center; -} - -.form-group { - width: 100%; - display: flex; - flex-direction: column; - margin-bottom: 1rem; -} - -.form-group strong { - display: block; - font-weight: 700; - text-transform: capitalize; - margin-bottom: 0.4rem; -} - -.form-group input { - color: white; - font-size: 1.2rem; - width: 100%; - padding: 0.4rem 0.6rem; - border-radius: 3px; - border: 1px solid white; - background-color: rgba(0, 0, 0, 0.1); -} - -.login-form button[type='submit'] { - width: 5rem; - margin-top: 1rem; - padding: 0.4rem 0.6rem; - font-size: 1.2rem; - border: none; - border-radius: 3px; -} diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js deleted file mode 100644 index c9af65e37..000000000 --- a/src/pages/Login/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Login.page'; diff --git a/src/pages/NotFound/NotFound.page.jsx b/src/pages/NotFound/NotFound.page.jsx deleted file mode 100644 index 8b05bbe62..000000000 --- a/src/pages/NotFound/NotFound.page.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import './NotFound.styles.css'; - -function NotFoundPage() { - return ( -
- - home - - page not found -
- ); -} - -export default NotFoundPage; diff --git a/src/pages/NotFound/NotFound.styles.css b/src/pages/NotFound/NotFound.styles.css deleted file mode 100644 index 07437df2e..000000000 --- a/src/pages/NotFound/NotFound.styles.css +++ /dev/null @@ -1,13 +0,0 @@ -.home-link { - font-size: 1rem; - text-decoration: none; - display: block; - text-align: right; - padding: 0.2rem 0.3rem; -} - -.home-link::before { - content: '←'; - padding-right: 0.2rem; - display: inline-block; -} diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js deleted file mode 100644 index 981f67f46..000000000 --- a/src/pages/NotFound/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './NotFound.page'; diff --git a/src/pages/Secret/Secret.page.jsx b/src/pages/Secret/Secret.page.jsx deleted file mode 100644 index bb9df9b2d..000000000 --- a/src/pages/Secret/Secret.page.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function SecretPage() { - return ( -
- 
-        welcome, voyager...
-         ← go back
-
-