wdonet · cylcrow · Feb 19, 2021 · Feb 19, 2021 · Feb 19, 2021 · Feb 20, 2021
diff --git a/.env.test b/.env.test
@@ -0,0 +1 @@
+REACT_APP_YOUTUBE_KEY=AIzaSyDFnO9VgkkdOBvHDq4NtEStIng-fAkEkEY
diff --git a/.eslintrc b/.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",

diff --git a/.gitignore b/.gitignore
@@ -14,7 +14,9 @@
 # misc
 .DS_Store
 .env.local
+.env.development
 .env.development.local
+.env.test
 .env.test.local
 .env.production.local
 

diff --git a/package.json b/package.json
@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@testing-library/dom": "^7.29.6",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
+    "@testing-library/react-hooks": "^5.1.0",
     "@testing-library/user-event": "^12.1.3",
+    "debounce": "^1.2.0",
+    "jest-styled-components": "6.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "react-test-renderer": "^17.0.1",
+    "styled-components": "4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,6 +27,7 @@
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "@sheerun/mutationobserver-shim": "^0.3.3",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -57,5 +64,12 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "src/utils/testing/helpers",
+      "src/utils/index.js",
+      "src/index.js"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,11 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <script src="https://apis.google.com/js/api.js"></script>
+    <script>
+      gapi.load('client');
+    </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,6 +30,14 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script>
+      // 2. This code loads the IFrame Player API code asynchronously.
+      var tag = document.createElement('script');
+
+      tag.src = 'https://www.youtube.com/iframe_api';
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    </script>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/assets/icons/default_user.jpg b/src/assets/icons/default_user.jpg
diff --git a/src/assets/icons/hamburguer.png b/src/assets/icons/hamburguer.png
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -0,0 +1,92 @@
+import React, { useReducer } from 'react';
+import styled from 'styled-components';
+import { LayoutWrapper } from '../Layout';
+import { appReducer } from '../../reducers/appReducer';
+import { lightTheme, darkTheme } from '../../providers/themes';
+import youtubeSearchService from '../../services/youtubeSearchService';
+import VideoPlayerContainer from '../VideoPlayer/VideoPlayerContainer';
+import AppContext from '../../providers/AppContext';
+import HomeVideos from '../HomeVideos/HomeVideos';
+import { 
+  SET_CURRENT_VIDEO_PLAYBACK, 
+  SET_IS_FIRST_LOAD, 
+  SET_VIDEOS_LIST, 
+  SWITCH_THEME 
+} from '../../reducers/actionTypes'
+
+const StyledWelcome = styled.div`
+  text-align: center;
+`;
+
+const initialState = {
+  videosList: [],
+  currentVideoId: undefined,
+  isLightTheme: true,
+  isFirstLoad: true,
+};
+
+function App() {
+
+  const [{ 
+    videosList, 
+    currentVideoId, 
+    isLightTheme, 
+    isFirstLoad }, 
+    dispatch] = useReducer(appReducer, initialState);
+
+  const getThemeConfig = () => ({
+    theme: isLightTheme ? lightTheme : darkTheme,
+    switchTheme: () => dispatch({type: SWITCH_THEME}),
+  });
+
+  const search = async (query) => {
+    const serviceResponse = await youtubeSearchService.search(query);
+    serviceResponse.error 
+    ? dispatch({ type: SET_VIDEOS_LIST, payload: [] })
+    : dispatch({ type: SET_VIDEOS_LIST, payload: serviceResponse });
+  }
+
+  const firstSearch = async () => {
+    let counter = 0;
+    while(!gapi || !gapi.client && counter < 10){
+      counter++;
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    (!gapi || !gapi.client || counter >= 10) 
+    ? dispatch({ type: SET_VIDEOS_LIST, payload: [] })
+    : search()
+  }
+
+  if(isFirstLoad){
+    dispatch({ type: SET_IS_FIRST_LOAD, payload: false });
+    firstSearch();
+  }
+
+  return (
+    <AppContext.Provider value={
+      { ...getThemeConfig(), 
+        search,
+        videosList,
+        setHomeVideosView: () => dispatch({ type: SET_CURRENT_VIDEO_PLAYBACK, payload: null }), 
+        playVideoById: (id) => dispatch({type: SET_CURRENT_VIDEO_PLAYBACK, payload: id}) 
+      }
+    }>
+      <LayoutWrapper>
+        { currentVideoId ? (
+          <div data-testid="video-player-container">
+            <VideoPlayerContainer videoId={currentVideoId} />
+          </div>
+        ) : (
+          <div>
+            <StyledWelcome>
+              <h1>Welcome to the challenge!</h1>
+            </StyledWelcome>
+            <HomeVideos />
+          </div>
+        )}
+      </LayoutWrapper>
+    </AppContext.Provider>
+  );
+}
+
+export default App;
diff --git a/src/components/App/App.spec.jsx b/src/components/App/App.spec.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { fireEvent, getByRole, act, render } from '@testing-library/react';
+import { darkTheme, lightTheme } from '../../providers/themes';
+import { contextWrapper, googleMockedAPIObject, youtubeMockedData, YTMockedObject } from '../../utils';
+import AppContext from '../../providers/AppContext';
+import App from './index';
+import { getAllByTestId, getByTestId } from '@testing-library/dom';
+
+global.gapi = googleMockedAPIObject();
+global.YT = YTMockedObject;
+
+const for400Miliseconds = () => new Promise((resolve) => {
+  setTimeout(() => resolve(), 400)
+})
+
+const build = async (Component = <App />) => {
+  let container;
+  await act(async () => {
+    const wrapped = contextWrapper(AppContext, { videos: youtubeMockedData.items, theme: lightTheme }, Component);
+    container = render(wrapped).container;
+  });
+  return {
+    container,
+    LayoutWrapper: () => getByRole(container, 'application'),
+    ThemeSwitch: () => getByRole(container, 'switch'),
+    videosList: () => getAllByTestId(container, (testID) => testID.includes('video-card-') ),
+    noVideosAvailableCaption: () => getByTestId(container, 'no-videos-available' ),
+    unableToLoadVideos: () => getByTestId(container, 'unable-to-load-videos' ),
+  };
+};
+
+describe('App theme', () => {
+  it('applies "light" theme if none selected', async () => {
+    const wrapper = await build();
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+  });
+
+  it('changes "light" theme to "dark" theme', async () => {
+    const wrapper = await build();
+
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${lightTheme.color.background}`
+    );
+    await act(async () => {
+      fireEvent.click(wrapper.ThemeSwitch());
+    });
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${darkTheme.color.background}`
+    );
+  });
+
+  it('shows videos list after successful fetch', async () => {
+    const built = (await build());
+    const { videosList } = built;
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows  "No hay videos :/" legeng after failed fetch', async () => {
+    global.gapi = googleMockedAPIObject(false);
+    const built = (await build());
+    const { noVideosAvailableCaption } = built;
+    expect( noVideosAvailableCaption() ).toBeTruthy();    
+  });
+
+  it('waits until `gapi` object is defined before first search', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    global.gapi = googleMockedAPIObject();
+    await act( async () => { await for400Miliseconds(); });
+
+    const { videosList } = built; 
+    expect(videosList()).toHaveLength(youtubeMockedData.items.length);
+  });
+
+  it('shows "Couldn\'t load videos" when "gapi" object is not loaded after 1 second', async () => {
+    global.gapi = undefined;
+    const built = await build();
+
+    await for400Miliseconds();
+    await for400Miliseconds();
+
+    await act( async () => { 
+      await for400Miliseconds();
+      global.gapi = googleMockedAPIObject(); 
+    });
+
+    const { noVideosAvailableCaption } = built; 
+    expect(noVideosAvailableCaption()).toBeTruthy();
+  });
+
+});
diff --git a/src/components/App/App.test.jsx b/src/components/App/App.test.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { act, getByRole, render } from '@testing-library/react';
+import { googleMockedAPIObject } from '../../utils';
+import App from './index';
+
+global.gapi = googleMockedAPIObject();
+
+const build = async (Component = <App />) => {
+  let container;
+  await act(async () => {
+    container = render(Component).container;
+  });
+  return {
+    container,
+    LayoutWrapper: () => getByRole(container, 'application'),
+    ThemeSwitch: () => getByRole(container, 'switch'),
+  };
+};
+
+describe('App layout', () => {
+  it('renders', async () => {
+    const wrapper = await build();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('displays layout wrapper', async () => {
+    const wrapper = await build();
+    expect(wrapper.LayoutWrapper()).toBeInTheDocument();
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_YOUTUBE_KEY=AIzaSyDFnO9VgkkdOBvHDq4NtEStIng-fAkEkEY