Challenge 5 routing

.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",

README.md

@@ -1,3 +1,20 @@
 # Wizeline Academy - 2021 React Bootcamp
 
 Please refere to the following [GIST](https://gist.github.com/erickwize/d7311bfc972080c162c43cbb7dc80587) for further instructions
+
+Code sandbox: https://codesandbox.io/s/core-concepts-and-styling-evtvz
+
+# Mini-Challenge 2: Intro to Testing
+## Answer the following questions first
+
+1. Using `create-react-app`, what do we need to set up for testing?
+    A: `create-react-app` comes with `Jest` and `react-testing-library` by default, but in order for `Jest` to locate them they need to have one of the following conventions:
+      - Files with `.js` suffix in` __tests__` folders, files with `.test.js` or `.spec.js`.
+    Jest can also be paired with other testing libraries/utilities like Enzyme but those must me installed using `yarn add` or `npm install`.
+
+2. What components are worth to test in your development?
+    A: In my opinion it would be components that have some kind of interaction that can be mimicked and function used.
+
+3. Can you apply TDD once you already created components?
+    A: Yes, the concept of TDD is to test first (create failing test) then make those test pass and finally refactor, so when adding new change to that component one can start using TDD, providing little by little more more of the TDD advantages.
+     _TDD is a cycle that is best done in chunks._

package.json

@@ -3,24 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
+    "@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": "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 --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": {
+    "@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",
@@ -29,8 +37,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 +52,25 @@
       "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": {
+    "collectCoverageFrom": [
+      "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
+      }
     }
   }
 }

src/__tests__/_App.test.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import AppLayout from '../components/App';
+import Favorites from '../pages/Favs';
+
+import NotFound from '../pages/NotFound';
+import { useVideoInfo, useVideList, reducer, initalState } from '../providers/GlobalContext';
+import VideoMock from '../utils/mock/youtube-videos-mock.json';
+
+afterEach(() => {
+  cleanup();
+});
+
+const MockVideoInfo = VideoMock.items[1].snippet;
+const videoDataMock = {
+  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',
+};
+
+it('Should render NotFound', () => {
+  const notFoundPage = render(<NotFound />);
+  expect(notFoundPage).toMatchSnapshot();
+  const notfound = screen.getByTestId('not-found');
+  expect(notfound).toBeInTheDocument();
+});
+
+it('Should render Favorites', () => {
+  const favorites = render(<Favorites />);
+  expect(favorites).toMatchSnapshot();
+});
+
+it('Should render App', () => {
+  act(() => {
+    const app = render(<AppLayout />);
+    expect(app).toMatchSnapshot();
+  });
+  const headerMenu = screen.getByTestId('yt-header');
+  expect(headerMenu).toBeInTheDocument();
+});
+
+it('Should render App Header', () => {
+  act(() => {
+    render(<AppLayout />);
+  });
+  const headerMenu = screen.getByTestId('yt-header');
+  expect(headerMenu).toBeInTheDocument();
+  const SearchInput = screen.getByPlaceholderText('Search...');
+  expect(SearchInput).toBeInTheDocument();
+  SearchInput.focus();
+  fireEvent.change(SearchInput, { target: { value: 'rise against' } });
+  expect(SearchInput.value).toBe('rise against');
+  fireEvent.keyDown(SearchInput, { key: 'Enter', code: 'Enter' });
+});
+
+it('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(videoDataMock);
+});
+
+it('Test useVideList Hook', () => {
+  const { result } = renderHook(() => useVideList());
+  expect(result.current.videoList).toEqual([]);
+  expect(typeof result.current.updateVideoList).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);
+});
+
+it('Test Reducer function', () => {
+  expect(reducer(initalState, {type: 'SET_HISTORY', payload: 'Shinee' })).toEqual({
+    ...initalState,
+    history: 'Shinee',
+  });
+  expect(reducer(initalState, {type: 'SET_LIGHT_MODE' })).toEqual(initalState);
+  expect(reducer(initalState, {type: 'SET_DARK_MODE' })).toEqual({
+    ...initalState,
+    header: {
+      background: '#fea79c',
+      input: '#0e4b79'
+    },
+    card: {
+      background: '#f9c7ae',
+      textColor: '#0e4b79',
+    },
+    background: '#0e4b79'
+  });
+  expect(reducer(initalState, {type: 'SET_SEARCH_KEYWORD', payload: 'Glass Animals' }));
+  expect(reducer(initalState, {type: 'SET_FAVS_LIST', payload: { 'id': videoDataMock }}));
+  expect(reducer(initalState, {type: 'REMOVE_USER_INFO', payload: 'Glass Animals' })).toEqual(initalState);
+  expect(reducer(initalState, {type: 'SET_USER_INFO', payload: {
+    id: '123',
+    name: 'Wizeline',
+    avatarUrl:
+      'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
+  }})).toEqual({
+    ...initalState,
+    user: {
+      id: '123',
+      name: 'Wizeline',
+      avatarUrl:
+        'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
+    }
+  });
+})
+
+it('Test Reducer: unkown action', () => {
+  try {
+    expect(reducer(initalState, { type: 'UNKOWN_ACTION' }));
+  } catch (e) {
+    expect(e.message).toBe('ACTION NOT RECOGNIZED');
+  }
+})

