Mini challenge hooks

package.json

@@ -3,29 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.5",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@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": "^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",
-    "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
+    "test": "jest",
+    "test:coverage": "jest --coverage --watchAll=false",
+    "coverage": "react-scripts test --env=jsdom --coverage --watchAll",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
-    "babel-jest": "^26.6.3",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
+    "@testing-library/react-hooks": "^5.1.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -34,11 +37,8 @@
     "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",
-    "react-test-renderer": "^17.0.1"
+    "pretty-quick": "^3.0.0"
   },
   "browserslist": {
     "production": [
@@ -54,21 +54,26 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "**/*.{js,jsx}",
-      "!**/node_modules/**",
-      "!**/vendor/**"
-    ]
-  },
-  "lint-staged": {
-    "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
+      "src/**/**.*.{js,jsx,ts,tsx}",
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!<rootDir>/node_modules/",
+      "!<rootDir>/path/to/dir/"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/serviceWorker.js",
+      "/src/index.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 70,
+        "branches": 70,
+        "lines": 70,
+        "functions": 70
+      }
+    },
+    "coverageReporters": [
+      "text"
     ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
   }
 }

src/__tests__/_App.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { screen, cleanup, render } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import AppLayout from '../components/App';
+import NotFound from '../pages/NotFound';
+import { useVideoInfo, useVideList } from '../utils/hooks/useVideoStates';
+import VideoMock from '../utils/mock/youtube-videos-mock.json';
+
+afterEach(() => {
+  cleanup();
+});
+
+const MockVideoInfo = VideoMock.items[1].snippet;
+
+it('Should render NotFound', () => {
+  const notFoundPage = render(<NotFound />);
+  expect(notFoundPage).toMatchSnapshot();
+  // const notfound = screen.getByTestId('not-found');
+  // expect(notfound).toBeInTheDocument();
+});
+
+it('Should render App', () => {
+  act(() => {
+    const app = render(<AppLayout />);
+    expect(app).toMatchSnapshot();
+  });
+  const homePage = screen.getByTestId('yt-videocard');
+  const headerMenu = screen.getByTestId('yt-header');
+  expect(homePage).toBeInTheDocument();
+  expect(headerMenu).toBeInTheDocument();
+});
+
+test('Test useVideoInfo Hook', () => {
+  const { result } = renderHook(() => useVideoInfo());
+  expect(result.current.video).toEqual({});
+  expect(typeof result.current.updateVideoInfo).toBe('function');
+
+  act(() => {
+    result.current.updateVideoInfo(MockVideoInfo);
+  });
+  expect(result.current.video).toEqual({
+    channelId: 'UCPGzT4wecuWM0BH9mPiulXg',
+    channelTitle: 'Wizeline',
+    description:
+      'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...',
+    liveBroadcastContent: 'none',
+    publishTime: '2019-09-30T23:54:32Z',
+    publishedAt: '2019-09-30T23:54:32Z',
+    thumbnails: {
+      default: {
+        height: 90,
+        url: 'https://i.ytimg.com/vi/nmXMgqjQzls/default.jpg',
+        width: 120,
+      },
+      high: {
+        height: 360,
+        url: 'https://i.ytimg.com/vi/nmXMgqjQzls/hqdefault.jpg',
+        width: 480,
+      },
+      medium: {
+        height: 180,
+        url: 'https://i.ytimg.com/vi/nmXMgqjQzls/mqdefault.jpg',
+        width: 320,
+      },
+    },
+    title: 'Video Tour | Welcome to Wizeline Guadalajara',
+  });
+});
+
+test('Test useVideoInfo Hook', () => {
+  const { result } = renderHook(() => useVideList());
+  expect(result.current.videoList).toEqual([]);
+  expect(typeof result.current.updateVideoList).toBe('function');
+  expect(result.current.error).toEqual(null);
+  expect(typeof result.current.setErrorMsg).toBe('function');
+  act(() => {
+    result.current.updateVideoList([
+      VideoMock.items[0],
+      VideoMock.items[1],
+      VideoMock.items[3],
+    ]);
+  });
+  const videoList = [VideoMock.items[0], VideoMock.items[1], VideoMock.items[3]];
+  expect(result.current.videoList).toEqual(videoList);
+});

