fix: unit tests and minor tweaks

Author: ambientlight

__mocks__/azure-maps-control.js

@@ -1,12 +1,14 @@
 module.exports = {
   Map: jest.fn(() => ({
     controls: {
-      add: jest.fn()
+      add: jest.fn(),
+      remove: jest.fn()
     },
     events: {
       add: jest.fn((eventName, callback = () => {}) => {
         callback()
-      })
+      }),
+      remove: jest.fn()
     },
     imageSprite: {
       add: jest.fn(),

__mocks__/azure-maps-drawing-tools.js

@@ -1,4 +1,48 @@
+const atlas = require('azure-maps-control')
+
 module.exports = {
-  control: {},
-  drawing: {}
+  control: {
+    DrawingToolbar: jest.fn(options => ({
+      setOptions: jest.fn()
+    }))
+  },
+  drawing: {
+    DrawingManager: jest.fn((map, options) => {
+      let toolbar;
+      const dataSource = new atlas.source.DataSource()
+      map.sources.add(dataSource)
+      return {
+        setOptions: jest.fn(options => {
+          if(!toolbar){
+            map.controls.add(options.toolbar)
+          } else if (toolbar !== options.toolbar){
+            map.control.remove(toolbar)
+            map.control.add(options.toolbar)
+          }
+          toolbar = options.toolbar
+        }),
+        getOptions: jest.fn(() => ({})),
+        dispose: jest.fn(),
+        getLayers: jest.fn(() => ({
+          lineLayer: {
+            layer: 'LineLayer',
+            setOptions: jest.fn()
+          },
+          polygonLayer: {
+            layer: 'PolygonLayer',
+            setOptions: jest.fn()
+          },
+          polygonOutlineLayer: {
+            layer: 'LineLayer',
+            setOptions: jest.fn()
+          },
+          pointLayer: {
+            layer: 'SymbolLayer',
+            setOptions: jest.fn()
+          }
+        })),
+        getSource: jest.fn(() => dataSource)
+      }
+    })
+  }
 }

assets/coverage.png

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { AzureMapDrawingLayerProvider } from './AzureMapDrawingLayerContext'
+
+describe('AzureMapDrawingLayerProvider', () => {
+  it('should create and render AzureMapDrawingLayerProvider', () => {
+    const { container } = render(<AzureMapDrawingLayerProvider type="polygonLayer" options={{fillColor: 'green'}}/>)
+    expect(container).toMatchSnapshot()
+  })
+})

src/contexts/AzureMapDrawingLayerContext.test.tsx

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { Map, Shape } from 'azure-maps-control'
+import { drawing } from 'azure-maps-drawing-tools'
+import React, { useContext } from 'react'
+import { IAzureDrawingManagerStatefulProviderProps } from '../types'
+import { AzureMapsContext, AzureMapsProvider } from './AzureMapContext'
+import { AzureMapDrawingManagerProvider, AzureMapDrawingManagerContext } from './AzureMapDrawingManagerContext'
+
+const mapContextProps = {
+  mapRef: null,
+  isMapReady: false,
+  setMapReady: jest.fn(),
+  removeMapRef: jest.fn(),
+  setMapRef: jest.fn()
+}
+
+const mapRef = new Map('fake', {})
+
+const useContextConsumer = () => {
+  const drawingManagerContext = useContext(AzureMapDrawingManagerContext)
+  return drawingManagerContext
+}
+
+const wrapWithDrawingManagerContext = (props: IAzureDrawingManagerStatefulProviderProps) => ({
+  children
+}: {
+  children?: any
+}) => {
+  return (
+    <AzureMapsContext.Provider
+      value={{
+        ...mapContextProps,
+        mapRef
+      }}
+    >
+      <AzureMapDrawingManagerProvider {...{ ...props }}>{children}</AzureMapDrawingManagerProvider>
+    </AzureMapsContext.Provider>
+  )
+}
+
+describe('AzureMapDataSourceProvider tests', () => {
+  it('should add drawing manager datasource to map ref on map ready', () => {  
+    mapRef.sources.add = jest.fn()
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {} })
+    })
+
+    expect(mapRef.sources.add).toHaveBeenCalledWith(result.current.drawingManagerRef?.getSource())
+  })
+
+  it('should add passed events to the map with DrawingManager target', () => {  
+    (mapRef.events.add as any) = jest.fn((eventType, targetOrCallback, callback) => {
+      if(callback){
+        callback()
+      } else {
+        // for ready event 
+        targetOrCallback()
+      }
+    })
+
+    const drawingmodechanged = (mode: drawing.DrawingMode) => {}
+    const drawingstarted = (shape: Shape) => {}
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {}, events: { drawingstarted, drawingmodechanged }})
+    })
+
+    expect(mapRef.events.add).toHaveBeenCalledWith(
+      'drawingmodechanged',
+      result.current.drawingManagerRef,
+      drawingmodechanged
+    )
+
+    expect(mapRef.events.add).toHaveBeenCalledWith(
+      'drawingstarted',
+      result.current.drawingManagerRef,
+      drawingstarted
+    )
+  })
+
+  it('should discard drawing event when it is undefined', () => {  
+    mapRef.events.add = jest.fn((eventName: any, callback: any) => callback())
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: {}, events: { drawingstarted: undefined }})
+    })
+
+    // only ready event handler should have been added
+    expect(mapRef.events.add).toHaveBeenCalledWith('ready', expect.any(Function))
+  })
+
+  it('should add toolbar control to map ref on map ready', () => { 
+    mapRef.controls.add = jest.fn() 
+    const { result } = renderHook(() => useContextConsumer(), {
+      wrapper: wrapWithDrawingManagerContext({ options: { toolbar: { position: 'top-right' }}})
+    })
+
+    expect(mapRef.controls.add).toBeCalledTimes(1)
+  })
+})

