Merge pull request #31 from highideas/develop

Develop

app/components/IClient/styles.css

@@ -3,3 +3,17 @@
     background-color: #00d1b2;
     color: #333;
 }
+
+.withPadding {
+    padding-top: 30px;
+}
+
+.withoutPadding {
+    padding-top: 0px;
+}
+
+@media screen and (max-width: 768px) {
+    .body-primary {
+        padding-top: 30px;
+    }
+}

app/components/NavMenu/NavMenu.js

@@ -7,6 +7,8 @@ class NavMenu extends React.Component
     constructor(props, context) {
         super(props, context);
         this.toggleNavStatus = this.toggleNavStatus.bind(this);
+        this.isMobile = this.isMobile.bind(this);
+        this.isNotMobile = this.isNotMobile.bind(this);
         this.hide = this.hide.bind(this);
         this.state = {
             toggleNavStatus: ''
@@ -28,17 +30,38 @@ class NavMenu extends React.Component
         this.setState({toggleNavStatus: isActive});
     }
 
+    isMobile() {
+        if (window.screen.width < 768) {
+            return this.showOfflineInfo();
+        }
+        return '';
+    }
+
+    isNotMobile() {
+        if (window.screen.width > 768) {
+            return this.showOfflineInfo();
+        }
+        return '';
+    }
+
+    showOfflineInfo() {
+        return (
+            <span className="nav-center nav-item">
+                <Offline />
+            </span>
+        );
+    }
+
     render() {
         return (
             <nav className="nav has-shadow" id="top">
                 <div className="container">
                     <div className="nav-left">
                         <a className="nav-item" href="../index.html">IClient</a>
+                        {this.isMobile()}
                     </div>
                     <span className="nav-center nav-menu is-active">
-                        <span className="nav-item">
-                            <Offline />
-                        </span>
+                        {this.isNotMobile()}
                     </span>
                     <span className={ `nav-toggle ${this.state.toggleNavStatus}` } onClick={this.toggleNavStatus}>
                         <span></span>

app/services/Area.js

@@ -7,11 +7,17 @@ const Area = {
     },
 
     getConfig() {
-        return {
+        let config = {
             headers: {
                 Authorization : window.localStorage.getItem('token')
-            }
+            },
+            data: {}
         };
+
+        if (jsonStubHeaders != undefined && jsonStubHeaders != '') {
+            Object.assign(config.headers, JSON.parse(jsonStubHeaders));
+        }
+        return config;
     },
 
     getAll() {

app/services/Client.js

@@ -7,11 +7,17 @@ const Client = {
     },
 
     getConfig() {
-        return {
+        let config = {
             headers: {
                 Authorization : window.localStorage.getItem('token')
-            }
+            },
+            data: {}
         };
+
+        if (jsonStubHeaders != undefined && jsonStubHeaders != '') {
+            Object.assign(config.headers, JSON.parse(jsonStubHeaders));
+        }
+        return config;
     },
 
     getClients() {

app/services/User.js

@@ -1,12 +1,25 @@
 import axios from 'axios';
 
 const User = {
+
+    getConfig() {
+        let config = {
+            headers: {
+            }
+        };
+
+        if (jsonStubHeaders != undefined && jsonStubHeaders != '') {
+            Object.assign(config.headers, JSON.parse(jsonStubHeaders));
+        }
+        return config;
+    },
+
     login(username, password) {
         let auth = {
             username: username,
             password: password
         };
-        return axios.post(`${HOST}/authenticate`, auth);
+        return axios.post(`${HOST}/authenticate`, auth, this.getConfig());
     }
 };
 

app/services/Visit.js

@@ -7,11 +7,17 @@ const Visit = {
     },
 
     getConfig() {
-        return {
+        let config = {
             headers: {
                 Authorization : window.localStorage.getItem('token')
-            }
+            },
+            data: {}
         };
+
+        if (jsonStubHeaders != undefined && jsonStubHeaders != '') {
+            Object.assign(config.headers, JSON.parse(jsonStubHeaders));
+        }
+        return config;
     },
 
     getGroupByArea() {

package.json

@@ -48,7 +48,8 @@
     ],
     "collectCoverage": true,
     "globals": {
-      "HOST": "http://localhost:3000"
+      "HOST": "http://localhost:3000",
+      "jsonStubHeaders": ""
     },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",

public/index.html

@@ -4,10 +4,10 @@
         <meta charset="utf-8">
         <meta name="theme-color" content="#00d1b2">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-        <link rel="manifest" href="/manifest.json">
+        <link rel="manifest" href="manifest.json">
         <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
-        <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
+        <link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
         <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
         <title>React Client</title>
     </head>

public/service-worker.js

@@ -1,9 +1,9 @@
 var CACHE_NAME = 'v1::iClient';
 var urlsToCache = [
     '/',
-    '/index.html',
-    '/dist/bundle.min.js',
-    '/favicons/favicon-16x16.png',
+    'index.html',
+    'dist/bundle.min.js',
+    'favicons/favicon-16x16.png',
     'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js',
     'https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js',

tests/Area.test.js

@@ -89,4 +89,35 @@ describe('Test Area', () => {
         }, 0);
     });
 
+    it('Should show headers to stub json', (done) => {
+
+        let response = require('AreasResponseMock').default;
+        let Area;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        jsonStubHeaders = '{ "JsonStub-User-Key": "user-key", "JsonStub-Project-Key": "project-key" }';
+
+        mockAdapter.onGet(HOST + '/api/v1/visit/group/area').reply(200, response);
+
+        Area = require('components/Area/Area').default;
+
+        component = shallow(
+            <Area />
+        );
+
+        setTimeout(() => {
+            expect(
+                shallow(
+                    component.state().areas[0]
+                ).find('.title').at(0).text()
+            ).toEqual('Center');
+            expect(
+                shallow(
+                    component.state().areas[1]
+                ).find('.title').at(0).text()
+            ).toEqual('South');
+            done();
+        }, 0);
+    });
+
 });

tests/List.Area.test.js

@@ -101,5 +101,35 @@ describe('Test Area', () => {
         }, 0);
     });
 
