Merge pull request #12 from andela/fix-ch-deploy-frontend-to-Heroku-1…

…67664242

#167664242 Add heroku:build command

Procfile

@@ -0,0 +1 @@
+web: npm run start

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  coverageDirectory: 'coverage',
+  testPathIgnorePatterns: ['/node_modules/'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
+  },
+  collectCoverageFrom: [
+    '**/*.{js,jsx}',
+    '!**/node_modules/**',
+    '!jest.config.js',
+    '!**/dist/**',
+    '!**/webpack-build-utils/**',
+    '!README.md',
+    'Procfile',
+    'Postcss.config.js',
+    '!package.json',
+    '!package-lock.json',
+    '!cypress.json',
+    '!<rootDir>/server.js',
+    '!webpack.common.js',
+    '!webpack.config.js',
+    '!**/coverage/**',
+    '!**/tests/**'
+  ]
+};

package.json

@@ -4,17 +4,18 @@
   "description": "errorSwag frontend",
   "main": "index.js",
   "scripts": {
-    "test": "jest --coverage",
     "lint": "eslint '**/*.js'",
     "lint:fix": "prettier-eslint \"**/*.{js,json}\" --write",
     "prettier": "prettier **/*.{js,json} --write",
     "format": "pretty-quick",
     "develop": "webpack --env.mode development --watch",
-    "heroku-postbuild": "webpack --env.mode production",
+    "heroku-postbuild": "npm run build",
+    "start": "node server.js",
     "build": "webpack --env.mode production",
-    "start": "webpack-dev-server --hot --env.mode development --open",
+    "start:dev": "webpack-dev-server --hot --env.mode development --open",
     "cypress": "cypress open",
-    "test:watch": "npm run test -- --watch",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch --coverage",
     "coverage": "cat ./coverage/lcov.info | coveralls"
   },
   "husky": {
@@ -79,6 +80,7 @@
     "autoprefixer": "^9.6.1",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.1.0",
+    "express": "^4.17.1",
     "glob": "^7.1.4",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",

server.js

@@ -0,0 +1,15 @@
+const express = require('express');
+const path = require('path');
+
+const port = process.env.PORT || 9000;
+const app = express();
+
+app.use(express.static(`${__dirname}/dist`));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve(__dirname, './dist/index.html'));
+});
+
+app.listen(process.env.PORT || 3000, () => {
+  process.stdout.write(`Listening on port ${port}`);
+});

src/pages/hompage.js

@@ -1,13 +1,14 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
+import logo from '../assets/images/logo.png';
 
 const Homepage = () => {
   return (
     <div className="m-20 text-center">
       <h1 className="text-green-700">
         Welcome to ErrorSwag, what on your mind?
       </h1>
-      <img src="../../public/images/logo.png" alt="errorswag logo" />
+      <img src={logo} alt="errorswag logo" />
       <Link to="/login">
         <button
           type="button"

tests/__snapshots__/App.spec.js.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Application test should work fine Home Page 1`] = `
+<div
+  className="m-20 text-center"
+>
+  <h1
+    className="text-green-700"
+  >
+    Welcome to ErrorSwag, what on your mind?
+  </h1>
+  <img
+    alt="errorswag logo"
+    src={Object {}}
+  />
+  <Link
+    to="/login"
+  >
+    <button
+      className="bg-green-300 text-white p-2 hover:bg-green-700 border hover:border-red-300"
+      type="button"
+    >
+      Login
+    </button>
+  </Link>
+</div>
+`;
+
+exports[`Application test should work fine on App 1`] = `
+<BrowserRouter>
+  <Routes />
+</BrowserRouter>
+`;
+
+exports[`Application test should work fine on Login Page 1`] = `
+<Fragment>
+  <Link
+    to="/"
+  >
+    <button
+      style={
+        Object {
+          "backgroundColor": "sky-blue",
+          "border": "none",
+          "color": "black",
+          "marginLeft": "80%",
+          "padding": "7px 9px",
+        }
+      }
+      type="button"
+    >
+      Home
+    </button>
+  </Link>
+  <form>
+    <label
+      style={
+        Object {
+          "height": "2em",
+          "width": "50%",
+        }
+      }
+    >
+      Email
+    </label>
+    <input
+      placeholder="example@email.com"
+      style={
+        Object {
+          "border": "1px solid #333",
+          "height": "2em",
+          "width": "100%",
+        }
+      }
+      type="email"
+    />
+    <label
+      style={
+        Object {
+          "height": "2em",
+          "width": "50%",
+        }
+      }
+    >
+      Password
+    </label>
+    <input
+      placeholder="......."
+      style={
+        Object {
+          "border": "1px solid #333",
+          "height": "2em",
+          "width": "100%",
+        }
+      }
+      type="password"
+    />
+    <input
+      style={
+        Object {
+          "backgroundColor": "sky-blue",
+          "border": "none",
+          "color": "black",
+          "marginLeft": "80%",
+          "padding": "7px 9px",
+        }
+      }
+      type="submit"
+      value="login"
+    />
+  </form>
+</Fragment>
+`;
+
+exports[`Application test should work fine on Routes 1`] = `
+<Switch>
+  <Route
+    component={[Function]}
+    exact={true}
+    path="/"
+  />
+  <Route
+    component={[Function]}
+    exact={true}
+    path="/login"
+  />
+</Switch>
+`;

webpack.common.js

@@ -28,7 +28,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(svg|png|gif|jpeg|jpg)$/,
+        test: /\.(svg|png|jpeg|jpg)$/,
         use: {
           loader: 'file-loader',
           options: {