src/__tests__/_Header.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import HeaderMenu from '../components/Header';
+import { useHistory } from '../utils/hooks/useHistory';
+
+afterEach(() => {
+  cleanup();
+});
+
+const doSearch = jest.fn();
+
+it('Should render Header', () => {
+  const header = render(<HeaderMenu />);
+  const headerComponent = screen.getByTestId('yt-header');
+  expect(headerComponent).toBeInTheDocument();
+  expect(headerComponent).toContainHTML('Dark mode');
+  expect(headerComponent).toContainHTML('input');
+  expect(header).toMatchSnapshot();
+});
+
+it('Toggle Header Dark mode', () => {
+  render(<HeaderMenu />);
+
+  const switchInput = screen.getByLabelText('Dark mode', { type: 'checkbox' });
+  expect(switchInput).toBeInTheDocument();
+  fireEvent(
+    switchInput,
+    new MouseEvent('click', {
+      checked: true,
+    })
+  );
+  expect(switchInput.checked).toBe(true);
+});
+
+test('Search History Hook', () => {
+  const { result } = renderHook(() => useHistory());
+  expect(result.current.history).toBe('');
+  expect(typeof result.current.setHistoryVal).toBe('function');
+});
+
+it('Search value change', () => {
+  render(<HeaderMenu doSearch={doSearch} />);
+
+  const SearchInput = screen.getByPlaceholderText('Search...');
+  expect(SearchInput).toBeInTheDocument();
+  SearchInput.focus();
+  fireEvent.change(SearchInput, { target: { value: 'wizeline' } });
+  expect(SearchInput.value).toBe('wizeline');
+
+  fireEvent.keyDown(SearchInput, { key: 'Enter', code: 'Enter' });
+  setTimeout(() => {
+    expect(doSearch).toHaveBeenCalledWith('wizeline');
+  }, 10);
+
+  fireEvent.blur(SearchInput, { key: 'Enter', code: 'Enter' });
+  setTimeout(() => {
+    expect(doSearch).toHaveBeenCalledWith('wizeline');
+  }, 10);
+});

src/__tests__/_Home.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import HomePage from '../pages/Home';
+import VideoMock from '../utils/mock/youtube-videos-mock.json';
+
+afterEach(() => {
+  cleanup();
+});
+
+const selectCard = jest.fn();
+const cleanVideoData = {
+  channel: 'Wizeline',
+  channelId: 'UCPGzT4wecuWM0BH9mPiulXg',
+  description:
+    'Engineering a better tomorrow. Wizeline is a global software development company that helps its clients solve their biggest challenges with design and ...',
+  link: 'https://www.youtube.com/embed/7PtYNO6g7eI?autoplay=1&color=white',
+  thumbnail: 'https://i.ytimg.com/vi/7PtYNO6g7eI/mqdefault.jpg',
+  title: 'We Are Wizeline',
+  uploadDate: 'April 12, 2019',
+  videoId: '7PtYNO6g7eI',
+};
+
+it('Map through videoData', () => {
+  render(<HomePage videoList={VideoMock.items} selectCard={selectCard} />);
+  const videoCards = screen.getAllByTestId('yt-videocard');
+  expect(videoCards.length).toBe(26);
+});
+
+it('Select video card', () => {
+  render(<HomePage videoList={VideoMock.items} selectCard={selectCard} />);
+  const videoCards = screen.getAllByTestId('yt-videocard');
+  expect(videoCards.length).toBe(26);
+
+  fireEvent.click(videoCards[5]);
+  expect(selectCard).toHaveBeenCalledWith(cleanVideoData);
+});

