[Sweep Rules] Add unit tests for frontend/src/components/RegionMap.jsx

frontend/src/components/ExistingTestFile.test.jsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import MapComponent from '../components/RegionMap';
+import { fetchSubregions, fetchSiblings, fetchRegionGeometry } from '../api';
+
+jest.mock('../api', () => ({
+  fetchSubregions: jest.fn(),
+  fetchSiblings: jest.fn(),
+  fetchRegionGeometry: jest.fn(),
+}));
+
+describe('MapComponent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch subregions and update map when selected region has subregions', async () => {
+    const subregions = [{ id: 1, name: 'Subregion 1' }, { id: 2, name: 'Subregion 2' }];
+    fetchSubregions.mockResolvedValue(subregions);
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region with subregions
+      // ...
+
+      // Assert fetchSubregions is called with correct arguments
+      // ...
+
+      // Assert map is updated with subregions
+      // ...
+    });
+  });
+
+  it('should fetch siblings and update map when selected region does not have subregions', async () => {
+    const siblings = [{ id: 3, name: 'Sibling 1' }, { id: 4, name: 'Sibling 2' }];
+    fetchSiblings.mockResolvedValue(siblings);
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region without subregions
+      // ...
+
+      // Assert fetchSiblings is called with correct arguments
+      // ...
+
+      // Assert map is updated with siblings
+      // ...
+    });
+  });
+
+  it('should handle error when fetching visible regions', async () => {
+    fetchSubregions.mockRejectedValue(new Error('Fetch error'));
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region with subregions
+      // ...
+
+      // Assert fetchSubregions is called with correct arguments
+      // ...
+
+      // Assert error message is displayed
+      // ...
+    });
+  });
+
+  it('should update selected region style when new selected region id matches a feature', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate rendered features and new selected region id
+      // ...
+
+      // Assert selected region style is updated
+      // ...
+    });
+  });
+
+  it('should not update selected region style when new selected region id does not match any feature', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate rendered features and new selected region id
+      // ...
+
+      // Assert selected region style is not updated
+      // ...
+    });
+  });
+
+  it('should not initialize map when map container is not set', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert map is not initialized
+      // ...
+    });
+  });
+
+  it('should initialize map and update map when data is valid', async () => {
+    const visibleRegions = [{ id: 5, name: 'Region 1' }, { id: 6, name: 'Region 2' }];
+    fetchSubregions.mockResolvedValue(visibleRegions);
+
+    const regionGeometry = { type: 'Polygon', coordinates: [[0, 0], [1, 1], [2, 2], [0, 0]] };
+    fetchRegionGeometry.mockResolvedValue({ geometry: regionGeometry });
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert visible regions are fetched
+      // ...
+
+      // Assert region geometry is fetched for each visible region
+      // ...
+
+      // Assert rendered features are set
+      // ...
+
+      // Assert map source and style are updated
+      // ...
+
+      // Assert map bounds are set
+      // ...
+    });
+  });
+
+  it('should not initialize map when fetched data is invalid or empty', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert map is not initialized
+      // ...
+    });
+  });
+});

frontend/src/components/RegionMap.test.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import MapComponent from './RegionMap';
+
+jest.mock('../api', () => ({
+  fetchSubregions: jest.fn(),
+  fetchSiblings: jest.fn(),
+  fetchRegionGeometry: jest.fn(),
+}));
+
+describe('MapComponent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch subregions and update map when selected region has subregions', async () => {
+    const subregions = [{ id: 1, name: 'Subregion 1' }, { id: 2, name: 'Subregion 2' }];
+    const fetchSubregions = require('../api').fetchSubregions;
+    fetchSubregions.mockResolvedValue(subregions);
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region with subregions
+      // ...
+
+      // Assert fetchSubregions is called with correct arguments
+      // ...
+
+      // Assert map is updated with subregions
+      // ...
+    });
+  });
+
+  it('should fetch siblings and update map when selected region does not have subregions', async () => {
+    const siblings = [{ id: 3, name: 'Sibling 1' }, { id: 4, name: 'Sibling 2' }];
+    const fetchSiblings = require('../api').fetchSiblings;
+    fetchSiblings.mockResolvedValue(siblings);
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region without subregions
+      // ...
+
+      // Assert fetchSiblings is called with correct arguments
+      // ...
+
+      // Assert map is updated with siblings
+      // ...
+    });
+  });
+
+  it('should handle error when fetching visible regions', async () => {
+    const fetchSubregions = require('../api').fetchSubregions;
+    fetchSubregions.mockRejectedValue(new Error('Fetch error'));
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate selected region with subregions
+      // ...
+
+      // Assert fetchSubregions is called with correct arguments
+      // ...
+
+      // Assert error message is displayed
+      // ...
+    });
+  });
+
+  it('should update selected region style when new selected region id matches a feature', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate rendered features and new selected region id
+      // ...
+
+      // Assert selected region style is updated
+      // ...
+    });
+  });
+
+  it('should not update selected region style when new selected region id does not match any feature', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Simulate rendered features and new selected region id
+      // ...
+
+      // Assert selected region style is not updated
+      // ...
+    });
+  });
+
+  it('should not initialize map when map container is not set', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert map is not initialized
+      // ...
+    });
+  });
+
+  it('should initialize map and update map when data is valid', async () => {
+    const visibleRegions = [{ id: 5, name: 'Region 1' }, { id: 6, name: 'Region 2' }];
+    const fetchSubregions = require('../api').fetchSubregions;
+    fetchSubregions.mockResolvedValue(visibleRegions);
+
+    const regionGeometry = { type: 'Polygon', coordinates: [[0, 0], [1, 1], [2, 2], [0, 0]] };
+    const fetchRegionGeometry = require('../api').fetchRegionGeometry;
+    fetchRegionGeometry.mockResolvedValue({ geometry: regionGeometry });
+
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert visible regions are fetched
+      // ...
+
+      // Assert region geometry is fetched for each visible region
+      // ...
+
+      // Assert rendered features are set
+      // ...
+
+      // Assert map source and style are updated
+      // ...
+
+      // Assert map bounds are set
+      // ...
+    });
+  });
+
+  it('should not initialize map when fetched data is invalid or empty', async () => {
+    const { container } = render(<MapComponent />);
+    await act(async () => {
+      // Assert map is not initialized
+      // ...
+    });
+  });
+});