Merge pull request #12 from andela/ft-implement-requests-table

#168049946 Implement requests table

.circleci/config.yml

@@ -24,4 +24,5 @@ jobs:
           command: |
             ./cc-test-reporter before-build
             npm test -- -u --coverage
-            ./cc-test-reporter after-build --exit-code $?
+            ./cc-test-reporter after-build --exit-code $?
+            

package.json

@@ -13,6 +13,8 @@
     "jwt-decode": "^2.2.0",
     "node-sass": "^4.13.0",
     "nyc": "^14.1.1",
+    "moxios": "^0.4.0",
+    "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-redux": "^7.1.1",
@@ -21,6 +23,8 @@
     "react-toastify": "^5.4.0",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
+    "redux-api-middleware": "^3.0.1",
+    "redux-mock-store": "^1.5.3",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/__mocks__/__get_user_request_failure__.json

@@ -0,0 +1,4 @@
+{
+    "status": 404,
+    "error": "This user doesn't have any available requests!"
+}

src/__mocks__/__get_user_request_success__.json

@@ -0,0 +1,33 @@
+{
+  "response": {
+    "data": [
+      {
+        "status": 200,
+        "message": "user requests",
+        "data": [
+          {
+            "id": 12,
+            "user_id": 9,
+            "request_type": "OneWay",
+            "location_id": 1,
+            "departure_date": "2019-11-16 11:41:42.974 +00:00",
+            "return_date": "2019-12-20 11:41:42.974 +00:00",
+            "destinations": [
+              {
+                "check_in": "2019-11-09T11:41:42.973Z",
+                "check_out": "2019-11-16T11:41:42.973Z",
+                "destination_id": 2,
+                "accomodation_id": 1
+              }
+            ],
+            "reason": "Visit Uganda",
+            "status": "Rejected",
+            "createdAt": "2019-11-16T11:41:42.974Z",
+            "updatedAt": "2019-11-16T11:41:42.974Z"
+          }
+        ]
+      }
+    ]
+
+  }
+}

src/__tests__/actions/UserRequestActions.test.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+import React from "react";
+import thunk from "redux-thunk";
+import moxios from "moxios";
+import configureStore from "redux-mock-store";
+import http from "../../services/httpServices";
+import { GET_REQUESTS, GET_ERRORS } from "../../redux/actions/actionType";
+import { getUserRequests } from "../../redux/actions/UserRequestActions";
+import successresponse from "../../__mocks__/__get_user_request_success__.json";
+import errorreponse from "../../__mocks__/__get_user_request_failure__.json";
+
+const mockedStore = configureStore([thunk]);
+const flushPromises = () => new Promise(resolve => setImmediate(resolve));
+let store;
+
+describe("Get User Requests actions", () => {
+  beforeEach(() => {
+    store = mockedStore();
+    moxios.install(http.dbCall);
+  });
+
+  afterEach(() => {
+    moxios.uninstall(http.dbCall);
+  });
+
+  it("should retrieve users requests", async () => {
+    moxios.wait(async () => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith(successresponse);
+      await flushPromises();
+    });
+    await store.dispatch(getUserRequests());
+    const calledActions = store.getActions();
+    expect(calledActions[0].type).toEqual(GET_REQUESTS);
+  });
+  it("should return a failure message when User doesn't have any request", async () => {
+    moxios.wait(async () => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith(errorreponse);
+      await flushPromises();
+    });
+    await store.dispatch(getUserRequests());
+    const calledActions = store.getActions();
+    expect(calledActions[0].type).toEqual(GET_ERRORS);
+  });
+});

src/__tests__/components/user-requests/UserRequests.test.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-multi-assign */
+/* eslint-disable no-undef */
+import React from "react";
+import Enzyme, { mount, shallow } from "enzyme";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import Adapter from "enzyme-adapter-react-16/build";
+import { Provider } from "react-redux";
+import UserRequests, {
+  UserRequests as UserRequestsComponent,
+} from "../../../components/user-requests/UserRequests";
+import successresponse from "../../../__mocks__/__get_user_request_success__.json";
+
+Enzyme.configure({ adapter: new Adapter() });
+const store = configureStore([thunk])();
+const props = {
+  errors: {},
+  getUserRequests: jest.fn(),
+  requests: {
+    requestFound: true,
+    requests: [
+      {
+        id: 8,
+        user_id: 9,
+        request_type: "OneWay",
+        location_id: 3,
+        departure_date: "2019-11-16",
+        return_date: null,
+        destinations: [
+          {
+            room_id: 2,
+            check_in: "2019-11-18T15:16:38.447Z",
+            check_out: "2019-12-27T15:16:38.447Z",
+            destination_id: 4,
+            accomodation_id: 1,
+          },
+        ],
+        reason: "Visit Lagos",
+        status: "Pending",
+        createdAt: "2019-11-11T06:53:54.602Z",
+        updatedAt: "2019-11-11T06:53:54.602Z",
+      },
+    ],
+  },
+};
+
+describe("User Requests View", () => {
+  const component = mount(
+    <UserRequestsComponent {...props} history={{ push: jest.fn() }} />,
+  );
+  it("should render User Request View without crashing", () => {
+    expect(component).toHaveLength(1);
+  });
+  it(" should trigger componentWillReceiveProps in User Requests view", () => {
+    const nextPropsSuccess = { ...props };
+    component.setProps(nextPropsSuccess);
+    expect(component).toHaveLength(1);
+  });
+  it("should trigger componentWillReceiveProps errors case in User Requests view", () => {
+    props.errors.error = "Test error";
+    const nextPropsSuccess = { ...props };
+    component.setProps(nextPropsSuccess);
+    expect(component).toHaveLength(1);
+  });
+});
+describe("User Requests View mapStateToProps", () => {
+  it("should cover mapStateToProps errors case in User Requests view", () => {
+    const component = mount(<UserRequestsComponent {...props} history={{ push: jest.fn() }} />);
+    const nextPropsError = { successresponse };
+    component.setProps(nextPropsError);
+  });
+});