+    it('Should show headers to stub json', (done) => {
+        let response = {
+            areas: [
+                {_id: 'South', parent: 'Center', ancestors: 'Center'},
+                {_id: 'North', parent: 'Center', ancestors: 'Center'},
+            ]
+        };
+        let Area;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        jsonStubHeaders = '{ "JsonStub-User-Key": "user-key", "JsonStub-Project-Key": "project-key" }';
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(200, response);
+
+        Area = require('components/Area/List/Area').default;
+
+        component = shallow(
+            <Area />
+        );
+
+        setTimeout(() => {
+            try {
+                component.update();
+                expect(component.find('tbody td').at(0).text()).toEqual('South');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 0);
+    });
 });
 

tests/List.Client.test.js

@@ -89,5 +89,34 @@ describe('Test Client', () => {
         }, 0);
     });
 
+    it('Should show headers to stub json', (done) => {
+
+        let response = {
+            clients: [
+                {name: 'Jon Snow', address: '7 Street', city: 'Winterfell'},
+                {name: 'Cotter Pyke', address: '0 Street', city: 'Castle Black'},
+            ]
+        };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        jsonStubHeaders = '{ "JsonStub-User-Key": "user-key", "JsonStub-Project-Key": "project-key" }';
+
+        mockAdapter.onGet(HOST + '/api/v1/client').reply(200, response);
+
+        Client = require('components/Client/List/Client').default;
+
+        component = shallow(
+            <Client />
+        );
+
+        setTimeout(() => {
+            component.update();
+            expect(component.find('tbody td').at(0).text()).toEqual('Jon Snow');
+            expect(component.find('tbody td').at(1).text()).toEqual('7 Street - Winterfell');
+            done();
+        }, 0);
+    });
+
 });
 

tests/Login.test.js

@@ -161,5 +161,36 @@ describe('Test Login', () => {
         }, 0);
     });
 
+    it('Should show headers to stub json', (done) => {
+
+        let Login = require('components/Login/Login').default;
+        let response = { error:"User Not Found" };
+        let mockAdapter = new MockAdapter(axios);
+        jsonStubHeaders = '{ "JsonStub-User-Key": "user-key", "JsonStub-Project-Key": "project-key" }';
+
+        mockAdapter.onPost(HOST + '/authenticate').reply(401, response);
+
+        let component = mount(
+            <Login />,
+            { context }
+        );
+
+        let inputLogin = component.find('form div p input[type="text"]');
+        let inputPassword = component.find('form div p input[type="password"]');
+
+        inputLogin.node.value = 'Astolfo';
+        inputLogin.simulate('change', inputLogin);
+
+        inputPassword.node.value = 'abcd';
+        inputPassword.simulate('change', inputPassword);
+
+        component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+        setTimeout(() => {
+            expect(component.state().error).toEqual('User Not Found');
+            done();
+        }, 0);
+    });
+
 });
 

tests/NavMenu.test.js

@@ -57,5 +57,40 @@ describe('Test NavMenu', () => {
 
         done();
     });
+
+    it('should show message of offline with mobile screen', (done) => {
+
+        window.screen.__defineGetter__('width', function(){
+            return 600;
+        });
+
+        let component = shallow(
+            <NavMenu />
+        );
+
+        component.instance().setState({ toggleNavStatus: 'whatever'} );
+        expect(component.state().toggleNavStatus).toEqual('whatever');
+        component.instance().hide(null);
+        expect(component.state().toggleNavStatus).toEqual('');
+
+        done();
+    });
+
+    it('should show message of offline with desktop screen', (done) => {
+
+        window.screen.__defineGetter__('width', function(){
+            return 900;
+        });
+
+        let component = shallow(
+            <NavMenu />
+        );
+        component.instance().setState({ toggleNavStatus: 'whatever'} );
+        expect(component.state().toggleNavStatus).toEqual('whatever');
+        component.instance().hide(null);
+        expect(component.state().toggleNavStatus).toEqual('');
+
+        done();
+    });
 });
 

webpack.config.js

@@ -40,6 +40,7 @@ var uglifyJsPlugin = new webpack.optimize.UglifyJsPlugin({
 });
 
 var definePlugin = new webpack.DefinePlugin({
+    jsonStubHeaders: JSON.stringify(process.env.jsonStubHeaders || ''),
     HOST: JSON.stringify(process.env.HOST || 'http://localhost:3000'),
     'process.env': {
         'NODE_ENV': JSON.stringify('production')
@@ -63,7 +64,7 @@ module.exports = {
     entry: "./app/App.js",
     output: {
         path: 'public/dist/',
-        publicPath: '/dist/',
+        publicPath: 'dist/',
         filename: "bundle.min.js",
     },
     module: {