Minichallenge_1

.eslintrc

@@ -2,8 +2,7 @@
   "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
+    "react/jsx-filename-extension": [0],
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -1,61 +1,77 @@
 {
-  "name": "react-certification-2020",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^10.4.9",
-    "@testing-library/user-event": "^12.1.3",
-    "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"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint ./src --ext .js,.jsx",
-    "lint:fix": "eslint ./src --ext .js,.jsx --fix"
-  },
-  "devDependencies": {
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "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"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "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"
+    "name": "react-certification-2020",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@testing-library/dom": "^7.30.0",
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^10.4.9",
+        "@testing-library/user-event": "^12.1.3",
+        "history": "^5.0.0",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1",
+        "react-router": "^5.2.0",
+        "react-router-dom": "^5.2.0",
+        "react-scripts": "^4.0.3",
+        "styled-components": "^5.2.1",
+        "uuid": "^8.3.2"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
+        "eject": "react-scripts eject",
+        "lint": "eslint ./src --ext .js,.jsx",
+        "lint:fix": "eslint ./src --ext .js,.jsx --fix"
+    },
+    "devDependencies": {
+        "eslint-config-airbnb": "^18.2.0",
+        "eslint-config-prettier": "^6.11.0",
+        "eslint-plugin-eslint-comments": "^3.2.0",
+        "eslint-plugin-import": "^2.22.0",
+        "eslint-plugin-jsx-a11y": "^6.3.1",
+        "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.2"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "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": [
+            "**/*.{js,jsx}",
+            "!**/node_modules/**",
+            "!**/coverage/**",
+            "!**/serviceWorker.js",
+            "!<rootDir>/src/globalStyles.js",
+            "!<rootDir>/src/index.js"
+        ]
     }
-  }
 }

public/index.html

@@ -26,6 +26,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="https://apis.google.com/js/api.js"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/__tests__/App.test.js

@@ -0,0 +1,8 @@
+describe('App Test', () => {
+
+    test("Ensure all videos in the mock file are getting rendered", () => {
+
+
+    });
+
+})

src/__tests__/Header.test.js

@@ -0,0 +1,8 @@
+describe('Header Test', () => {
+
+
+    test("Ensure all App is getting rendered", () => {
+
+
+    });
+})

src/__tests__/VideoCard.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import VideoCard from '../components/VideoCard';
+
+
+describe('VideoCard Test', () => {
+    const id = {videId:1};
+    const thumbnail= {high:"prueba.jpg"};
+    const snippet={title:"Test", description:"Test Description", thumbnails:thumbnail};
+    const  setShowDetail = ()=> {
+
+    }
+
+    test("VideoCard is getting rendered", () => {
+        const videoCard = renderer
+                .create(<VideoCard id={id} snippet={snippet} setShowDetail={setShowDetail} />)
+                .toJSON();
+
+        expect(videoCard).toMatchSnapshot();
+
+    });
+
+
+    test("Ensure that Video Card is rendered", () => {
+
+
+    });
+
+    test("Ensure that Thumbnail in Video Card match with the one in the mock item", () => {
+
+
+    });
+
+    test("Ensure that Title in Video Card match with the mock item selected", () => {
+
+
+    });
+
+    test("Ensure that Title in Video Card match with the mock item selected", () => {
+
+
+    });
+
+});

src/__tests__/VideoDetail.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import VideoDetail from '../components/VideoDetail';
+import data from '../mock/youtube-videos-mock.json';
+
+
+describe('VideoDetail Test', () => {
+
+    test("Ensure Detail video component is getting rendered", () => {
+        const videoData = {id:"nmXMgqjQzls", title:"Test Titulo", desciption: "Test description", setShowDetail: () =>{}}
+
+        const videoDetail = renderer
+            .create(  <VideoDetail videoid={videoData} data= {data.items} />)
+            .toJSON();
+
+            expect(videoDetail).toMatchSnapshot();
+
+    });
+
+
+    test("Ensure that main video is rendered", () => {
+
+
+    });
+
+    test("Ensure that Title in Video Card match with the mock item selected", () => {
+
+
+    });
+
+    test("Ensure that Description is displayed selected", () => {
+
+
+    });
+
+});

src/__tests__/VideoList.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import VideoList from '../components/VideoList';
+import data from '../mock/youtube-videos-mock.json';
+
+
+describe('Video List Test', () => {
+    const setShowDetail = () => {
+    };
+
+    test("Ensure Video List is getting rendered", () => {
+        const videoList = renderer
+            .create( < VideoList data = { data.items }
+                setShowDetail = { setShowDetail }/>)
+            .toJSON();
+
+        expect(videoList).toMatchSnapshot();
+    });
+
+
+    test("Ensure that Video Card is rendered", () => {
+    });
+
+    test("Ensure that Thumbnail in Video Card match with the one in the mock item", () => {
+    });
+
+    test("Ensure that Title in Video Card match with the mock item selected", () => {
+
+    });
+
+    test("Ensure that Title in Video Card match with the mock item selected", () => {
+    });
+});

src/__tests__/__snapshots__/VideoCard.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoCard Test VideoCard is getting rendered 1`] = `
+<div
+  className="sc-bdfBwQ gTyMyW Video-Card"
+>
+  <button
+    className="sc-eCssSg foQmNZ"
+    onClick={[Function]}
+    type="button"
+  >
+    <div
+      className="sc-gsTCUz KZrsn"
+    >
+      <img
+        alt="default"
+        className="sc-hKgILt cbCdcf"
+      />
+    </div>
+    <div
+      className="sc-dlfnbm liHOfl"
+    >
+      <h3>
+        Test
+      </h3>
+      <p>
+        Test Description
+      </p>
+    </div>
+  </button>
+</div>
+`;