src/contexts/AzureMapDrawingManagerContext.test.tsx

@@ -56,7 +56,7 @@ const AzureMapDrawingManagerStatefulProvider = ({
       setDrawingManagerRef(drawingManager)
       setDataSourceRef(drawingManager.getSource())
       setToolbarOnceReadyRef(toolbar)
-
+      
       // register drawing events
       for (const eventType in events) {
         const handler = events[eventType as IAzureDrawingManagerEventType]
@@ -90,7 +90,9 @@ const AzureMapDrawingManagerStatefulProvider = ({
   useEffect(() => {
     if(drawingManagerRef && options){
       drawingManagerRef.setOptions({ ...options, toolbar: toolbarOnceReadyRef })
-      toolbarOnceReadyRef?.setOptions(options.toolbar)
+    }
+    if(toolbarOnceReadyRef && options && options.toolbar){
+      toolbarOnceReadyRef.setOptions(options.toolbar)
     }
   }, [drawingManagerRef, options, toolbarOnceReadyRef])
 

src/contexts/AzureMapDrawingManagerContext.tsx

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AzureMapDrawingLayerProvider should create and render AzureMapDrawingLayerProvider 1`] = `<div />`;

src/contexts/__snapshots__/AzureMapDrawingLayerContext.test.tsx.snap

@@ -0,0 +1,91 @@
+import atlas, { source, layer } from 'azure-maps-control'
+import { ReactNode } from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import { useAzureMapLayer } from './useAzureMapLayer'
+import { Map } from 'azure-maps-control'
+import { drawing } from 'azure-maps-drawing-tools'
+import React from 'react'
+import { AzureMapsContext } from '../contexts/AzureMapContext'
+import { AzureMapDrawingManagerContext } from '../contexts/AzureMapDrawingManagerContext'
+import { IAzureLayerStatefulProviderProps, LayerType } from '../types'
+import { useAzureMapDrawingLayer } from './useAzureMapDrawingLayer'
+
+const mapContextProps = {
+  mapRef: null,
+  isMapReady: false,
+  setMapReady: jest.fn(),
+  removeMapRef: jest.fn(),
+  setMapRef: jest.fn()
+}
+const mapRef = new Map('fake', {})
+
+const wrapWithAzureMapContext = ({ children }: { children?: ReactNode | null }) => {
+  const drawingManagerRef = new drawing.DrawingManager(mapRef, {})
+  return (
+    <AzureMapsContext.Provider
+      value={{
+        ...mapContextProps,
+        mapRef
+      }}
+    >
+      <AzureMapDrawingManagerContext.Provider
+        value={{ drawingManagerRef }}
+      >
+        {children}
+      </AzureMapDrawingManagerContext.Provider>
+    </AzureMapsContext.Provider>
+  )
+}
+
+describe('userMapDrawingLayer tests', () => {
+  it('should create standard layer and set options', () => {
+    const options = {iconOptions: { image: 'marker-blue' }}
+    const { result } = renderHook(
+      () =>
+        useAzureMapDrawingLayer({
+          type: 'pointLayer',
+          options
+        }),
+      { wrapper: wrapWithAzureMapContext }
+    )
+    
+    expect((result.current.layerRef as unknown as { layer: string }).layer).toBe("SymbolLayer")
+    expect(result.current.layerRef?.setOptions).toBeCalledWith(options)
+  })
+
+  it('should handle add events to layerRef', () => {
+    mapRef.events.add = jest.fn()
+    const options = {iconOptions: { image: 'marker-blue' }}
+    const events = { click: () => {} }
+    renderHook(
+      () =>
+        useAzureMapDrawingLayer({
+          type: 'pointLayer',
+          options,
+          events
+        }),
+      { wrapper: wrapWithAzureMapContext }
+    )
+    expect(mapRef.events.add).toHaveBeenCalledWith('click', expect.any(Object), events.click)
+  })
+
+  it('should handle add lifeCycleEvents to layerRef', () => {
+    mapRef.events.add = jest.fn()
+    const lifecycleEvents = { onCreate: () => {} }
+    const options = {iconOptions: { image: 'marker-blue' }}
+    renderHook(
+      () =>
+        useAzureMapDrawingLayer({
+          type: 'pointLayer',
+          options,
+          lifecycleEvents
+        }),
+      { wrapper: wrapWithAzureMapContext }
+    )
+    expect(mapRef.events.add).toHaveBeenCalledWith(
+      'onCreate',
+      expect.any(Object),
+      lifecycleEvents.onCreate
+    )
+  })
+})

src/hooks/useAzureMapDrawingLayer.test.tsx

@@ -339,7 +339,7 @@ export interface IAzureMapDrawingManagerProps {
 }
 
 export interface IAzureDrawingManagerStatefulProviderProps {
-  options: Omit<DrawingManagerOptions, 'toolbar'> & { 'toolbar': DrawingToolbarOptions }
+  options: Omit<DrawingManagerOptions, 'toolbar'> & { 'toolbar'?: DrawingToolbarOptions }
   events?: IAzureDrawingManagerEvent
   children?: 
     | Array<IAzureDataSourceChildren | null>