cvillanueva84 · jgarciacentraal · Jul 26, 2021 · Jul 26, 2021 · Jul 27, 2021 · Jul 27, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_KEY=AIzaSyCruBQW1jnCJftpdNWkTEQOecAzlaBqad0
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# enviroment
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
+    "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^12.1.3",
+    "history": "^4.10.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-feather": "^2.0.9",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,6 +40,16 @@
     "prettier": "^2.1.1",
     "pretty-quick": "^3.0.0"
   },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/serviceWorker.js",
+      "/src/index.js"
+    ],
+    "coverageReporters": [
+      "text"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/public/index.html b/public/index.html
@@ -21,11 +21,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
@@ -0,0 +1,18 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  body {
+  margin: 0;
+  padding: 0;
+  text-rendering: optimizeLegibility;
+  background: ${({ theme }) => theme.body};
+  color: ${({ theme }) => theme.text};
+  background-size: 400% 400%;
+  background-position: var(--bg-position);
+  transition: all 0.50s linear;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  }
+`;
+
+export default GlobalStyle;
diff --git a/src/__test__/components/Header.test.jsx b/src/__test__/components/Header.test.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+// components
+import Header from 'components/Header/Header';
+import GlobalProvider from 'store/global.provider';
+
+describe('Show header', () => {
+  it('render a header container', () => {
+    render(
+      <GlobalProvider value={{ theme: 'light' }}>
+        <Header />
+      </GlobalProvider>
+    );
+
+    const headerElement = screen.getByTestId('header-container');
+    expect(headerElement).toBeInTheDocument();
+  });
+
+});
diff --git a/src/__test__/components/ListRelativeVideos.test.jsx b/src/__test__/components/ListRelativeVideos.test.jsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react'
+import List from 'components/ListRelativeVideos/List';
+
+import { mockVideos } from '../../mockData';
+
+const {items} = mockVideos;
+
+const {videoId} = items[0].id
+
+
+import GlobalProvider from 'store/global.provider';
+
+describe('ListRelativeVideos Component ', () => {
+
+  test('render' , () => {
+    render(
+      <GlobalProvider>
+        < List videoId={videoId} />
+      </GlobalProvider>
+    )
+
+    const listCtn = screen.getByTestId('list-ctn')
+    expect(listCtn).toBeInTheDocument()
+
+  }) 
+
+})
diff --git a/src/__test__/components/LoginBtn.test.jsx b/src/__test__/components/LoginBtn.test.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import GlobalProvider from 'store/global.provider';
+import LoginBtn from '../../components/LoginBtn/index';
+
+describe('LoginBtn component', () => {
+  test('show Icon button', () => {
+    render(
+      <GlobalProvider>
+        <LoginBtn />
+      </GlobalProvider>
+    );
+
+    const iconEl = screen.getByTestId('btn-test');
+    expect(iconEl).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/components/Search.test.jsx b/src/__test__/components/Search.test.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Search from 'components/Search/Search';
+import GlobalProvider from 'store/global.provider';
+
+describe('Search component', () => {
+  it('renders Input ', () => {
+    render(
+      <GlobalProvider>
+        <Search />
+      </GlobalProvider>
+    );
+
+    const inputEl = screen.getByTestId('search-input');
+    expect(inputEl).toBeInTheDocument();
+  });
+
+  it('renders Search container', () => {
+    render(
+      <GlobalProvider>
+        <Search />
+      </GlobalProvider>
+    );
+
+    const searchContainer = screen.getByTestId('search-container');
+    expect(searchContainer).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/components/SideBar.test.jsx b/src/__test__/components/SideBar.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+
+import SideBar from 'components/SideBar/SideBar';
+import GlobalProvider from 'store/global.provider';
+
+test('Test sidebar component', () => {
+  const history = createMemoryHistory();
+
+  const allProviders = ({ children }) => {
+    return (
+      <GlobalProvider>
+        <Router history={history}>{children}</Router>
+      </GlobalProvider>
+    );
+  };
+
+  const openSideBar = true;
+  const setOpenSideBar = jest.fn();
+
+  render(<SideBar open={openSideBar} toggleSideBar={setOpenSideBar} />, {
+    wrapper: allProviders,
+  });
+
+  const drawerElement = screen.getByTestId('sidebar-role');
+  expect(drawerElement).toBeInTheDocument();
+
+  const homeSection = screen.getByTestId('btn-home');
+  expect(homeSection).toBeInTheDocument();
+});
diff --git a/src/__test__/components/ThemeBtn.test.jsx b/src/__test__/components/ThemeBtn.test.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ThemeBtn from 'components/ThemeBtn';
+import GlobalProvider from 'store/global.provider';
+
+test('theme button', () => {
+  render(
+    <GlobalProvider>
+      <ThemeBtn />
+    </GlobalProvider>
+  );
+
+  const themeButton = screen.getByRole('button');
+  expect(themeButton).toBeInTheDocument();
+
+  const iconTheme = screen.getByTitle('MoonButton');
+  expect(iconTheme).toBeInTheDocument();
+});
diff --git a/src/__test__/components/VideoCard.test.jsx b/src/__test__/components/VideoCard.test.jsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+
+import VideoCard from 'components/VideoCard/VideoCard';
+import GlobalProvider from 'store/global.provider';
+
+import { mockFavorites } from '../../mockData';
+
+const history = createMemoryHistory();
+const allProviders = ({ children }) => {
+  return (
+    <GlobalProvider>
+      <Router history={history}>{children}</Router>
+    </GlobalProvider>
+  );
+};
+
+test('all video card in viewss', () => {
+  render(<VideoCard key={mockFavorites[0].videoId} data={mockFavorites[0]} />, {
+    wrapper: allProviders,
+  });
+
+  const cardE = screen.getByTestId('list-videos');
+  expect(cardE).toBeInTheDocument();
+
+  const titleE = screen.getByTestId('title-card-video');
+  expect(titleE).toBeInTheDocument();
+
+  const imagen = screen.getByRole('img');
+  expect(imagen).toBeInTheDocument();
+});
diff --git a/src/__test__/components/VideoDetail.test.jsx b/src/__test__/components/VideoDetail.test.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+
+import { mockFavorites } from '../../mockData'
+
+import VideoDetail from 'components/VideoDetail/VideoDetail';
+import GlobalProvider from 'store/global.provider';
+
+const user = {
+  id: '123',
+  name: 'Wizeline',
+  avatarUrl:
+    'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
+};
+const videoSelected = mockFavorites[1];
+const favorite = true;
+
+
+const history = createMemoryHistory();
+const allProviders = ({ children }) => {
+  return (
+    <GlobalProvider>
+      <Router history={history}>{children}</Router>
+    </GlobalProvider>
+  );
+};
+
+test('Test PlayDetail component', async () => {
+  render(
+    <VideoDetail video={{ user, videoSelected, favorite }} />,
+    { wrapper: allProviders }
+  );
+
+  // Looking for elements
+  const iFrame = screen.getByTitle('playVideo');
+  expect(iFrame).toBeInTheDocument();
+
+  const heading = screen.getByRole('heading', { level: 2 });
+  expect(heading).toBeInTheDocument();
+
+  const title = screen.getByTestId('title-detail');
+  expect(title).toBeInTheDocument();
+
+  const descrpition = screen.getByTestId('descrpition-detail');
+  expect(descrpition).toBeInTheDocument();
+
+});
+
+
+
diff --git a/src/__test__/hooks/useFetch.test.jsx b/src/__test__/hooks/useFetch.test.jsx
@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useFetch } from '../../utils/hooks/useFetch';
+
+// import { mockVideos } from '../../mockData';
+
+const promiseControl = () => {
+  let response;
+  const promise = new Promise((resolve, reject) => {
+    response = { resolve, reject };
+  });
+  return { response, promise };
+};
+
+describe('Testing useFetch hooks', () => {
+  it('Testing loading state', async () => {
+    const { response, promise } = promiseControl();
+    global.fetch = jest.fn(() => promise);
+
+    const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+
+    expect(result.current.loading).toBe(true);
+    response.resolve();
+
+    await waitForNextUpdate();
+    expect(result.current.loading).toBe(false);
+  });
+
+  // it('Getting data successfully', async () => {
+  //   const { response, promise } = promiseControl();
+  //   global.fetch = jest.fn(() => promise);
+
+  //   const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+  //   const videos = mockVideos;
+  //   response.resolve({ json: () => ({ data: videos }) });
+
+  //   await waitForNextUpdate();
+  //   expect(result.current.videosRelated).toEqual({ data: videos });
+  // });
+
+  it('Getting an error during request', async () => {
+    global.fetch = jest.fn(() => {
+      return new Promise(() => {
+        const err = 'Network error';
+        throw err;
+      });
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() => useFetch('CHzlSGRvWPs', true));
+    await waitForNextUpdate();
+    expect(result.current.error).toBe(true);
+  });
+});