feat(accommodations-view): add all accommodations view

- add a view of all the accommodations

[Start #168049972]

.env.example

@@ -0,0 +1 @@
+REACT_APP_MAP_API_KEY=

package.json

@@ -13,6 +13,7 @@
     "@storybook/react": "^5.2.5",
     "axios": "^0.19.0",
     "focus-trap-react": "^6.0.0",
+    "google-maps-react": "^2.0.2",
     "history": "^4.10.1",
     "joi-browser": "^13.4.0",
     "jwt-decode": "^2.2.0",

src/__mocks__/fixtures.js

@@ -3,43 +3,21 @@ export const loginPayload = {
   user: { email: "test user" },
 };
 
+export const user = {
+  id: 28,
+  email: "amilylisy@yahoo.com",
+  firstname: "amily",
+  lastname: "kassim",
+  role_value: 1,
+  username: "amilykassim",
+};
+
 export const payload = {
   status: 20,
   message: "Sign up the",
-  data: {
-    id: 28,
-    email: "amilylisy@yahoo.com",
-    firstname: "amily",
-    lastname: "kassim",
-    role_value: 1,
-    username: "amilykassim",
-  },
+  data: user,
   token: "eyJhbGcibK-l8Ic4",
 };
-[
-  {
-    createdAt: "2019-11-13T10:07:21.401Z",
-    id: 8,
-    message: "visit nairobi",
-    request_id: 12,
-    seen: "false",
-    type: "ReturnTrip",
-    updatedAt: "2019-11-15T13:13:44.347Z",
-    user_id: 49,
-    notPaneDisplay: false,
-  },
-  {
-    createdAt: "2019-11-13T10:07:21.401Z",
-    id: 9,
-    message: "visit nairobi again",
-    request_id: 12,
-    seen: "false",
-    type: "ReturnTrip",
-    updatedAt: "2019-11-15T13:13:44.347Z",
-    user_id: 49,
-    notPaneDisplay: false,
-  },
-];
 
 export const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTAsImZpcnN0bmFtZSI6IkZyZWQiLCJsYXN0bmFtZSI6Ik11Y3lvIiwiZW1haWwiOiJtdWN5b21pbGxlckBnbWFpbC5jb20iLCJ1c2VybmFtZSI6bnVsbCwiaXNfdmVyaWZpZWQiOnRydWUsInJvbGVfdmFsdWUiOjEsInBob25lIjpudWxsLCJnZW5kZXIiOiJNYWxlIiwiZG9iIjoiMTk5NC0wNS0wMlQwMDowMDowMC4wMDBaIiwiYWRkcmVzcyI6Im51bGwiLCJjb3VudHJ5IjoibnVsbCIsImxhbmd1YWdlIjoibnVsbCIsImN1cnJlbmN5IjoibnVsbCIsImltYWdlX3VybCI6Imh0dHA6Ly9yZXMuY2xvdWRpbmFyeS5jb20vdGVjaG5pdGVzL2ltYWdlL3VwbG9hZC92MTU3MzgwODYzNy9tdHd3a2ExZHh0aWVrd3Nncmlvai5qcGciLCJjb21wYW55IjoiQW5kZWxhIiwiZGVwYXJ0bWVudCI6IkVuZ2luZWVyaW5nIiwibGluZV9tYW5hZ2VyIjoicnVndW1iaXJham9yZHliYXN0aWVuQGdtYWlsLmNvbSIsImlzRW1haWxBbGxvd2VkIjoidHJ1ZSIsImlhdCI6MTU3MzgwODg1NiwiZXhwIjoxNTczODk1MjU2fQ._fvFcTCo7YdJ1yL_X_iVFOrby5k5b3bcrOb0f9DQpEo";
 
@@ -60,3 +38,78 @@ export const request = {
 };
 
 export const requests = [request];
+
+export const room = {
+  id: 1,
+  accommodation_id: 1,
+  name: "Room1",
+  room_type: "single",
+  description: "This is a very good room",
+  cost: 200,
+  status: true,
+  images: [{ image_url: "" }],
+  createdAt: "2019-10-11T10:50:28.272Z",
+  updatedAt: "2019-10-11T11:07:21.598Z",
+};
+
+export const rooms = [room];
+
+export const accommodation = {
+  id: 1,
+  accommodation_name: "Villa Rosa Kempiskey",
+  room_type: null,
+  description: "Luxury holiday resorts, busin…he world.",
+  location: "4",
+  images: ["https://res.cloudinary.com/t…lhkt.jpg"],
+  quantity: null,
+  services: null,
+  amenities: null,
+  available_space: 8,
+  owner: null,
+  createdAt: "2019-10-11T10:50:28.266Z",
+  updatedAt: "2019-10-11T11:17:52.215Z",
+  Feedbacks: [],
+  Rooms: rooms,
+  likes: 0,
+};
+
+export const accommodationNoDesc = {
+  id: 1,
+  accommodation_name: "Villa Rosa Kempiskey",
+  room_type: null,
+  description: null,
+  location: "4",
+  images: ["https://res.cloudinary.com/t…lhkt.jpg"],
+  quantity: null,
+  services: null,
+  amenities: null,
+  available_space: 8,
+  owner: null,
+  createdAt: "2019-10-11T10:50:28.266Z",
+  updatedAt: "2019-10-11T11:17:52.215Z",
+  Feedbacks: [],
+  Rooms: rooms,
+  likes: 0,
+};
+
+export const accommodations = [accommodation, accommodationNoDesc];
+
+export const notifications = {
+  notifications: [
+    {
+      createdAt: "2019-11-13T10:07:21.401Z",
+      id: 8,
+      message: "visit nairobi",
+      request_id: 12,
+      seen: "false",
+      type: "ReturnTrip",
+      updatedAt: "2019-11-15T13:13:44.347Z",
+      user_id: 49,
+      notPaneDisplay: false,
+    },
+  ],
+  markThisRead: jest.fn(),
+  toggleNotDisplay: jest.fn(),
+  notPaneDisplay: false,
+  notificationCount: 1,
+};

src/__mocks__/mockStore.js

@@ -1,7 +1,11 @@
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import initialState from '../redux/store/initialState';
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import initialState from "../redux/store/initialState";
 
 export const middleWares = [thunk];
 export const mockStore = configureMockStore(middleWares);
+initialState.notifications = {
+  notifications: [],
+  notPaneDisplay: false,
+};
 export default mockStore(initialState);

src/__tests__/components/accommodation/AccommodationsPage.test.js

@@ -0,0 +1,39 @@
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import mockStore from "../../../__mocks__/mockStore";
+import AccommodationsComponent, { AccommodationsPage } from "../../../components/accommodation/AccommodationsPage";
+import { accommodations, user } from "../../../__mocks__/fixtures";
+
+const props = {
+  user,
+  accommodations,
+  getAccommodations: jest.fn(),
+  retrieveProfile: jest.fn(),
+};
+
+describe("Accommodations Page", () => {
+  const accommodationsPage = mount(
+    <Provider store={mockStore}>
+      <MemoryRouter>
+        <AccommodationsPage {...props} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  const accommodationsComponent = mount(
+    <Provider store={mockStore}>
+      <MemoryRouter>
+        <AccommodationsComponent {...props} />
+      </MemoryRouter>
+    </Provider>,
+  );
+  test("should render the accomodations page", () => {
+    expect(accommodationsPage.find("AccommodationsPage").exists()).toBe(true);
+  });
+  test("should render the accomodations page component", () => {
+    expect(accommodationsComponent.find("Connect(AccommodationsPage)").exists()).toBe(true);
+  });
+});

src/__tests__/components/accommodation/AnAccommodationPage.test.js

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from "react";
+import { Provider } from "react-redux";
+import { mount } from "enzyme";
+import { MemoryRouter } from "react-router-dom";
+import mockStore from "../../../__mocks__/mockStore";
+import { accommodation, user } from "../../../__mocks__/fixtures";
+import AccPage, {
+  AnAccommodationPage,
+} from "../../../components/accommodation/AnAccommodationPage";
+
+const props = {
+  accId: 1,
+  accommodation,
+  user,
+  getAccommodation: jest.fn(),
+  retrieveProfile: jest.fn(),
+};
+
+describe("An Accommodation page", () => {
+  const accPage = mount(
+    <Provider store={mockStore}>
+      <MemoryRouter>
+        <AnAccommodationPage {...props} />
+      </MemoryRouter>
+    </Provider>,
+  );
+
+  test("should render the gallery section", () => {
+    expect(accPage.find(".gallery").exists()).toBe(true);
+  });
+
+  describe("overview", () => {
+    test("should render the overview section", () => {
+      expect(accPage.find(".overview").exists()).toBe(true);
+    });
+  });
+
+  describe("accommodation details", () => {
+    test("should render the accommmodatin details", () => {
+      expect(accPage.find(".acc__details").exists()).toBe(true);
+    });
+
+    test("should render the accomaditon map", () => {
+      expect(accPage.find(".acc__details__map").exists()).toBe(true);
+    });
+  });
+});
+
+describe("Accommodation page component", () => {
+  //   const accPageComponent = mount(
+  //     <Provider store={mockStore}>
+  //       <MemoryRouter>
+  //         <AccPage {...props} />
+  //       </MemoryRouter>
+  //     </Provider>,
+  //   );
+//   test("should mount acc page component", () => {
+//     // console.log("accPageComponent.debug()", accPageComponent.debug());
+//   });
+});

src/__tests__/components/shared/modal/Modal.test.js

@@ -1,66 +1,67 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Provider } from 'react-redux';
-import { Modal } from '../../../../components/shared/modal/Modal';
-import mockStore from '../../../../__mocks__/mockStore';
-import { request } from '../../../../__mocks__/fixtures';
+/* eslint-disable import/no-named-as-default */
+import React from "react";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import { Modal } from "../../../../components/shared/modal/Modal";
+import mockStore from "../../../../__mocks__/mockStore";
+import { request } from "../../../../__mocks__/fixtures";
 
 const props = {
   showModal: jest.fn(),
-  triggerText: 'Trigger text',
+  triggerText: "Trigger text",
   buttonRef: jest.fn(),
   handleAction: jest.fn(),
-  data: request
+  data: request,
 };
 
-describe('Modal', () => {
+describe("Modal", () => {
   let modal;
   let modalProvider;
 
   modal = mount(<Modal {...props} />);
   modalProvider = mount(
     <Provider store={mockStore}>
       <Modal {...props} />
-    </Provider>
+    </Provider>,
   );
 
-  test('should have an initial `isShown` state of false', () => {
+  test("should have an initial `isShown` state of false", () => {
     expect(modal.state().isShown).toBe(false);
   });
 
-  test('should have `ModalTrigger` present', () => {
-    expect(modal.find('ModalTrigger').exists()).toBe(true);
+  test("should have `ModalTrigger` present", () => {
+    expect(modal.find("ModalTrigger").exists()).toBe(true);
   });
 
-  describe('when the modal is triggered', () => {
+  describe("when the modal is triggered", () => {
     beforeEach(() => {
-      modalProvider.find('ModalTrigger').simulate('click');
+      modalProvider.find("ModalTrigger").simulate("click");
     });
 
-    test('should have an action button', () => {
-      expect(modalProvider.find('.action').text()).toEqual(props.triggerText);
+    test("should have an action button", () => {
+      expect(modalProvider.find(".action").text()).toEqual(props.triggerText);
     });
 
-    test('should have a cancel action button', () => {
-      expect(modalProvider.find('.cancel').text()).toEqual('Cancel');
+    test("should have a cancel action button", () => {
+      expect(modalProvider.find(".cancel").text()).toEqual("Cancel");
     });
 
-    describe('and the action button is clicked', () => {
+    describe("and the action button is clicked", () => {
       beforeEach(() => {
-        modalProvider.find('.action').simulate('click');
+        modalProvider.find(".action").simulate("click");
       });
-      
-      test('should close the modal', () => {
-        expect(modalProvider.find('Connect(RequestActionModal)').exist).toBe(undefined);
+
+      test("should close the modal", () => {
+        expect(modalProvider.find("Connect(RequestActionModal)").exist).toBe(undefined);
       });
     });
 
-    describe('and the cancel button is clicked', () => {
+    describe("and the cancel button is clicked", () => {
       beforeEach(() => {
-        modalProvider.find('.modal-footer .cancel').simulate('click')
+        modalProvider.find(".modal-footer .cancel").simulate("click");
       });
-      test('should not have the `RequestActionModal` on clicking the cancel button', () => {
-          expect(modalProvider.find('Connect(RequestActionModal)').exist).toBe(undefined);
+      test("should not have the `RequestActionModal` on clicking the cancel button", () => {
+        expect(modalProvider.find("Connect(RequestActionModal)").exist).toBe(undefined);
       });
     });
   });