cvillanueva84 · AntonioSalazar · Jul 18, 2021 · Jul 18, 2021 · Jul 19, 2021 · Jul 19, 2021
diff --git a/.eslintrc b/.eslintrc
@@ -3,7 +3,8 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
-    "react/jsx-filename-extension": "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
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,21 +6,32 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.1.3",
+    "dotenv": "^10.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
+    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "react-spinners": "^0.11.0",
+    "styled-components": "^5.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:coverage": "npm run test -- --coverage",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
   "devDependencies": {
+    "@emotion/react": "^11.4.0",
+    "@testing-library/react-hooks": "^7.0.1",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -30,9 +41,11 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
+    "jest-styled-components": "^7.0.5",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "react-test-renderer": "^16.9.0"
   },
   "browserslist": {
     "production": [
@@ -57,5 +70,10 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/Tests/*.js"
+    ]
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -21,7 +21,22 @@
       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`.
     -->
-    <title>React App</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
+    <title>YouTube clone App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Tests/components/Layout.test.js b/src/Tests/components/Layout.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Layout from '../../components/Layout/Layout.component';
+import Navbar from '../../components/Navbar/Navbar.component';
+jest.mock('../../components/Navbar/Navbar.component', () => 'Navbar')
+
+describe('Test of the Layout component', () => {
+    let children =  Navbar
+    let wrapper = shallow( < Layout children={children} />)
+
+    test('main container should be rendered correctly', () => {
+        expect(wrapper).toMatchSnapshot()
+    })
+
+    test('main tag should contain the container className', () => {
+        const mainContainer = wrapper.find('main')
+        expect(mainContainer.hasClass('container')).toBe(true)
+    })
+
+    test('Layout component should display the received props inside the main tag', () => {
+        const mainTag = wrapper.find('main').text()
+        expect(mainTag).toBe(children)
+    })
+
+
+})
diff --git a/src/Tests/components/Navbar.test.js b/src/Tests/components/Navbar.test.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Navbar from '../../components/Navbar/Navbar.component'
+import { VideoListContext } from '../../providers/VideoList/VideoList.provider';
+import { MemoryRouter } from 'react-router';
+
+describe('Tests of the Navbar component', () => {
+
+    const setSearch = jest.fn()
+    let wrapper;
+    beforeEach(() =>  {
+        jest.clearAllMocks();
+        wrapper = mount(
+            <VideoListContext.Provider
+                value={{
+                    setSearch
+                }}
+            >
+                <MemoryRouter>
+                    <Navbar/>
+                </MemoryRouter>
+            </VideoListContext.Provider>)
+    });
+
+    test('should render the Navbar component correctly', () => {
+        expect(wrapper).toMatchSnapshot()
+    })
+
+    test('should have an styled input tag', () => {
+        const styledInput = wrapper.find('InputText')
+        const value = 'React!'
+        styledInput.simulate('change', {
+            target: {
+                value
+            }
+        })
+        expect(styledInput.length).toBe(1)
+    })
+    test('should post info on submit', () => {
+        wrapper.find('form').simulate('submit', {preventDefault(){}});
+        expect(setSearch).toHaveBeenCalled()
+    })
+
+    test('should call setSearch and clean the input text ', () => {
+        const value = 'learn jest'
+        wrapper.find('InputText').simulate('change', { target: {value}})
+        wrapper.find('form').simulate('submit', {preventDefault(){}});
+        expect(setSearch).toHaveBeenCalled()
+        expect(wrapper.find('InputText').prop('value')).toBe('')
+
+    })
+
+
+})
+
diff --git a/src/Tests/components/RecommendedVideos.test.js b/src/Tests/components/RecommendedVideos.test.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import RecommendedVideos from '../../components/RecommendedVideos';
+import  {VideoListContext}  from '../../providers/VideoList/VideoList.provider.jsx';
+import { videoList as videos} from '../mockData/videosList'
+import { MemoryRouter } from 'react-router';
+
+describe('Tests of the RecommendedVideos component', () => {
+
+    const wrapper = mount(
+    <VideoListContext.Provider
+        value={{
+            videos
+        }}
+    >
+        <MemoryRouter>
+            < RecommendedVideos/>
+        </MemoryRouter>
+    </VideoListContext.Provider>
+
+    )
+
+    test('should render the component correctly', () => {
+        expect(wrapper).toMatchSnapshot()
+    })
+
+    test('should display all of the videos passed', () => {
+        let videos = wrapper.find('recommended-video__card')
+        expect(videos.length).toBe(videos.length)
+    })
+
+})
diff --git a/src/Tests/components/VideoDetails.test.js b/src/Tests/components/VideoDetails.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme/build';
+import VideoDetails from '../../components/VideoDetails/VideoDetails.component';
+import { MemoryRouter, Route } from 'react-router';
+import { videoList as videos } from '../mockData/videosList'
+import { VideoListContext } from '../../providers/VideoList/VideoList.provider';
+
+describe('Tests of the VideoDetials component', () => {
+    const wrapper = mount( 
+        <VideoListContext.Provider
+            value={{videos}}
+        >
+            <MemoryRouter
+                initialEntries={['/video/Po3VwR_NNGk']}
+                >
+                <Route path="/video/:id" >
+                    <VideoDetails />
+                </Route> 
+            </MemoryRouter>
+        </VideoListContext.Provider>)
+
+       test('should display the component correctly', () => {
+         expect(wrapper).toMatchSnapshot()  
+       })
+
+
+})
diff --git a/src/Tests/components/VideoList.test.js b/src/Tests/components/VideoList.test.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import VideoList from '../../components/VideoList/VideoList.component';
+
+describe('Tests of the VideoList component', () => {
+
+    const data =  {
+        "kind": "youtube#searchResult",
+        "etag": "_PVKwNJf_qw9nukFeRFOtQ837o0",
+        "id": {
+          "kind": "youtube#channel",
+          "videoId": "UCPGzT4wecuWM0BH9mPiulXg"
+        },
+        "snippet": {
+          "publishedAt": "2014-09-27T01:39:18Z",
+          "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+          "title": "Wizeline",
+          "description": "Wizeline transforms how teams build technology. Its customers accelerate the delivery of innovative products with proven solutions, which combine Wizeline's ...",
+          "thumbnails": {
+            "default": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s88-c-k-c0xffffffff-no-rj-mo"
+            },
+            "medium": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s240-c-k-c0xffffffff-no-rj-mo"
+            },
+            "high": {
+              "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo"
+            }
+          },
+          "channelTitle": "Wizeline",
+          "liveBroadcastContent": "upcoming",
+          "publishTime": "2014-09-27T01:39:18Z"
+        }
+      }
+
+    const wrapper = shallow(< VideoList video={data}/>)
+    test('should render the VideoList component', () => {
+        expect(wrapper).toMatchSnapshot()
+    })
+
+
+    test('should contain the VideoCardDiv styled component', () => {
+        expect(wrapper.find('VideoCardDiv').length).toEqual(1);
+    })
+
+    test('should contain the VideoImageDiv styled component', () => {
+        expect(wrapper.find('VideoImageDiv').length).toEqual(1);
+    })
+
+    test('should contain the TitleSpan styled component', () => {
+        expect(wrapper.find('TitleSpan').length).toEqual(1);
+    })
+
+    test('should contain the DescriptionSpan styled component', () => {
+        expect(wrapper.find('DescriptionSpan').length).toEqual(1);
+    })
+
+    test('VideoImageDiv background Image should be the thumbnails.medium.url prop', () => {
+        const imgDiv = wrapper.find('VideoImageDiv')
+        expect(imgDiv.prop('style').backgroundImage).toBe(`url(${data.snippet.thumbnails.medium.url})`)
+    })
+
+
+    test('Title Span styled component should display the title prop', () => {
+        const titleSpan = wrapper.find('TitleSpan')
+        expect(titleSpan.text()).toBe(data.snippet.title)
+    })
+
+    test('Title Span styled component should display the title prop', () => {
+        const titleSpan = wrapper.find('TitleSpan')
+        expect(titleSpan.text()).toBe(data.snippet.title)
+    })
+
+    test('Description Span styled component should display the description prop', () => {
+        const descriptionSpan = wrapper.find('DescriptionSpan')
+        expect(descriptionSpan.text()).toBe(data.snippet.description)
+    })
+})
+
diff --git a/src/Tests/components/__snapshots__/Layout.test.js.snap b/src/Tests/components/__snapshots__/Layout.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test of the Layout component main container should be rendered correctly 1`] = `
+<main
+  className="container"
+>
+  Navbar
+</main>
+`;