src/__tests__/_VideoCard.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import VideoCard from '../components/VideoCard';
+import VideoMock from '../utils/mock/youtube-videos-mock.json';
+import { getReadableDate, random } from '../utils/fns';
+
+afterEach(() => {
+  cleanup();
+});
+
+const MockVideoInfo = VideoMock.items[1].snippet;
+MockVideoInfo.uploadDate = getReadableDate(VideoMock.items[1].snippet.publishedAt);
+MockVideoInfo.thumbnail = VideoMock.items[1].snippet.thumbnails.medium.url;
+MockVideoInfo.channel = VideoMock.items[1].snippet.channelTitle;
+
+it('Test Utils: getReadableDate', () => {
+  expect(MockVideoInfo.uploadDate).toBe('September 30, 2019');
+});
+
+it('Test Utils: random', () => {
+  expect(typeof random(10)).toBe('number');
+});
+
+it('Should render VideoCard Info', () => {
+  render(<VideoCard videoData={MockVideoInfo} />);
+  const videoCardComponent = screen.getByTestId('yt-videocard');
+  expect(videoCardComponent).toBeInTheDocument();
+  expect(videoCardComponent).toHaveTextContent(
+    'Video Tour | Welcome to Wizeline GuadalajaraWizeline| September 30, 2019 Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
+  );
+});
+
+it('Handle videoCard click event', () => {
+  const cardClick = jest.fn();
+  render(<VideoCard videoData={MockVideoInfo} cardClick={cardClick} />);
+  const videoCardComponent = screen.getByTestId('yt-videocard');
+  expect(videoCardComponent).toBeInTheDocument();
+  fireEvent.click(videoCardComponent);
+  expect(cardClick).toHaveBeenCalledWith(MockVideoInfo);
+});

src/__tests__/_VideoPlayer.test.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import VideoPlayer from '../pages/VideoPlayer';
+import VideoMock from '../utils/mock/youtube-videos-mock.json';
+import { getUsefullData } from '../utils/fns';
+
+afterEach(() => {
+  cleanup();
+});
+
+const selectCard = jest.fn();
+
+const videoData = {
+  channel: 'El Economista TV',
+  channelId: 'UCXmAOGwFYxIq5qrScJeeV4g',
+  description:
+    'En el 2014, Bismarck fundó Wizeline, compañía tecnológica que trabaja con los corporativos ofreciendo una plataforma para que desarrollen software de forma ...',
+  link: 'https://www.youtube.com/embed/Po3VwR_NNGk?autoplay=1&color=white',
+  thumbnail: 'https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg',
+  title: 'Wizeline hace sentir a empleados como en casa',
+  uploadDate: 'March 4, 2019',
+  videoId: 'Po3VwR_NNGk',
+};
+
+it('Test Utils: getReadableDate', () => {
+  expect(getUsefullData(VideoMock.items[3])).toEqual(videoData);
+});
+
+it('Should render VideoPlayer Info', () => {
+  render(
+    <VideoPlayer
+      video={videoData}
+      selectCard={selectCard}
+      relatedVideos={VideoMock.items}
+    />
+  );
+  const videoCardComponent = screen.getByTestId('video-player');
+  expect(videoCardComponent).toBeInTheDocument();
+  expect(videoCardComponent).toHaveTextContent(videoData.description);
+});
+
+it('Return to Home', () => {
+  render(
+    <VideoPlayer
+      video={videoData}
+      selectCard={selectCard}
+      relatedVideos={VideoMock.items}
+    />
+  );
+  const homeButton = screen.getByText('Home');
+  expect(homeButton).toBeInTheDocument();
+  fireEvent.click(homeButton);
+  expect(selectCard).toHaveBeenCalledWith({});
+});
+
+it('Return to Show related search video card view', () => {
+  render(
+    <VideoPlayer
+      video={videoData}
+      selectCard={selectCard}
+      relatedVideos={VideoMock.items}
+    />
+  );
+  const videoCards = screen.getAllByTestId('yt-videocard');
+  expect(videoCards.length).toBe(24);
+  expect(videoCards[3]).toHaveTextContent('We Are WizelineWizeline| April 12, 2019');
+});