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,36 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import {render, screen} from '@testing-library/react';
+import HomePage from "../pages/Home/Home.page";
+import youtubeVideos from "../mocks/youtube-videos";
+
+test('Ensure the elements get rendered', () => {
+  render(<HomePage />);
+  expect(screen.getByRole('heading', { name: /YouTube video search app/i })).toBeInTheDocument();
+  expect(screen.getByRole('grid')).toBeInTheDocument();
+  expect(screen.getAllByRole('article')).toBeTruthy();
+});
+
+test('The information from the mock data is rendered as expected', () => {
+  render(<HomePage />);
+  // A random video's information will be displayed if it has videoid
+  const randVideoIdx = Math.floor((Math.random() * youtubeVideos.items.length)) + 1;
+  let randomVideo = youtubeVideos.items[randVideoIdx];
+  expect(screen.getByRole('img', {name: randomVideo.etag })).toBeInTheDocument();
+
+  // The first item (not a video) information shouldn't be shown
+  randomVideo = youtubeVideos.items[0];
+  expect(screen.queryByRole('img', {name: randomVideo.etag})).not.toBeInTheDocument();
+
+  // A video that has description, must show it'
+  let videoWithDescription = youtubeVideos.items[2];
+  expect(screen.getByText(videoWithDescription.snippet.description)).toBeInTheDocument();
+
+  // A video that does not have any description, must show channel title followed by a hyphen'
+  videoWithDescription = youtubeVideos.items[8];
+  const formattedDate = new Date(videoWithDescription.snippet.publishedAt);
+  const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(formattedDate);
+  const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(formattedDate);
+  const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(formattedDate);
+  expect(screen.getByText(`Wizeline - ${da} ${mo}, ${ye}`)).toBeInTheDocument();
+});

src/__tests__/nav.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import {fireEvent, render, screen} from '@testing-library/react';
+import Toggle from '../components/CustomInputs/Toggle';
+import Nav from '../components/Nav';
+
+test('Ensure header components get rendered', () => {
+  render(<Nav />);
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+  expect(screen.getAllByRole('group').length).toEqual(2);
+  expect(screen.getByRole('img')).toBeInTheDocument();
+  expect(screen.getByRole('search')).toBeInTheDocument();
+  expect(screen.getByRole('switch')).toBeInTheDocument();
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test('Toggle component check', () => {
+  const {queryByLabelText, getByLabelText} = render(
+    <Toggle labelOn="🌙" labelOff="☀️" />
+  );
+
+  expect(queryByLabelText(/☀️/i)).toBeTruthy();
+  fireEvent.click(getByLabelText(/☀️/i));
+  expect(queryByLabelText(/🌙/i)).toBeTruthy();
+});

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,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import SvgMagnifier from '../svg/SvgMagnifier';
+
+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 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;
+  }
+`;
+
+const InputTextIcon = () => {
+  return (
+    <Wrapper role="search">
+      <SvgWrapper>
+        <SvgMagnifier />
+      </SvgWrapper>
+      <InputWrapper>
+        <StyledInputText />
+      </InputWrapper>
+    </Wrapper>
+  );
+};
+
+export default InputTextIcon;

src/components/CustomInputs/Toggle.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const CheckBoxWrapper = styled.div`
+  width: fit-content;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0% 3%;
+`;
+
+const CheckBoxLabel = styled.label`
+  position: absolute;
+  top: 50;
+  left: 50;
+  width: 42px;
+  height: 26px;
+  border-radius: 15px;
+  background: #bebebe;
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    margin: 3px;
+    background: #ffffff;
+    box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
+    transition: 0.2s;
+  }
+`;
+
+const CheckBox = styled.input`
+  opacity: 0;
+  z-index: 1;
+  border-radius: 15px;
+  width: 42px;
+  height: 26px;
+  &:checked + ${CheckBoxLabel} {
+    background: #be4f4f;
+    &::after {
+      content: '';
+      display: block;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      margin-left: 21px;
+      transition: 0.2s;
+    }
+  }
+`;
+
+const Toggle = ({ labelOn, labelOff }) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheck = () => setIsChecked(!isChecked);
+
+  return (
+    <CheckBoxWrapper role="switch">
+      <CheckBox
+        id="checkbox"
+        type="checkbox"
+        onChange={handleCheck}
+        checked={isChecked}
+      />
+      <CheckBoxLabel htmlFor="checkbox" />
+      <label htmlFor="checkbox">{isChecked ? labelOn : labelOff}</label>
+    </CheckBoxWrapper>
+  );
+};
+
+export default Toggle;