Testing map component

src/components/Map.jsx

@@ -26,10 +26,13 @@ export default function Map({
   //window size listener (todo figure out why height can go up but not down)
   useEffect(() => {
     const resizeListener = () => {
-      setDimensions({
-        width: mapFrame.current.offsetWidth - 2,
-        height: mapFrame.current.offsetHeight - 2,
-      });
+      const { width, height } = mapFrame.current.getBoundingClientRect();
+      if (width && height) {
+        setDimensions({
+          width: width - 2,
+          height: height - 2,
+        });
+      }
     };
     resizeListener();
     window.addEventListener('resize', resizeListener);
@@ -135,6 +138,7 @@ export default function Map({
                 offsetTop={-settings.map.markers.location.height}
               >
                 <div
+                  data-testid={key}
                   onClick={() => setPopup(key)}
                   style={settings.map.markers.location}
                   title={data.locations[key].name}
@@ -156,8 +160,8 @@ export default function Map({
                       <div className="list-group mb-1">
                         {data.locations[key].meetings
                           .sort((a, b) => a.start.isAfter(b.start))
-                          .map(meeting => (
-                            <div key={meeting.slug} className="list-group-item">
+                          .map((meeting, index) => (
+                            <div key={index} className="list-group-item">
                               <time className="d-block">
                                 {meeting.start.format('h:mm a')}
                                 <span className="ms-1">

src/components/Map.spec.tsx

@@ -0,0 +1,89 @@
+import { render } from '@testing-library/react';
+import moment from 'moment-timezone';
+
+import Map from './Map';
+
+describe('<Map />', () => {
+  const mockState = {
+    meetings: {
+      'foo': {
+        isInPerson: true,
+        latitude: 40.712776,
+        longitude: -74.005974,
+        name: 'First Meeting',
+        start: moment(),
+      },
+    },
+  };
+
+  //save copy of original
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+
+  //override getboundingclientrect
+  beforeAll(() => {
+    Element.prototype.getBoundingClientRect = jest.fn(
+      () =>
+        ({
+          width: 120,
+          height: 120,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+        } as DOMRect)
+    );
+  });
+
+  //restore original
+  afterAll(() => {
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+  });
+
+  it('renders with one meeting', () => {
+    const { container } = render(
+      <Map
+        filteredSlugs={Object.keys(mockState.meetings)}
+        listMeetingsInPopup={false}
+        state={mockState}
+        setState={jest.fn()}
+        mapbox="pk.123456"
+      />
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with multiple meetings', () => {
+    const mockStateMultiple = {
+      ...mockState,
+      meetings: {
+        ...mockState.meetings,
+        'bar': {
+          isInPerson: true,
+          latitude: 34.052235,
+          longitude: -118.243683,
+          name: 'Second Meeting',
+          start: moment(),
+        },
+      },
+    };
+    const { container } = render(
+      <Map
+        filteredSlugs={Object.keys(mockStateMultiple.meetings)}
+        listMeetingsInPopup={true}
+        state={mockStateMultiple}
+        setState={jest.fn()}
+        mapbox="pk.123456"
+      />
+    );
+    expect(container).toBeTruthy();
+
+    /*todo wait for map to load
+    const { latitude, longitude, name } = mockStateMultiple.meetings.bar;
+    const marker = screen.getByTestId(`${latitude},${longitude}`);
+    fireEvent.click(marker);
+
+    const h4 = screen.getByText(name);
+    expect(h4).toBeVisible();
+    */
+  });
+});