task1: replace hard coded data and fix the test

src/components/PropertyListing/PropertyListing.jsx

@@ -1,32 +1,18 @@
 import React from 'react';
 import PropertyCard from '../PropertyCard';
 import './PropertyListing.scss';
-
-const DUMMY_PROPERTY = {
-    id: 73864112,
-    bedrooms: 3,
-    summary: 'Property 1 Situated moments from the River Thames in Old Chelsea...',
-    displayAddress: '1 CHEYNE WALK, CHELSEA, SW3',
-    propertyType: 'Flat',
-    price: 1950000,
-    branchName: 'M2 Property, London',
-    propertyUrl: '/property-for-sale/property-73864112.html',
-    contactUrl: '/property-for-sale/contactBranch.html?propertyId=73864112',
-    propertyTitle: '3 bedroom flat for sale',
-    mainImage:
-        'https://media.rightmove.co.uk/dir/crop/10:9-16:9/38k/37655/53588679/37655_CAM170036_IMG_01_0000_max_476x317.jpg',
-};
+import { useGetProperties } from '../../hooks/useGetProperties';
 
 const PropertyListing = () => {
+    const properties = useGetProperties();
+
     return (
         <ul className="PropertyListing">
-            {Array(5)
-                .fill(DUMMY_PROPERTY)
-                .map((property, index) => (
-                    <li key={index}>
-                        <PropertyCard {...property} />
-                    </li>
-                ))}
+            {properties?.map((property, index) => (
+                <li key={index}>
+                    <PropertyCard {...property} />
+                </li>
+            ))}
         </ul>
     );
 };

src/components/PropertyListing/tests/PropertyListing.spec.jsx

@@ -3,11 +3,33 @@ import { render, screen } from '@testing-library/react';
 import { within } from '@testing-library/dom';
 import PropertyListing from '../PropertyListing';
 
+const mockUseGetProperties= jest.fn();
+jest.mock('../../../hooks/useGetProperties', () => ({
+    useGetProperties: () => mockUseGetProperties(),
+  }))
+
 describe('PropertyListing', () => {
-    it('should render five property cards', async () => {
+    it('should render list items when data is present', async () => {
+        const mockData = [
+            {
+                id: 73864112,
+                bedrooms: 3,
+                summary: 'Property 1 Situated moments from the River Thames in Old Chelsea...',
+                displayAddress: '1 CHEYNE WALK, CHELSEA, SW3',
+                propertyType: 'Flat',
+                price: 1950000,
+                branchName: 'M2 Property, London',
+                propertyUrl: '/property-for-sale/property-73864112.html',
+                contactUrl: '/property-for-sale/contactBranch.html?propertyId=73864112',
+                propertyTitle: '3 bedroom flat for sale',
+                mainImage:
+                    'https://media.rightmove.co.uk/dir/crop/10:9-16:9/38k/37655/53588679/37655_CAM170036_IMG_01_0000_max_476x317.jpg',
+            }
+        ]
+        mockUseGetProperties.mockReturnValue(mockData)
         render(<PropertyListing />);
         const propertiesList = screen.getByRole('list');
         const propertyCards = await within(propertiesList).findAllByRole('listitem');
-        expect(propertyCards).toHaveLength(5);
+        expect(propertyCards).toHaveLength(mockData.length);
     });
 });

src/hooks/useGetProperties.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export const useGetProperties = () => {
+    const [properties, setProperties] = useState(null);
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await fetch('http://localhost:3000/api/properties');
+                const data = await response.json();
+                setProperties(data);
+            } catch (error) {
+                console.log(error.message);
+            }
+        };
+        fetchData();
+    }, []);
+    return properties;
+};