src/__tests__/_Favs.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { cleanup, render} from '@testing-library/react';
+import { useHistory } from 'react-router-dom';
+import UserFavorites from '../pages/Favs';
+import { GlobalContext, initalState } from '../providers/GlobalContext';
+
+import { storage } from '../utils/storage';
+import { FAVORITE_VIDEOS_KEY, AUTH_STORAGE_KEY } from '../utils/constants';
+
+const dispatch = jest.fn();
+const selectCard = jest.fn();
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+const favsList = {
+  HYyRZiwBWc8: {
+    channel: 'Wizeline',
+    channelId: 'UCPGzT4wecuWM0BH9mPiulXg',
+    description:
+      'Wizeline continues to offer a Silicon Valley culture in burgeoning innovation hubs like Mexico and Vietnam. In 2018, our Guadalajara team moved into a ...',
+    link: 'https://www.youtube.com/embed/HYyRZiwBWc8?autoplay=1&color=white',
+    thumbnail: 'https://i.ytimg.com/vi/HYyRZiwBWc8/mqdefault.jpg',
+    title: 'Wizeline Guadalajara | Bringing Silicon Valley to Mexico',
+    uploadDate: 'April 18, 2019',
+    videoId: 'HYyRZiwBWc8',
+  },
+  Po3VwR_NNGk: {
+    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',
+  }
+}
+storage.set(FAVORITE_VIDEOS_KEY, favsList);
+storage.set(AUTH_STORAGE_KEY, true);
+
+afterEach(() => {
+  cleanup();
+});
+
+it('Private: Not auth', () => {
+  const favs = render(
+    <GlobalContext.Provider value={{ ...initalState, favoritesList: favsList }}>
+      <UserFavorites selectCard={selectCard} dispatch={dispatch} />
+    </GlobalContext.Provider>
+  );
+  expect(favs).toMatchSnapshot();
+});

src/__tests__/_Header.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { screen, cleanup, render, fireEvent } from '@testing-library/react';
+import { act } from '@testing-library/react-hooks';
+import { useHistory } from 'react-router-dom';
+
+import HeaderMenu from '../components/Header';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+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);
+  fireEvent(
+    switchInput,
+    new MouseEvent('click', {
+      checked: false,
+    })
+  );
+  expect(switchInput.checked).toBe(false);
+});
+
+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(() => {
+    act(() => {
+      expect(doSearch).toHaveBeenCalledWith('wizeline');
+    });
+  }, 10);
+});