src/__tests__/redux/ErrorReducer.test.js

@@ -0,0 +1,11 @@
+import ErrorReducer from '../../redux/reducers/ErrorReducer';
+
+describe('Error reducer unit tests', () => {
+  it('should reduce an error when thrown', () => {
+    const state = ErrorReducer(
+      {},
+      { type: 'GET_ERRORS', payload: { } },
+    );
+    expect(state).toEqual({ });
+  });
+});

src/__tests__/redux/UserRequestsReducer.test.js

@@ -0,0 +1,61 @@
+import UserRequestsReducer from '../../redux/reducers/UserRequestsReducer';
+
+describe('UserRequestsReducer unit tests', () => {
+  it('should reduce user requests', () => {
+    const state = UserRequestsReducer(
+      { requestFound: false, requests: [] },
+      {
+        type: 'GET_REQUESTS',
+        payload: [
+          {
+            id: 8,
+            user_id: 9,
+            request_type: 'OneWay',
+            location_id: 3,
+            departure_date: '2019-11-16',
+            return_date: null,
+            destinations: [
+              {
+                room_id: 2,
+                check_in: '2019-11-18T15:16:38.447Z',
+                check_out: '2019-12-27T15:16:38.447Z',
+                destination_id: 4,
+                accomodation_id: 1,
+              },
+            ],
+            reason: 'Visit Lagos',
+            status: 'Pending',
+            createdAt: '2019-11-11T06:53:54.602Z',
+            updatedAt: '2019-11-11T06:53:54.602Z',
+          },
+        ],
+      },
+    );
+    expect(state).toEqual({
+      requestFound: true,
+      requests: [
+        {
+          id: 8,
+          user_id: 9,
+          request_type: 'OneWay',
+          location_id: 3,
+          departure_date: '2019-11-16',
+          return_date: null,
+          destinations: [
+            {
+              room_id: 2,
+              check_in: '2019-11-18T15:16:38.447Z',
+              check_out: '2019-12-27T15:16:38.447Z',
+              destination_id: 4,
+              accomodation_id: 1,
+            },
+          ],
+          reason: 'Visit Lagos',
+          status: 'Pending',
+          createdAt: '2019-11-11T06:53:54.602Z',
+          updatedAt: '2019-11-11T06:53:54.602Z',
+        },
+      ],
+    });
+  });
+});

src/components/Router.js

@@ -3,7 +3,7 @@ import { Route, Switch } from "react-router-dom";
 import ProtectedRoute from "./protected-route/ProtectedRoute";
 import VerifyEmailPage from "./register-page/VerifyEmail";
 import {
-  LandingPage, LoginPage, NotFound, Register,
+  LandingPage, LoginPage, NotFound, Register, UserRequests,
 } from "./index";
 
 const Router = () => (
@@ -12,6 +12,7 @@ const Router = () => (
     <Route path="/login" component={LoginPage} />
     <Route path="/register" component={Register} />
     <Route path="/verify" component={VerifyEmailPage} />
+    <ProtectedRoute exact path="/requests" component={UserRequests} />
     <Route component={NotFound} />
   </Switch>
 );

src/components/index.js

@@ -1,8 +1,9 @@
+/* eslint-disable import/no-named-as-default-member */
+/* eslint-disable import/no-named-as-default */
 import LandingPage from "./landing-page/LandingPage";
 import LoginPage from "./login-page/LoginPage";
 import NotFound from "./not-found/NotFound";
 import Register from "./register-page/RegisterPage";
+import UserRequests from "./user-requests/UserRequests";
 
-export {
-  LandingPage, LoginPage, NotFound, Register,
-};
+export { LandingPage, LoginPage, NotFound, Register, UserRequests };