wdonet · cylcrow · Feb 19, 2021 · Feb 19, 2021 · Feb 19, 2021 · Feb 20, 2021
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,6 +14,7 @@
 # misc
 .DS_Store
 .env.local
+.env.development
 .env.development.local
 .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,52 @@
+import React, { useState } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { LayoutWrapper } from '../Layout';
+import { lightTheme, darkTheme } from '../../providers/themes';
+import VideoPlayerContainer from '../VideoPlayer/VideoPlayerContainer';
+import AppContext from '../../providers/AppContext';
+import HomeVideos from '../HomeVideos/HomeVideos';
+
+const StyledWelcome = styled.div`
+  text-align: center;
+`;
+
+function App() {
+  const [isLightTheme, setIsLightTheme] = useState(true);
+  const [videoID, setVideoID] = useState(null);
+
+  const switchTheme = () => {
+    setIsLightTheme(!isLightTheme);
+  };
+
+  const getThemeConfig = () => ({
+    theme: isLightTheme ? lightTheme : darkTheme,
+    switchTheme,
+  });
+
+  const setHomeVideosView = () => {
+    setVideoID(null);
+  };
+
+  return (
+    <ThemeProvider theme={getThemeConfig()}>
+      <AppContext.Provider value={{ setHomeVideosView }}>
+        <LayoutWrapper>
+          {videoID ? (
+            <div data-testid="video-player-container">
+              <VideoPlayerContainer videoId={videoID} />
+            </div>
+          ) : (
+            <div>
+              <StyledWelcome>
+                <h1>Welcome to the challenge!</h1>
+              </StyledWelcome>
+              <HomeVideos playVideoNow={setVideoID} />
+            </div>
+          )}
+        </LayoutWrapper>
+      </AppContext.Provider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/App/App.spec.jsx b/src/components/App/App.spec.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { fireEvent, getByRole, act } from '@testing-library/react';
+import { getAllByTestId, getByTestId } from '@testing-library/dom';
+import { darkTheme, lightTheme } from '../../providers/themes';
+import { renderWithTheme, googleMockedAPIObject, YTMockedObject } from '../../utils';
+import App from './index';
+
+global.gapi = googleMockedAPIObject();
+global.YT = YTMockedObject;
+
+const build = async (Component = <App />, theme = lightTheme) => {
+  let container;
+  await act(async () => {
+    container = renderWithTheme(Component, theme).container;
+  });
+  return {
+    container,
+    LayoutWrapper: () => getByRole(container, 'application'),
+    ThemeSwitch: () => getByRole(container, 'switch'),
+  };
+};
+
+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}`
+    );
+    fireEvent.click(wrapper.ThemeSwitch());
+    expect(wrapper.LayoutWrapper()).toHaveStyle(
+      `background: ${darkTheme.color.background}`
+    );
+  });
+});
+
+describe('App playback', () => {
+  it('changes view mode to video playback', async () => {
+    const wrapper = await build();
+    const { firstChild: videoCard } = getAllByTestId(wrapper.container, (id) =>
+      id.includes('video-card-')
+    )[0];
+
+    await act(async () => {
+      fireEvent.click(videoCard);
+    });
+
+    const container = getByTestId(wrapper.container, 'video-player-container');
+    expect(container).toBeVisible();
+  });
+
+  // it('changes video on clicked video on list', async () => {
+  //   const wrapper = await build();
+  //   const { firstChild: videoCard } = getAllByTestId(wrapper.container, (id) =>
+  //     id.includes('video-card-')
+  //   )[0];
+
+  //   await act(async () => {
+  //     fireEvent.click(videoCard);
+  //   });
+
+  //   const container = getByTestId(wrapper.container, 'video-player-container');
+  //   const realatedVideosList = getAllByTestId(container, (id) =>
+  //     id.includes('small-caption-')
+  //   );
+
+  //   fireEvent.click(realatedVideosList[0].firstChild);
+  //   console.log(realatedVideosList[0])
+  // });
+});
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();
+  });
+});