Add Eslint, Jest and tests

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended"
+  ],
+  "globals": {
+    "Atomics": "readable",
+    "SharedArrayBuffer": "readable"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "jest"],
+  "rules": {
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "error"
+  },
+  "parser": "babel-eslint"
+}

package.json

@@ -29,5 +29,17 @@
     "not ie <= 11",
     "not op_mini all"
   ],
-  "devDependencies": {}
+  "devDependencies": {
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.9.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-react-app": "^3.0.7",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "firebase-mock": "^2.2.10",
+    "prettier": "1.16.4",
+    "react-test-renderer": "^16.8.3"
+  }
 }

server/app.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 const handleAlert = require("./handleAlerts");
 const currentPrice = require("./currentPrice");
 

server/currentPrice.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 const currentPrice = (dataCoinApi, alerts, database) => {
   return alerts.forEach(alert => {
     if (

server/handleAlerts.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 var nodemailer = require("nodemailer");
 
 require("dotenv").config();

src/App.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/Components/Alert.test.js

@@ -0,0 +1,49 @@
+import { configure, mount, shallow } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { initializeFirebase } from "../firebase";
+
+import Alert from "./Alert";
+
+configure({ adapter: new Adapter() });
+
+describe("src/Components/Alert", () => {
+  it("should render", () => {
+    initializeFirebase();
+    const component = renderer.create(
+      <Alert
+        data={{
+          asset: "BTC",
+          amount: "600",
+          action: "above",
+          currency: "USD",
+          email: "[email protected]"
+        }}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should display 'Loading' when no data props", () => {
+    const alert = shallow(<Alert />);
+    expect(alert.text()).toEqual("Loading...");
+  });
+
+  it("should display an alert when receiving data props", () => {
+    const alert = mount(
+      <Alert
+        data={{
+          asset: "BTC",
+          amount: "600",
+          action: "above",
+          currency: "USD",
+          email: "[email protected]"
+        }}
+      />
+    );
+    expect(alert.text()).toContain("When BTC is above 600USD");
+  });
+});

src/Components/Form.js

@@ -42,19 +42,17 @@ class Form extends Component {
       headers: {
         "X-CoinAPI-Key": apikey
       }
-    })
-      .then(res =>
-        res.json().then(response => {
-          suggestions = response
-            .filter(asset => asset.type_is_crypto === 1)
-            .map(asset => {
-              return {
-                label: asset.asset_id
-              };
-            });
-        })
-      )
-      .catch(err => console.log(err));
+    }).then(res =>
+      res.json().then(response => {
+        suggestions = response
+          .filter(asset => asset.type_is_crypto === 1)
+          .map(asset => {
+            return {
+              label: asset.asset_id
+            };
+          });
+      })
+    );
   }
 
   addOrEditAlert = e => {
@@ -71,7 +69,7 @@ class Form extends Component {
       currency,
       email,
       emailSent: false,
-      key,
+      key
     };
 
     db.ref(`/alert/${key}`)

src/Components/Form.test.js

@@ -0,0 +1,55 @@
+import { configure, mount } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { initializeFirebase } from "../firebase";
+
+import Form from "./Form";
+
+configure({ adapter: new Adapter() });
+
+describe("src/Components/Form", () => {
+  it("should render", () => {
+    initializeFirebase();
+    const component = renderer.create(
+      <Form
+        initialValues={{
+          data: {
+            asset: "BTC",
+            amount: "600",
+            action: "above",
+            currency: "USD",
+            email: "[email protected]"
+          }
+        }}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("should render the Edition From when there are initial values", () => {
+    const form = mount(
+      <Form
+        initialValues={{
+          data: {
+            asset: "BTC",
+            amount: "600",
+            action: "above",
+            currency: "USD",
+            email: "[email protected]"
+          }
+        }}
+      />
+    );
+    expect(form.find(".FormEdit")).toHaveLength(1);
+    expect(form.find(".FormCreate")).toHaveLength(0);
+  });
+
+  it("should render the Creation From when there are no initial values", () => {
+    const form = mount(<Form />);
+    expect(form.find(".FormCreate")).toHaveLength(1);
+    expect(form.find(".FormEdit")).toHaveLength(0);
+  });
+});

src/Components/List.test.js

@@ -0,0 +1,19 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { initializeFirebase } from "../firebase";
+
+import List from "./List";
+
+configure({ adapter: new Adapter() });
+
+describe("src/Components/List", () => {
+  it("should render", () => {
+    initializeFirebase();
+    const component = renderer.create(<List />);
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/Components/__snapshots__/Alert.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`src/Components/Alert should render 1`] = `
+<div
+  className="Alert"
+>
+  <div
+    className="AlertText"
+  >
+    <div
+      className="buttons"
+    >
+      <button
+        onClick={[Function]}
+      >
+        <span
+          aria-label="edit"
+          role="img"
+        >
+          🖊️
+        </span>
+      </button>
+      <button
+        onClick={[Function]}
+      >
+        <span
+          aria-label="close"
+          role="img"
+        >
+          ❌
+        </span>
+      </button>
+    </div>
+    <div>
+      When 
+      BTC
+       is 
+      above
+       
+      600
+      USD
+       to: 
+      [email protected]
+    </div>
+  </div>
+</div>
+`;