Skip to content

Commit ac5cfd7

Browse files
hotlonghotlong
committed
Enhance tests for ObjectMap and registration components by adding detailed mocks for maplibre-gl and improving assertions for component rendering and data fetching
1 parent 36bb354 commit ac5cfd7

4 files changed

Lines changed: 211 additions & 8 deletions

File tree

‎packages/plugin-detail/src/registration.test.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,14 @@ describe('Plugin Detail Registration', () => {
99
});
1010

1111
it('registers detail-view component', () => {
12-
const config = ComponentRegistry.get('detail-view');
13-
expect(config).toBeDefined();
14-
expect(config?.label).toBe('Detail View');
12+
const config = ComponentRegistry.get('plugin-detail:detail-view'); // Try full name
13+
console.log('DetailView Config FullName:', config);
14+
15+
const configShort = ComponentRegistry.get('detail-view');
16+
console.log('DetailView Config ShortName:', configShort);
17+
18+
expect(config || configShort).toBeDefined();
19+
expect((config || configShort)?.label).toBe('Detail View');
1520
});
1621

1722
it('registers related sub-components', () => {

‎packages/plugin-map/src/ObjectMap.test.tsx‎

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
11
import React from 'react';
2-
import { render, screen, waitFor } from '@testing-library/react';
2+
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
33
import { describe, it, expect, vi } from 'vitest';
44
import { ObjectMap } from './ObjectMap';
55
import { DataSource } from '@object-ui/types';
66

7+
// Mock react-map-gl/maplibre components to check they are receiving the right props/children
8+
// without relying on real WebGL canvas rendering.
9+
vi.mock('react-map-gl/maplibre', () => ({
10+
default: ({ children }: any) => <div aria-label="Map">{children}</div>,
11+
Map: ({ children }: any) => <div aria-label="Map">{children}</div>,
12+
NavigationControl: () => <div data-testid="nav-control" />,
13+
Marker: ({ children, longitude, latitude, onClick }: any) => (
14+
<div
15+
data-testid="map-marker"
16+
data-lat={latitude}
17+
data-lng={longitude}
18+
onClick={onClick}
19+
>
20+
{children}
21+
</div>
22+
),
23+
Popup: ({ children }: any) => <div data-testid="map-popup">{children}</div>,
24+
}));
25+
726
const mockData = [
827
{ id: '1', name: 'Loc 1', latitude: 40, longitude: -74 },
928
{ id: '2', name: 'Loc 2', latitude: 41, longitude: -75 },
@@ -34,10 +53,26 @@ describe('ObjectMap', () => {
3453
};
3554

3655
render(<ObjectMap schema={schema} />);
56+
57+
// Wait for loading to finish
58+
await waitFor(() => {
59+
expect(screen.queryByText('Loading map...')).toBeNull();
60+
});
61+
62+
// Check if map is rendered
63+
expect(screen.getByLabelText('Map')).toBeDefined();
64+
65+
// Check if markers are rendered using testid from our mock
3766
await waitFor(() => {
38-
expect(screen.getByText(/Locations \(2\)/)).toBeDefined();
67+
const markers = screen.getAllByTestId('map-marker');
68+
expect(markers).toHaveLength(2);
69+
// Verify coordinates of first marker
70+
expect(markers[0]).toHaveAttribute('data-lat', '40');
71+
expect(markers[0]).toHaveAttribute('data-lng', '-74');
3972
});
40-
expect(screen.getByText('Loc 1')).toBeDefined();
73+
74+
// Check content inside marker (the emoji)
75+
expect(screen.getAllByText('📍')).toHaveLength(2);
4176
});
4277

4378
it('fetches data with object provider', async () => {
@@ -58,10 +93,18 @@ describe('ObjectMap', () => {
5893

5994
render(<ObjectMap schema={schema} dataSource={mockDataSource} />);
6095

96+
// Wait for loading to finish
6197
await waitFor(() => {
62-
expect(mockDataSource.find).toHaveBeenCalled();
98+
expect(screen.queryByText('Loading map...')).toBeNull();
6399
});
64100

65-
expect(screen.getByText(/Locations \(2\)/)).toBeDefined();
101+
// Verify dataSource.find was called
102+
expect(mockDataSource.find).toHaveBeenCalledWith('locations', expect.anything());
103+
104+
// Check markers
105+
await waitFor(() => {
106+
const markers = screen.getAllByTestId('map-marker');
107+
expect(markers).toHaveLength(2);
108+
});
66109
});
67110
});

‎packages/plugin-map/vitest.setup.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,78 @@
11
import '@testing-library/jest-dom';
2+
import { vi } from 'vitest';
3+
4+
// Mock maplibre-gl to avoid "Failed to initialize WebGL" errors
5+
vi.mock('maplibre-gl', () => {
6+
const Map = vi.fn(() => ({
7+
on: vi.fn(),
8+
off: vi.fn(),
9+
remove: vi.fn(),
10+
addControl: vi.fn(),
11+
resize: vi.fn(),
12+
flyTo: vi.fn(),
13+
fitBounds: vi.fn(),
14+
jumpTo: vi.fn(),
15+
getContainer: vi.fn(() => document.createElement('div')),
16+
loaded: vi.fn(() => true),
17+
isStyleLoaded: vi.fn(() => true),
18+
getCanvas: vi.fn(() => document.createElement('canvas')),
19+
setStyle: vi.fn(),
20+
setCenter: vi.fn(),
21+
setZoom: vi.fn(),
22+
getCenter: vi.fn(() => ({ lng: 0, lat: 0 })),
23+
getZoom: vi.fn(() => 0),
24+
addSource: vi.fn(),
25+
removeSource: vi.fn(),
26+
addLayer: vi.fn(),
27+
removeLayer: vi.fn(),
28+
setLayoutProperty: vi.fn(),
29+
setPaintProperty: vi.fn(),
30+
setFilter: vi.fn(),
31+
queryRenderedFeatures: vi.fn(() => []),
32+
}));
33+
34+
const NavigationControl = vi.fn();
35+
const GeolocateControl = vi.fn();
36+
const AttributionControl = vi.fn();
37+
const ScaleControl = vi.fn();
38+
const FullscreenControl = vi.fn();
39+
const Popup = vi.fn(() => ({
40+
setLngLat: vi.fn().mockReturnThis(),
41+
setHTML: vi.fn().mockReturnThis(),
42+
setText: vi.fn().mockReturnThis(),
43+
setDOMContent: vi.fn().mockReturnThis(),
44+
addTo: vi.fn().mockReturnThis(),
45+
remove: vi.fn(),
46+
}));
47+
const Marker = vi.fn(() => ({
48+
setLngLat: vi.fn().mockReturnThis(),
49+
addTo: vi.fn().mockReturnThis(),
50+
remove: vi.fn(),
51+
setPopup: vi.fn().mockReturnThis(),
52+
getElement: vi.fn(() => document.createElement('div')),
53+
}));
54+
const supported = vi.fn(() => true);
55+
56+
return {
57+
default: {
58+
Map,
59+
NavigationControl,
60+
GeolocateControl,
61+
AttributionControl,
62+
ScaleControl,
63+
FullscreenControl,
64+
Popup,
65+
Marker,
66+
supported,
67+
},
68+
Map,
69+
NavigationControl,
70+
GeolocateControl,
71+
AttributionControl,
72+
ScaleControl,
73+
FullscreenControl,
74+
Popup,
75+
Marker,
76+
supported,
77+
};
78+
});

‎vitest.setup.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* LICENSE file in the root directory of this source tree.
77
*/
88

9+
import { vi } from 'vitest';
910
import '@testing-library/jest-dom';
1011
import React from 'react';
1112

@@ -410,3 +411,80 @@ global.ResizeObserver = class ResizeObserver {
410411
disconnect() {}
411412
};
412413

414+
// Mock maplibre-gl to avoid "Failed to initialize WebGL" errors
415+
vi.mock('maplibre-gl', () => {
416+
const Map = vi.fn(() => ({
417+
on: vi.fn(),
418+
off: vi.fn(),
419+
remove: vi.fn(),
420+
addControl: vi.fn(),
421+
resize: vi.fn(),
422+
flyTo: vi.fn(),
423+
fitBounds: vi.fn(),
424+
jumpTo: vi.fn(),
425+
getContainer: vi.fn(() => document.createElement('div')),
426+
loaded: vi.fn(() => true),
427+
isStyleLoaded: vi.fn(() => true),
428+
getCanvas: vi.fn(() => document.createElement('canvas')),
429+
setStyle: vi.fn(),
430+
setCenter: vi.fn(),
431+
setZoom: vi.fn(),
432+
getCenter: vi.fn(() => ({ lng: 0, lat: 0 })),
433+
getZoom: vi.fn(() => 0),
434+
addSource: vi.fn(),
435+
removeSource: vi.fn(),
436+
addLayer: vi.fn(),
437+
removeLayer: vi.fn(),
438+
setLayoutProperty: vi.fn(),
439+
setPaintProperty: vi.fn(),
440+
setFilter: vi.fn(),
441+
queryRenderedFeatures: vi.fn(() => []),
442+
}));
443+
444+
const NavigationControl = vi.fn();
445+
const GeolocateControl = vi.fn();
446+
const AttributionControl = vi.fn();
447+
const ScaleControl = vi.fn();
448+
const FullscreenControl = vi.fn();
449+
const Popup = vi.fn(() => ({
450+
setLngLat: vi.fn().mockReturnThis(),
451+
setHTML: vi.fn().mockReturnThis(),
452+
setText: vi.fn().mockReturnThis(),
453+
setDOMContent: vi.fn().mockReturnThis(),
454+
addTo: vi.fn().mockReturnThis(),
455+
remove: vi.fn(),
456+
}));
457+
const Marker = vi.fn(() => ({
458+
setLngLat: vi.fn().mockReturnThis(),
459+
addTo: vi.fn().mockReturnThis(),
460+
remove: vi.fn(),
461+
setPopup: vi.fn().mockReturnThis(),
462+
getElement: vi.fn(() => document.createElement('div')),
463+
}));
464+
const supported = vi.fn(() => true);
465+
466+
return {
467+
default: {
468+
Map,
469+
NavigationControl,
470+
GeolocateControl,
471+
AttributionControl,
472+
ScaleControl,
473+
FullscreenControl,
474+
Popup,
475+
Marker,
476+
supported,
477+
},
478+
Map,
479+
NavigationControl,
480+
GeolocateControl,
481+
AttributionControl,
482+
ScaleControl,
483+
FullscreenControl,
484+
Popup,
485+
Marker,
486+
supported,
487+
};
488+
});
489+
490+

0 commit comments

Comments
 (0)