wdonet · ruth-avelar · Feb 19, 2021 · Feb 19, 2021 · Feb 19, 2021 · Mar 5, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_KEY = AIzaSyCvXyI17JpqteOyWUvL_w7gjwXKOZXnbaI
diff --git a/.eslintrc b/.eslintrc
@@ -2,8 +2,9 @@
   "extends": ["react-app", "airbnb", "prettier", "prettier/react"],
   "plugins": ["prettier"],
   "rules": {
+    "react/jsx-filename-extension": [0],
+    "import/extensions": "off",
     "prettier/prettier": "error",
-    "react/jsx-filename-extension": "error",
     "react-hooks/exhaustive-deps": "warn",
     "import/no-unresolved": ["off", { "ignore": [".css$"] }],
     "import/prefer-default-export": "off",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,24 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@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": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-router": "^5.2.0",
+    "react-router-config": "^5.1.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:coverage": "yarn test -- --coverage --watchAll --coverageThreshold='{\"global\":{\"statements\":80}}'",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/**/*.{js,jsx}",
+      "!<rootDir>/node_modules/**"
+    ]
+  },
   "devDependencies": {
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/react-hooks": "^5.1.0",
+    "enzyme": "^3.11.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

diff --git a/public/index.html b/public/index.html
@@ -22,6 +22,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <script src="https://apis.google.com/js/api.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Test/TestApp.spec.js b/src/Test/TestApp.spec.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AuthProvider from '../providers/Auth/Auth.provider';
+import App from '../components/App';
+
+describe('App Components', () => {
+  it('User name input is present', () => {
+    render(
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    );
+    expect(screen.getAllByRole('textbox').length).toBe(1);
+  });
+
+  it('App Links are present', () => {
+    render(
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    );
+    expect(screen.getAllByRole('link')).toBeTruthy();
+  });
+
+  // it("dataRequested", () => {
+
+  //   const action = {
+  //     type: "TOGGLE_THEME",
+  //     payload: {
+  //      state: { currentTheme: "#9999" }
+  //     }
+  //   }
+  // });
+});
diff --git a/src/Test/TestFavoriteDetail.spec.js b/src/Test/TestFavoriteDetail.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import FavoriteDetail from '../pages/FavoriteVideos/FavoriteVideoDetail.page';
+
+describe('FavoriteDetail Components', () => {
+  const VideoArray = [
+    {
+      id: {
+        videoId: '123',
+      },
+      getVideoId: 'cHm3wVzcHjnE',
+      snippet: {
+        title: 'rick roll',
+        thumbnails: {
+          medium: {
+            url: 'https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg',
+          },
+        },
+      },
+    },
+  ];
+
+  it('Take FavoriteDetail Snapshot ', () => {
+    const component = <FavoriteDetail {...VideoArray} />;
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/Test/TestFavoriteVideo.spec.js b/src/Test/TestFavoriteVideo.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import FavoriteVideo from '../pages/FavoriteVideos/FavoriteVideo.page';
+
+describe('FavoriteVideo Components', () => {
+  const VideoArray = [
+    {
+      id: {
+        videoId: '123',
+      },
+      getVideoId: 'cHm3wVzcHjnE',
+      snippet: {
+        title: 'rick roll',
+        thumbnails: {
+          medium: {
+            url: 'https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg',
+          },
+        },
+      },
+    },
+  ];
+
+  it('Take FavoriteVideo Snapshot ', () => {
+    const component = <FavoriteVideo {...VideoArray} />;
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/Test/TestFortune.spec.js b/src/Test/TestFortune.spec.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AuthProvider from '../providers/Auth/Auth.provider';
+import Fortune from '../components/Fortune';
+
+describe('Fortune Components', () => {
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <AuthProvider>
+        <Fortune />
+      </AuthProvider>
+    );
+    expect(
+      asFragment(
+        <AuthProvider>
+          <Fortune />
+        </AuthProvider>
+      )
+    ).toMatchSnapshot();
+  });
+});
diff --git a/src/Test/TestHeader.spec.js b/src/Test/TestHeader.spec.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Header from '../components/Header';
+import { AppContext } from '../components/App/App.component';
+
+describe('Header Components', () => {
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <Header />
+        </AppContext.Provider>
+      </Router>
+    );
+    expect(asFragment(<Header />)).toMatchSnapshot();
+  });
+
+  it('Renders a textbox', () => {
+    // const { debug, getByRole } = render(
+    const { getByRole } = render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <Header />
+        </AppContext.Provider>
+      </Router>
+    );
+
+    const searchTextBox = getByRole('textbox');
+    expect(searchTextBox).toBeInTheDocument();
+    // debug();
+  });
+
+  it('Expect the string Dark Mode', () => {
+    render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <Header />
+        </AppContext.Provider>
+      </Router>
+    );
+    expect(screen.getByText('Dark Mode')).toBeTruthy();
+  });
+
+  it('Toggle element is present in Header', () => {
+    render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <Header />
+        </AppContext.Provider>
+      </Router>
+    );
+    expect(screen.getByRole('checkbox')).toBeTruthy();
+  });
+});
diff --git a/src/Test/TestHome.spec.js b/src/Test/TestHome.spec.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import AuthProvider from '../providers/Auth/Auth.provider';
+import WrapperVideo from '../pages/Home/videoContainer';
+
+describe('Home Components', () => {
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <AuthProvider>
+        <BrowserRouter>
+          <WrapperVideo />
+        </BrowserRouter>
+      </AuthProvider>
+    );
+    expect(
+      asFragment(
+        <AuthProvider>
+          <BrowserRouter>
+            <WrapperVideo />
+          </BrowserRouter>
+        </AuthProvider>
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('Display img', () => {
+    render(
+      <AuthProvider>
+        <BrowserRouter>
+          <WrapperVideo />
+        </BrowserRouter>
+      </AuthProvider>
+    );
+    expect(screen.getAllByRole('img')).toBeTruthy();
+  });
+});
diff --git a/src/Test/TestHookUseCallApi.spec.js b/src/Test/TestHookUseCallApi.spec.js
@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useCallAPI from '../utils/hooks/useCallApi.js';
+
+describe('useCallApi', () => {
+  it('verifies that it renders with no initial value', () => {
+    const { result } = renderHook(() => useCallAPI(null));
+    expect(result.current).toBe(null);
+  });
+
+  it('verifies that useCallAPI is defined ', () => {
+    const { result } = renderHook(() => useCallAPI());
+    expect(result.current).toBeDefined();
+  });
+
+  it('should not throw an error', () => {
+    renderHook(() => useCallAPI());
+  });
+
+  //   it('try to call the hook useCallAPI', () => {
+  //     const { result } = renderHook(() => useCallAPI());
+  //     expect(result.current).toBeFalsy();
+  //     act(() => {
+  //         result.current
+  //     })
+  //     expect(result.current).toBeFalsy();
+  // });
+});
diff --git a/src/Test/TestLayout.spec.js b/src/Test/TestLayout.spec.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AuthProvider from '../providers/Auth/Auth.provider';
+import Layout from '../components/Layout';
+
+describe('Layout Components', () => {
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <AuthProvider>
+        <Layout />
+      </AuthProvider>
+    );
+    expect(
+      asFragment(
+        <AuthProvider>
+          <Layout />
+        </AuthProvider>
+      )
+    ).toMatchSnapshot();
+  });
+});
diff --git a/src/Test/TestLogin.spec.js b/src/Test/TestLogin.spec.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AuthProvider from '../providers/Auth/Auth.provider';
+import Login from '../pages/Login';
+
+describe('Login Components', () => {
+  it('User name input is present', () => {
+    render(
+      <AuthProvider>
+        {' '}
+        <Login />
+      </AuthProvider>
+    );
+    expect(screen.getAllByRole('textbox').length).toBe(1);
+  });
+
+  it('H1 tag is present', () => {
+    render(
+      <AuthProvider>
+        <Login />
+      </AuthProvider>
+    );
+    expect(screen.getByText('Welcome back!')).toBeTruthy();
+  });
+
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <AuthProvider>
+        <Login />
+      </AuthProvider>
+    );
+    expect(
+      asFragment(
+        <AuthProvider>
+          <Login />
+        </AuthProvider>
+      )
+    ).toMatchSnapshot();
+  });
+});
diff --git a/src/Test/TestModalFavorite.spec.js b/src/Test/TestModalFavorite.spec.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ModalFavorite from '../components/ModalFavorite/ModalFavorite.component';
+import { AppContext } from '../components/App/App.component';
+
+describe('Modal Favorite Components', () => {
+  it('should take a snapshot', () => {
+    const { asFragment } = render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <ModalFavorite />
+        </AppContext.Provider>
+      </Router>
+    );
+    expect(asFragment(<ModalFavorite />)).toMatchSnapshot();
+  });
+
+  it('Home Link is present', () => {
+    render(
+      <Router>
+        <AppContext.Provider value={false}>
+          <ModalFavorite />
+        </AppContext.Provider>
+      </Router>
+    );
+    expect(screen.getAllByRole('link')).toBeTruthy();
+  });
+});