mapbox component jest tests (#311)

added jest tests for Mapbox component, specifically for the two prop fields: `getCoordinate` and `onDrag`. The remaining props are best tested through storybook.

note that `mapbox-gl` is mocked as it seems to use some web browser functionality on initialization that is not supported in jest test environment (jsdom). Without mocking, jest would present an error `Error: Failed to initialize WebGL.`.
- tried third party libraries `jest-webgl-canvas-mock` and `jest-canvas-mock` still result in more window properties access related errors (`[TypeError: e.window.Worker is not a constructor]`, which could be resolve by [manually mocking Worker](jestjs/jest#3449), `[TypeError: this.target.addEventListener is not a function]`...).
- Looked into how pageJS test mapbox provider in their map component: the map wrapper component invoke a [load function](https://github.com/yext/pages/blob/main/packages/pages/src/components/map/map.tsx#L112) to construct [a script tag](https://github.com/yext/components-tsx-maps/blob/main/src/Providers/Mapbox.js#L137) from `yext/components-tsx-maps` and the assertions in the unit tests seem to check for the rendering of the wrapper component only and not waiting for the script to load. No content/interaction of the map was tested from my understanding.
- Looked into how mapbox-gl-js does their own testing: they had a couple util files to set up the environment for their tests (mock requests, [mock HtmlCanvas/WebLG in window](https://github.com/mapbox/mapbox-gl-js/blob/main/src/util/window.js) object, etc.).

I decided this complexity is probably unnecessary to add to the repo but we can discuss if other may think differently. We can have jest strictly test new isolated functionalities added from the component and leave all the UI rendering and mapbox interaction to storybook tests.

SLAP-2222
TEST=auto

new jest tests passed

Author: yen-tt

docs/search-ui-react.mapboxmap.md

@@ -32,5 +32,5 @@ For the map to work properly, be sure to include Mapbox GL stylesheet in the app
 
 For instance, user may add the following import statement in their application's index file or in the file where `MapboxMap` is used: `import 'mapbox-gl/dist/mapbox-gl.css';`
 
-Or, user may add a stylesheet link in their html page: `<link href="https://api.mapbox.com/mapbox-gl-js/VERSION/mapbox-gl.css" rel="stylesheet">`
+Or, user may add a stylesheet link in their html page: `<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet" />`
 

src/components/MapboxMap.tsx

@@ -74,7 +74,7 @@ export interface MapboxMapProps<T> {
  * `import 'mapbox-gl/dist/mapbox-gl.css';`
  *
  * Or, user may add a stylesheet link in their html page:
- * `<link href="https://api.mapbox.com/mapbox-gl-js/VERSION/mapbox-gl.css" rel="stylesheet">`
+ * `<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet" />`
  *
  * @param props - {@link MapboxMapProps}
  * @returns A React element containing a Mapbox Map

tests/components/MapboxMap.test.tsx

@@ -0,0 +1,114 @@
+import { render } from '@testing-library/react';
+import { mockAnswersState } from '../__utils__/mocks';
+import { CoordinateGetter, MapboxMap, Coordinate } from '../../src/components/MapboxMap';
+import { Source, State } from '@yext/search-headless-react';
+import { Map, Marker } from 'mapbox-gl';
+
+jest.mock('@yext/search-headless-react');
+jest.mock('mapbox-gl');
+
+interface Location {
+  customCoordinate: Coordinate
+}
+
+const mockedStateDefaultCoordinate: Partial<State> = {
+  vertical: {
+    verticalKey: 'vertical',
+    results: [{
+      rawData: {
+        yextDisplayCoordinate: {
+          latitude: 1,
+          longitude: 1
+        }
+      },
+      source: Source.KnowledgeManager
+    }]
+  }
+};
+
+const mockedStateCustomCoordinate: Partial<State> = {
+  vertical: {
+    verticalKey: 'vertical',
+    results: [{
+      rawData: {
+        customCoordinate: {
+          latitude: 2,
+          longitude: 2
+        }
+      },
+      source: Source.KnowledgeManager
+    }]
+  }
+};
+
+const mockedStateWrongCoordinateType: Partial<State> = {
+  vertical: {
+    verticalKey: 'vertical',
+    results: [{
+      rawData: {
+        yextDisplayCoordinate: [1, 1]
+      },
+      source: Source.KnowledgeManager
+    }]
+  }
+};
+
+describe('default "getCoordinate"', () => {
+  it('uses result\'s "yextDisplayCoordinate" for marker location', () => {
+    mockAnswersState(mockedStateDefaultCoordinate);
+    const setLngLat = jest.spyOn(Marker.prototype, 'setLngLat').mockReturnValue(Marker.prototype);
+    render(<MapboxMap mapboxAccessToken='TEST_KEY' />);
+    expect(setLngLat).toBeCalledWith({ lat: 1, lng: 1 });
+  });
+
+  it('displays an error when "yextDisplayCoordinate" field is not present in result', () => {
+    mockAnswersState(mockedStateCustomCoordinate);
+    const setLngLat = jest.spyOn(Marker.prototype, 'setLngLat').mockReturnValue(Marker.prototype);
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation();
+    render(<MapboxMap mapboxAccessToken='TEST_KEY' />);
+    expect(errorSpy).toBeCalledTimes(1);
+    const expectedMessage = 'Unable to use the default "yextDisplayCoordinate" field as the result\'s coordinate';
+    expect(errorSpy).toBeCalledWith(expect.stringContaining(expectedMessage));
+    expect(setLngLat).not.toBeCalled();
+  });
+
+  it('displays an error when "yextDisplayCoordinate" field is not of type "Coordinate"', () => {
+    mockAnswersState(mockedStateWrongCoordinateType);
+    const setLngLat = jest.spyOn(Marker.prototype, 'setLngLat').mockReturnValue(Marker.prototype);
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation();
+    render(<MapboxMap mapboxAccessToken='TEST_KEY' />);
+    expect(errorSpy).toBeCalledTimes(1);
+    const expectedMessage = 'The default `yextDisplayCoordinate` field from result is not of type "Coordinate".';
+    expect(errorSpy).toBeCalledWith(expect.stringContaining(expectedMessage));
+    expect(setLngLat).not.toBeCalled();
+  });
+});
+
+it('executes custom "getCoordinate" and use the derived coordinate for marker location', () => {
+  mockAnswersState(mockedStateCustomCoordinate);
+  const setLngLat = jest.spyOn(Marker.prototype, 'setLngLat').mockReturnValue(Marker.prototype);
+  const customGetCoordinate: CoordinateGetter<Location> = jest.fn().mockImplementation(
+    result => result.rawData.customCoordinate);
+
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation();
+  render(<MapboxMap mapboxAccessToken='TEST_KEY' getCoordinate={customGetCoordinate} />);
+  expect(errorSpy).toBeCalledTimes(0);
+  expect(customGetCoordinate).toBeCalledTimes(1);
+  expect(setLngLat).toBeCalledWith({ lat: 2, lng: 2 });
+});
+
+it('registers "onDrag" callback to Mapbox\'s event listener for "drag to pan" interaction', () => {
+  jest.useFakeTimers();
+  jest.spyOn(Marker.prototype, 'setLngLat').mockReturnValue(Marker.prototype);
+  const mapOnEventListener = jest.spyOn(Map.prototype, 'on')
+    .mockImplementation((e, cb) => {
+      e === 'drag' && cb({});
+      return Map.prototype;
+    });
+  const onDragFn = jest.fn();
+  render(<MapboxMap mapboxAccessToken='TEST_KEY' onDrag={onDragFn} />);
+  expect(mapOnEventListener).toBeCalledWith('drag', expect.anything());
+  expect(onDragFn).toBeCalledTimes(0);
+  jest.advanceTimersByTime(100); //debounce time
+  expect(onDragFn).toBeCalledTimes(1);
+});