Merge pull request #17 from tan12082001/state-bug-fix

State bug fix

src/App.js

@@ -1,26 +1,11 @@
 import './styles/App.css';
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import Router from './routes/routes';
-import { fetchCarReservations, fetchCars } from './redux/thunk';
 
-function App() {
-  const authenticationStatus = useSelector((state) => state.authentication.status);
-  const finalIsAuthenticated = authenticationStatus === 'succeeded';
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (finalIsAuthenticated) {
-      dispatch(fetchCars());
-      dispatch(fetchCarReservations());
-    }
-  }, [dispatch, finalIsAuthenticated]);
-
-  return (
-    <>
-      <Router />
-    </>
-  );
-}
+const App = () => (
+  <>
+    <Router />
+  </>
+);
 
 export default App;

src/__tests__/DashboardHome.test.js

@@ -1,55 +1,42 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import Router from '../routes/routes';
-import { USERS_DASHBOARD } from '../routes/routeConstants';
+import { BrowserRouter } from 'react-router-dom';
+import DisplayCartCard from '../components/Card/DisplayCartCard';
+import store from '../redux/store';
 
-jest.mock('../assets/user.png', () => 'path-to-a-mocked-image.png');
+describe('DisplayCartCard Component', () => {
+  const sampleProps = {
+    id: 1,
+    imgSrc: 'sample-image.jpg',
+    name: 'Sample Name',
+    shortNote: 'Sample Short Note',
+  };
 
-const mockStore = configureMockStore();
-
-describe('DashboardHome Component', () => {
-  it('renders cars present', () => {
-    const store = mockStore({
-      authentication: {
-        authenticatedUser: {
-          username: 'testuser',
-        },
-        status: 'succeeded',
-      },
-      cars: {
-        cars: [
-          {
-            id: 1,
-            name: 'Vehicle oneeee',
-            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',
-          },
-        ],
-      },
-    });
-
-    const tree = render(
-      <Provider store={store}>
-        <MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
-          <Router />
-        </MemoryRouter>
-      </Provider>,
+  it('renders with correct props', () => {
+    const { getByText, getByAltText } = render(
+      <React.StrictMode>
+        <Provider store={store}>
+          <BrowserRouter>
+            <DisplayCartCard
+              id={sampleProps.id}
+              name={sampleProps.name}
+              shortNote={sampleProps.shortNote}
+              imgSrc={sampleProps.imgSrc}
+            />
+          </BrowserRouter>
+        </Provider>
+      </React.StrictMode>,
     );
+    const nameElement = getByText('Sample Name');
+    expect(nameElement).toBeInTheDocument();
+
+    const noteElement = getByText('Sample Short Note');
+    expect(noteElement).toBeInTheDocument();
 
-    expect(tree).toMatchSnapshot();
+    const imageElement = getByAltText('Sample Name');
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement.src).toContain('sample-image.jpg');
   });
 });

src/__tests__/ItemDetail.test.js

@@ -1,59 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
 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';
+import { BrowserRouter } from 'react-router-dom'; // Change to BrowserRouter
+import store from '../redux/store';
+import DisplayItemCard from '../components/Card/DisplayItemCard';
 
-jest.mock('../assets/user.png', () => 'test_image.png');
+jest.mock('../assets/user.png', () => 'sample-image.png');
 
-const mockStore = configureMockStore();
+describe('DisplayItemCard Component', () => {
+  const sampleProps = {
+    id: 1,
+    name: 'Sample Name',
+    description: 'Sample Description',
+    pricePerHr: 20,
+    seatingCapacity: 5,
+    imgSrc: 'sample-image.jpg',
+    removed: false,
+  };
 
-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(
+  it('renders with correct props', () => {
+    const { getByText, getByAltText } = render(
       <Provider store={store}>
-        <MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
-          <Router />
-        </MemoryRouter>
+        <BrowserRouter>
+          {' '}
+          {/* Use BrowserRouter here */}
+          <DisplayItemCard
+            id={sampleProps.id}
+            name={sampleProps.name}
+            pricePerHr={sampleProps.pricePerHr}
+            description={sampleProps.description}
+            seatingCapacity={sampleProps.seatingCapacity}
+            imgSrc={sampleProps.imgSrc}
+            removed={sampleProps.removed}
+          />
+        </BrowserRouter>
       </Provider>,
     );
 
-    userEvent.click(screen.getByTestId('each-item-container-link-1'));
-    await waitFor(() => {
-      expect(screen.getByText('Test Vehicle')).toBeInTheDocument();
-      expect(screen.getByText('Test Description')).toBeInTheDocument();
-    });
+    const nameElement = getByText('Sample Name');
+    expect(nameElement).toBeInTheDocument();
+
+    const descriptionElement = getByText('Sample Description');
+    expect(descriptionElement).toBeInTheDocument();
+
+    const imageElement = getByAltText('Sample Name');
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement.src).toContain('sample-image.jpg');
+
+    const text = getByText('Rent Price per Hour');
+    expect(text).toBeInTheDocument();
   });
 });