Merge pull request #13 from tan12082001/component-tests

Add Test suites for components using Jest

package.json

@@ -8,11 +8,10 @@
     "@mui/icons-material": "^5.14.19",
     "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.2",
     "date-fns": "^2.30.0",
     "formik": "^2.4.5",
+    "identity-obj-proxy": "^3.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-datepicker": "^4.24.0",
@@ -55,15 +54,29 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-test-renderer": "^18.2.0",
+    "redux-mock-store": "^1.5.4",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-csstree-validator": "^1.9.0",
     "stylelint-scss": "^3.21.0"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!axios)"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss|jpg|jpeg|png|gif)$": "identity-obj-proxy"
+    }
   }
 }

src/__tests__/AddNewCar.test.js

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import AddNewCarForm from '../pages/UserDashboard/AddNewCar/AddNewCarForm';
+import store from '../redux/store';
+
+describe('AddNewCarForm Component', () => {
+  it('renders AddNewCarForm', () => {
+    const component = render(
+      <React.StrictMode>
+        <Provider store={store}>
+          <BrowserRouter>
+            <AddNewCarForm />
+          </BrowserRouter>
+        </Provider>
+      </React.StrictMode>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/__tests__/DashboardHome.test.js

@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import Router from '../routes/routes';
+import { USERS_DASHBOARD } from '../routes/routeConstants';
+
+const mockStore = configureMockStore();
+
+describe('DashboardHome Component', () => {
+  it('renders cars present', () => {
+    const store = mockStore({
+      authentication: {
+        authenticatedUser: {
+          username: 'testuser',
+        },
+        status: 'succeeded',
+      },
+      cars: {
+        cars: [
+          {
+            id: 1,
+            name: 'Test Vehicle',
+            description: 'Test Description',
+            pricePerHr: 20,
+            seating_capacity: 4,
+            image: 'test_image.png',
+          },
+          {
+            id: 2,
+            name: 'Vehicle two',
+            descrrption: 'Vehicle two Description',
+            pricePerHr: 10,
+            seating_capacity: 6,
+            image: 'test_image.png',
+          },
+        ],
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
+          <Router />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/DeleteList.test.js

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import DeleteList from '../components/DeleteCars/DeleteList';
+
+const mockStore = configureMockStore();
+
+describe('DeleteList Component', () => {
+  it('renders cars present to delete', () => {
+    const store = mockStore({
+      authentication: {
+        authenticatedUser: {
+          username: 'testuser',
+        },
+        status: 'succeeded',
+      },
+      cars: {
+        cars: [
+          {
+            id: 1,
+            name: 'Test Vehicle',
+          },
+          {
+            id: 2,
+            name: 'Vehicle two',
+          },
+          {
+            id: 3,
+            name: 'Vehicle three',
+          },
+        ],
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <DeleteList />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/ItemDetail.test.js

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import Router from '../routes/routes';
+import { USERS_DASHBOARD } from '../routes/routeConstants';
+
+const mockStore = configureMockStore();
+
+describe('ItemDetail Page', () => {
+  it('renders ItemDetail page for car ID 1', async () => {
+    const store = mockStore({
+      authentication: {
+        authenticatedUser: {
+          username: 'testuser',
+        },
+        status: 'succeeded',
+      },
+      cars: {
+        cars: [
+          {
+            id: 1,
+            name: 'Test Vehicle',
+            description: 'Test Description',
+            pricePerHr: 20,
+            seating_capacity: 4,
+            image: 'test_image.png',
+          },
+          {
+            id: 2,
+            name: 'Vehicle two',
+            description: 'Vehicle two Description',
+            pricePerHr: 10,
+            seating_capacity: 6,
+            image: 'test_image.png',
+          },
+        ],
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
+          <Router />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    userEvent.click(screen.getByTestId('each-item-container-link-1'));
+    await waitFor(() => {
+      expect(screen.getByText('Test Vehicle')).toBeInTheDocument();
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+  });
+});

src/__tests__/MyReservationsList.test.js

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import MyReservations from '../pages/LandingPage/MyReservation/MyReservation';
+
+const mockStore = configureMockStore();
+
+describe('MyReservations Component', () => {
+  it('renders reservations present', () => {
+    const store = mockStore({
+      authentication: {
+        authenticatedUser: {
+          username: 'testuser',
+        },
+        status: 'succeeded',
+      },
+      reservation: {
+        reservations: [
+          {
+            date: '2023-10-10',
+            city: 'City A',
+          },
+          {
+            date: '2022-11-11',
+            city: 'City B',
+          },
+        ],
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <MyReservations />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/ReserveCar.test.js

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import ReserveCarFrom from '../components/ReserveCars/ReserveCarForm';
+
+const mockStore = configureMockStore();
+
+describe('ReserveCarForm Component', () => {
+  it('renders ReserveCarForm correctly', () => {
+    const store = mockStore({
+      reservation: {
+        status: 'idle',
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ReserveCarFrom id={1} username="testuser" name="Test Car" />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    expect(screen.getByText('Username')).toBeInTheDocument();
+    expect(screen.getByText('Car Name')).toBeInTheDocument();
+    expect(screen.getByText('Select Date')).toBeInTheDocument();
+    expect(screen.getByText('Select City')).toBeInTheDocument();
+    expect(screen.getByText('Book Now')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('testuser')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('Test Car')).toBeInTheDocument();
+  });
+});

src/__tests__/SignIn.test.js

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom/';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import store from '../redux/store';
+import SignIn from '../pages/Auth/SignIn/SignIn';
+
+describe('Login component', () => {
+  test('should render login page', () => {
+    const component = render(
+      <React.StrictMode>
+        <Provider store={store}>
+          <Router>
+            <SignIn />
+          </Router>
+        </Provider>
+      </React.StrictMode>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});

src/__tests__/SignUp.test.js

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom/';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import store from '../redux/store';
+import SignUp from '../pages/Auth/SignUp/SignUp';
+
+describe('SignUp component', () => {
+  test('should render SignUp page', () => {
+    const component = render(
+      <React.StrictMode>
+        <Provider store={store}>
+          <Router>
+            <SignUp />
+          </Router>
+        </Provider>
+      </React.StrictMode>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+});