merging with develop to solve failing test issue

Author: Cyusa144

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    ["@babel/transform-runtime"]
+  ]
+}

.coveralls.yml

@@ -0,0 +1 @@
+repo_token: 2Mbru2yeJDWONxQvtfO5SWATvDi2VuZL9

.github/pull_request_template.md

@@ -0,0 +1,32 @@
+# Description
+
+This set up a project from scratch without using npx create-react-app
+
+
+## Type of change
+
+Please check the options that are relevant.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [X] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+# How should this be manually tested or reproduced?
+
+- Clone this repo
+- Run the command `npm i`
+- Run the command `npm start`
+
+# Checklist:
+
+- [X] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules
+
+# Screenshots (if applicable)

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    branches: [ develop ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x, 15.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+    - run: npm run coverage

.gitignore

@@ -0,0 +1,38 @@
+.DS_STORE
+node_modules
+scripts/flow/*/.flowconfig
+.flowconfig
+*~
+*.pyc
+.grunt
+_SpecRunner.html
+__benchmarks__
+build/
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+.env
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/.tempUserDataDir
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-scheduling-profiler/dist

Procfile

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

README.md

@@ -0,0 +1,116 @@
+# c4-barefoot-frontend
+
+![CI](https://github.com/atlp-rwanda/c4-barefoot-frontend/workflows/CI/badge.svg?)
+[![Maintainability](https://api.codeclimate.com/v1/badges/0e0e17e256bddb871c2b/maintainability)](https://codeclimate.com/github/atlp-rwanda/c4-barefoot-frontend/maintainability)
+[![Coverage Status](https://coveralls.io/repos/github/atlp-rwanda/c4-barefoot-frontend/badge.svg?branch=develop)](https://coveralls.io/github/atlp-rwanda/c4-barefoot-frontend?branch=develop)
+
+## Setting react project from scratch
+
+- First of all you need to clone project reposotory by running
+  `git clone git clone https://github.com/atlp-rwanda/c4-barefoot-frontend.git`
+
+## Initializing node module packages
+
+- run `npm init --yes` here package.json will be created imadiately
+
+## Installation dependencies
+
+    Here we need to install all packgages that will be used to set up our project
+
+- `npm install react`
+- `npm i react-dom`
+- `npm i react-roouter-dom`
+
+## Transipiling babel
+
+    We need compile our javascript file from ECMA2015 (ES6) to ES5
+
+- `@babel/core`
+- `@babel/preset-env`
+- `@babel/preset-react`
+- `babel-loader`
+- `babel/core`
+
+## Installing plugins that will allow react to unstander html files
+
+- `npm i html-webpack-plugin`
+- `npm i htm-loader`
+
+## In our project we need to style the pages we need to install this dependencies
+
+- `npm i css-loader`
+- `npm i style-loader`
+
+After that we will need to run our project in devlopment
+we have to make sure that webpack dependencies are installed like:
+
+- `npm i webpack-cli` Note: here you have to pay more attation on version of webpack-cli I am using version: `3.3.12` other version is not working
+- `npm i webpack`
+- `npm i webpack-dev-server` This will helps us to run server automatically after save when you change any file content
+
+## After that we need to tell webpack what to do
+
+```const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+process.env.NODE_ENV = 'development';
+
+module.exports = {
+    mode: 'development',
+    devtool: 'cheap-module-source-map',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, "build"),
+        publicPath: '/',
+        filename: 'bundle.js'
+    },
+    devServer: {
+        stats:'minimal',
+        overlay: true,
+        historyApiFallback: true,
+        disableHostCheck: true,
+        headers: { "Access-Control-Allow-Origin": "*"},
+        https: false
+    },
+
+    plugins: [
+        new HtmlWebpackPlugin({
+        template: "public/index.html"
+    })
+    ],
+    module : {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: ["babel-loader"]
+            },
+            {
+            test: /(\.css)$/,
+            use: ["style-loader", "css-loader"]
+            },
+            {
+                test: /\.html$/,
+                use: [
+                    {
+                    loader: "html-loader"
+                }
+                ]
+            }
+        ]
+    }
+};
+```
+
+### Here we go now we can start our project by running `npm start`
+
+you will get error that says `no start script available` now you can guess what do right now
+
+let jump into package.json and configure `start script`
+
+```"scripts": {
+    "start": "webpack-dev-server --config webpack.config.js --port 3000 --open"
+  }
+```
+
+so far you can run `npm start`

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

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

__tests__/App.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import App from '../src/App';
+import history from '../src/history';
+import {BrowserRouter as Router} from 'react-router-dom'
+import Routers from '../src/routes/Routers';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+describe('<App />', () =>{
+
+    it('matches snapshot', () => {
+        const props = {
+            history : jest.fn()
+        }
+        const wrapper = shallow(<App {...props} /> );
+        let apptest = (<Router history={history}><Routers/></Router>);
+        expect(toJson(wrapper)).toMatchSnapshot();
+    });
+    
+})