Merge pull request #12 from blessenm/#11/startup-test

#11 wip

Author: Blessan Mathew

package.json

@@ -26,6 +26,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "test:ci": "yarn run test --watchAll=false",
+    "test:cov": "yarn run test --watchAll=false --coverage",
     "eject": "react-scripts eject",
     "format": "prettier --write"
   },

src/App.test.js

@@ -1,4 +1,10 @@
 body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   background-color: #282c34;
   color: #ffffff;

src/App.css src/components/App.css

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
 import "./App.css";
 
-import useFirebase from "./hooks/useFirebase";
+import useFirebase from "../hooks/useFirebase";
 
-import Login from "./components/Login";
-import Add from "./components/Add";
-import View from "./components/View";
+import Login from "./Login";
+import Add from "./Add";
+import View from "./View";
 
 function App() {
   const [words, setWords] = useState([]);

src/App.js src/components/App.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-function View({ words }) {
+function View({ words = [] }) {
   return (
     <section className="wb-view">
       {words.map(({ word, article, meaning, note, type }, index) => (

src/components/View.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { render, wait } from "@testing-library/react";
+import App from "../App";
+import useFirebase from "../../hooks/useFirebase";
+
+jest.mock("../../hooks/useFirebase");
+
+test("Login Page", async () => {
+  useFirebase.mockReturnValue({
+    user: null,
+    getAllWords: () =>
+      Promise.resolve([
+        { type: "noun", word: "Tisch", article: "Der", meaning: "Table" }
+      ])
+  });
+
+  const { getByDisplayValue, getByPlaceholderText, getByText } = render(
+    <App />
+  );
+  const usernameInput = getByDisplayValue(/blessanm86/i);
+  const passwordInput = getByPlaceholderText(/password/i);
+  const loginButton = getByText(/login/i);
+
+  expect(usernameInput).toBeInTheDocument();
+  expect(passwordInput).toBeInTheDocument();
+  expect(loginButton).toBeInTheDocument();
+  expect(loginButton).toBeDisabled();
+
+  await wait();
+});

src/components/__tests__/App.js

@@ -109,4 +109,19 @@ describe("Hooks: useForm Tests", () => {
 
     expect(result.current.isValid).toBe(true);
   });
+
+  test("Should return the isValue as false if any input has empty value", () => {
+    const { result } = renderHook(() => useForm(INITIAL_STATE));
+
+    act(() => {
+      result.current.change({
+        target: {
+          name: "password",
+          value: ""
+        }
+      });
+    });
+
+    expect(result.current.isValid).toBe(false);
+  });
 });

src/hooks/__tests__/useForm.js

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+import App from "./components/App";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));