Merge pull request Agetuni#17 from Agetuni/tests-v0.2

Tests v0.2

Author: Agetuni

package-lock.json

@@ -29,6 +29,7 @@
     "react-spring": "^9.5.4",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.4",
     "redux-thunk": "^2.4.1",
     "sass": "^1.54.9",
     "swiper": "^8.4.2",

package.json

@@ -1,22 +1,63 @@
 import MyReservations from "../../components/reservations/MyReservations";
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import vehicalSlice from '../../redux/vehical/vehicalSlice';
-import newvehical from '../../redux/vehical/vehical.service';
-import delvehicalSlice from "../../redux/vehical/delvehicalSlice";
 import { BrowserRouter } from "react-router-dom";
-import axios from 'axios';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
 
-const store = configureStore({
-    reducer: {
-        addvehical:newvehical,
-        vehical: vehicalSlice,
-        delvehical:delvehicalSlice,
-        
-    }, // eslint-disable-line
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
 
-});
+const initialState = {
+    reservation: [
+      {
+        "id": 39,
+        "reserve_date": "2023-01-21T11:00:00.000Z",
+        "address": "New York, USA",
+        "created_at": "2023-01-18T19:10:54.076Z",
+        "updated_at": "2023-01-18T19:10:54.076Z",
+        "user_id": 26,
+        "vehicle_id": 80,
+        "vehicle_name": "Tesla Model S"
+      },
+      {
+        "id": 40,
+        "reserve_date": "2023-02-12T09:30:00.000Z",
+        "address": "Tokyo, Japan",
+        "created_at": "2023-01-18T19:10:54.084Z",
+        "updated_at": "2023-01-18T19:10:54.084Z",
+        "user_id": 27,
+        "vehicle_id": 82,
+        "vehicle_name": "Tesla Model X"
+      },
+      {
+        "id": 41,
+        "reserve_date": "2023-01-14T10:45:00.000Z",
+        "address": "Berlin, Germany",
+        "created_at": "2023-01-18T19:10:54.091Z",
+        "updated_at": "2023-01-18T19:10:54.091Z",
+        "user_id": 26,
+        "vehicle_id": 81,
+        "vehicle_name": "Tesla Model 3"
+      },
+      {
+        "id": 42,
+        "reserve_date": "2023-01-31T12:15:00.000Z",
+        "address": "Toronto, Canada",
+        "created_at": "2023-01-18T19:10:54.099Z",
+        "updated_at": "2023-01-18T19:10:54.099Z",
+        "user_id": 26,
+        "vehicle_id": 83,
+        "vehicle_name": "Tesla Model Y"
+      }
+    ],
+    vehical: [],
+    user: {
+        id: 1
+    }
+  };
+
+const store = mockStore(initialState);
 
 
 describe('MyReservations', () => {
@@ -25,14 +66,6 @@ describe('MyReservations', () => {
     // Spy on localStorage
     const localStorageMock = jest.spyOn(Storage.prototype, 'getItem');
     localStorageMock.mockReturnValue(JSON.stringify({ id: 1, token: 'some-token' }));
-
-    // Spy on JSON
-    const jsonMock = jest.spyOn(JSON, 'parse');
-    jsonMock.mockReturnValue({ id: 1, token: 'some-token' });
-
-    // Mock axios
-    const mockResponse = { data: [{ id: 1, date: '2022-01-01', address: 'some-address', user_id: 1, vehicle_id: 1 }] };
-    jest.spyOn(axios, 'get').mockResolvedValue(mockResponse);
   });
 
   afterEach(() => {
@@ -47,7 +80,7 @@ describe('MyReservations', () => {
                 </Provider>
             </BrowserRouter>
         );
-        const reservation = await findByText('2022-01-01');
+        const reservation = await findByText('Tue Jan 31 2023');
         expect(reservation).toBeInTheDocument();
     });
 });

src/__tests__/reservations/MyReservations.test.js

@@ -14,12 +14,13 @@ exports[`Reservation form match snapshot 1`] = `
   >
     <form
       className="add-vehicle-form"
+      onSubmit={[Function]}
     >
       <div
         className="form-group"
       >
         <label>
-          email
+          User name 
         </label>
         <input
           className="form-control"
@@ -37,6 +38,8 @@ exports[`Reservation form match snapshot 1`] = `
         <input
           className="form-control"
           id="formGroupExampleInput2"
+          name="reserve_date"
+          onChange={[Function]}
           required={true}
           type="date"
         />
@@ -50,6 +53,8 @@ exports[`Reservation form match snapshot 1`] = `
         <input
           className="form-control"
           id="formGroupExampleInput2"
+          name="address"
+          onChange={[Function]}
           required={true}
           type="text"
         />
@@ -63,30 +68,16 @@ exports[`Reservation form match snapshot 1`] = `
         <select
           className="form-control"
           id="exampleFormControlSelect1"
-        >
-          <option>
-             car 1
-          </option>
-          <option>
-             car 2
-          </option>
-          <option>
-             car 3
-          </option>
-          <option>
-             car 4
-          </option>
-          <option>
-             car 5
-          </option>
-        </select>
+          name="vehicle_id"
+          onChange={[Function]}
+        />
       </div>
       <div
         className="button-green"
       >
         <button
           className="btn btn-primary btn-lg btn-block detail-reserve-btn"
-          type="button"
+          type="submit"
         >
           Reserve
         </button>

src/__tests__/reservations/__snapshots__/reservation.test.js.snap

@@ -1,11 +1,29 @@
 import { BrowserRouter } from "react-router-dom";
 import AddReservation from "../../components/reservations/reservation";
 import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const initialState = {
+    reservation: [],
+    vehical: [],
+    user: {
+        id: 1
+    }
+  };
+
+const store = mockStore(initialState);
 
 test('Reservation form match snapshot', () => {
     const component = renderer.create(
         <BrowserRouter>
+        <Provider store={store}>
             <AddReservation />
+                </Provider>
         </BrowserRouter>
     );
     let tree = component.toJSON();