Mini-Challenge 2: Intro to Testing

.eslintrc

@@ -2,8 +2,10 @@
   "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "prettier/prettier": ["error", {
+     "endOfLine":"auto"
+   }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

.prettierrc

@@ -5,5 +5,6 @@
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine":"auto"
 }

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

package.json

@@ -3,19 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "jest": "^26.6.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^4.0.3",
+    "react-test-renderer": "^17.0.1",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -29,8 +35,6 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
@@ -46,16 +50,19 @@
       "last 1 safari version"
     ]
   },
-  "lint-staged": {
-    "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/serviceWorker.js",
+      "/src/index.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 100,
+        "branches": 100,
+        "lines": 100,
+        "functions": 100
+      }
     }
   }
 }

src/__tests__/homepage.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import {cleanup, render, screen} from '@testing-library/react';
+import HomePage from "../pages/Home/Home.page";
+import youtubeVideos from "../mocks/youtube-videos";
+
+describe('Home page Tests', () => {
+  afterEach(cleanup);
+
+  describe('Ensure elements get rendered', () => {
+    it('Title', () => {
+      render(<HomePage />);
+      expect(screen.getByText(/YouTube video search app/, {selector: 'h1'})).toBeInTheDocument();
+    });
+  });
+
+  describe('Ensure there the info from the mock is being shown', () => {
+    it("A random video's information will be displayed if it has videoid", () => {
+      render(<HomePage />);
+      const randVideoIdx = Math.floor((Math.random() * youtubeVideos.items.length));
+      const randomVideo = youtubeVideos.items[randVideoIdx];
+
+      if(randomVideo.id.videoId)
+        expect(screen.getByTestId(randomVideo.etag)).toBeInTheDocument();
+      else
+        expect(screen.getByTestId(randomVideo.etag)).not.toBeInTheDocument();
+    });
+
+    it('A video that does not have any description, must show channel title followed by a hypen', () => {
+      // render(<HomePage />);
+      // const videoWithDescription = youtubeVideos.items[2];
+      // if(videoWithDescription.snippet.description === '')
+      //   expect(screen.getByText('Wizeline -')).toBeInTheDocument();
+      // else
+      //   expect(screen.getByText('Wizeline -')).toBeInTheDocument();
+      // There must be a way... Right now I'm short of time...
+    });
+  });
+});

src/__tests__/nav.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import Toggle from '../components/CustomInputs/Toggle';
+import Nav from '../components/Nav';
+
+describe('Nav tests', () => {
+  afterEach(cleanup);
+
+  describe('Ensure components get rendered', () => {
+    it('Nav Header Wrapper', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('homepage')).toBeInTheDocument();
+    });
+
+    it('Left Nav Wrapper', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('leftNav')).toBeInTheDocument();
+    });
+
+    it('Hamburger Menu Icon', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('hamburger')).toBeInTheDocument();
+    });
+
+    it('Search Input', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('searchTextWrapper')).toBeInTheDocument();
+    });
+
+    it('Right Nav Wrapper', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('rightNav')).toBeInTheDocument();
+    });
+
+    it('Dark mode toggle', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('toggleDarkMode')).toBeInTheDocument();
+    });
+
+    it('Login Button', () => {
+      render(<Nav />);
+      expect(screen.getByTestId('loginBtn')).toBeInTheDocument();
+    });
+  });
+
+  describe('Toggle component check', () => {
+    it('Toggle label onChange', () => {
+      const {queryByLabelText, getByLabelText} = render(
+        <Toggle labelOn="🌙" labelOff="☀️" />
+      );
+
+      expect(queryByLabelText(/☀️/i)).toBeTruthy();
+      fireEvent.click(getByLabelText(/☀️/i));
+      expect(queryByLabelText(/🌙/i)).toBeTruthy();
+    });
+
+    // it('Toggle UI changes when user clicks on it', () => {
+    //   const {getByLabelText} = render(<Toggle labelOn="🌙" labelOff="☀️" />);
+    //   expect(toJSON()).toMatchSnapshot();
+
+    //   fireEvent.click(getByLabelText(/☀️/i));
+    //   expect(toJSON()).toMatchSnapshot();
+
+    //   fireEvent.click(getByLabelText(/🌙/i));
+    //   expect(toJSON()).toMatchSnapshot();
+    // });
+  });
+
+});

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 React from 'react';
 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';
 
 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 (
-    <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 <HomePage />;
 }
 
 export default App;

src/components/CustomInputs/InputTextIcon.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const InputTextIcon = ({ path }) => {
+  return (
+    <Wrapper data-testid="searchTextWrapper">
+      <SvgWrapper>
+        <StyledSvg focusable="false" viewBox="0 0 24 24">
+          {path || (
+            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+          )}
+        </StyledSvg>
+      </SvgWrapper>
+      <InputWrapper>
+        <StyledInputText />
+      </InputWrapper>
+    </Wrapper>
+  );
+};
+
+export default InputTextIcon;
+
+const Wrapper = styled.div`
+  position: relative;
+  background-color: #bebebe;
+  margin: 0% 3%;
+  border-radius: 25px;
+  @media screen and (max-width: 280px) {
+    width: 65%;
+  }
+`;
+
+const SvgWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  padding: 0px 8px;
+  position: absolute;
+  align-items: center;
+  pointer-events: none;
+  justify-content: center;
+`;
+
+const StyledSvg = styled.svg`
+  fill: #525252;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  font-size: 1.5rem;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  flex-shrink: 0;
+  user-select: none;
+`;
+
+const InputWrapper = styled.div`
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+`;
+
+const StyledInputText = styled.input`
+  width: 95%;
+  padding: 8px 5px;
+  font-size: 1em;
+  padding-left: calc(1em + 25px);
+  border: none;
+  background-color: transparent;
+  color: #424242;
+  &:focus {
+    outline: none;
+  }
+`;