Merge branch 'master' into feat/drawing-manager

Author: ambientlight

__mocks__/azure-maps-control.js

@@ -1,3 +1,11 @@
+class DataSource {
+  add = jest.fn()
+  clear = jest.fn()
+  remove = jest.fn()
+  importDataFromUrl = jest.fn()
+  setOptions = jest.fn()
+}
+
 module.exports = {
   Map: jest.fn(() => ({
     controls: {
@@ -66,7 +74,9 @@ module.exports = {
     CompassControl: jest.fn(() => ({ compassOption: 'option' })),
     PitchControl: jest.fn(() => ({ pitchOption: 'option' })),
     StyleControl: jest.fn(() => ({ styleOption: 'option' })),
-    ZoomControl: jest.fn(() => ({ zoomOption: 'option' }))
+    ZoomControl: jest.fn(() => ({ zoomOption: 'option' })),
+    TrafficControl: jest.fn(() => ({ trafficOption: 'option' })),
+    TrafficLegendControl: jest.fn(() => ({ trafficLegendOption: 'option' }))
   },
   layer: {
     ImageLayer: jest.fn((options, id) => ({ layer: 'ImageLayer', options, id })),
@@ -111,13 +121,11 @@ module.exports = {
     }))
   },
   source: {
-    DataSource: jest.fn(() => ({
-      add: jest.fn(),
-      clear: jest.fn(),
-      remove: jest.fn(),
-      importDataFromUrl: jest.fn(),
-      setOptions: jest.fn()
-    }))
+    DataSource,
+    VectorTileSource: jest.fn((id, options) => ({
+      getId: jest.fn(() => id),
+      getOptions: jest.fn(() => options)
+    })) 
   },
   Shape: jest.fn(() => ({
     setCoordinates: jest.fn(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",

src/components/AzureMap/AzureMap.test.tsx

@@ -4,15 +4,15 @@ import { AzureMapsContext } from '../../contexts/AzureMapContext'
 import AzureMap from './AzureMap'
 import { Map } from 'azure-maps-control'
 import { IAzureMap, IAzureMapsContextProps } from '../../types'
-import { useCreateImageSprites } from './useCreateSprites'
-import { useCreateMapCustomControls, useCreateMapControls } from './useCreateMapControls'
+import { createImageSprites } from './useCreateSprites'
+import { createMapCustomControls, createMapControls } from './useCreateMapControls'
 
 const LoaderComponent = () => <div>Loader</div>
 
 jest.mock('./useCreateMapControls', () => {
   return {
-    useCreateMapCustomControls: jest.fn(),
-    useCreateMapControls: jest.fn()
+    createMapCustomControls: jest.fn(),
+    createMapControls: jest.fn()
   }
 })
 
@@ -108,25 +108,25 @@ describe('AzureMap Component', () => {
     expect(mapContextProps.removeMapRef).toHaveBeenCalled()
   })
 
-  it('should call useCreateImageSprites if imageSprites is not falsy', () => {
+  it('should call createImageSprites if imageSprites is not falsy', () => {
     const mapRef = new Map('fake', {})
     render(
       wrapWithAzureMapContext(
         { ...mapContextProps, mapRef },
         { imageSprites: [{ id: 'some_fake_id' }] }
       )
     )
-    expect(useCreateImageSprites).toHaveBeenCalled()
+    expect(createImageSprites).toHaveBeenCalled()
   })
 
-  it('should call useCreateMapControls if controls is not falsy', () => {
+  it('should call createMapControls if controls is not falsy', () => {
     const mapRef = new Map('fake', {})
     const fakeControls = [{ controlName: 'fake_control_name' }]
     render(wrapWithAzureMapContext({ ...mapContextProps, mapRef }, { controls: fakeControls }))
-    expect(useCreateMapControls).toHaveBeenCalledWith(expect.any(Object), fakeControls)
+    expect(createMapControls).toHaveBeenCalledWith(expect.any(Object), fakeControls)
   })
 
-  it('should call useCreateMapCustomControls if customControls is not falsy', () => {
+  it('should call createMapCustomControls if customControls is not falsy', () => {
     const mapRef = new Map('fake', {})
     const customControls = [
       {
@@ -142,7 +142,7 @@ describe('AzureMap Component', () => {
         }
       )
     )
-    expect(useCreateMapCustomControls).toHaveBeenCalledWith(expect.any(Object), customControls)
+    expect(createMapCustomControls).toHaveBeenCalledWith(expect.any(Object), customControls)
   })
 
   it('should setTraffic on initial props', () => {

src/components/AzureMap/AzureMap.tsx

@@ -6,8 +6,8 @@ import { Guid } from 'guid-typescript'
 import 'azure-maps-control/dist/atlas.min.css'
 import 'mapbox-gl/src/css/mapbox-gl.css'
 import { useCheckRef } from '../../hooks/useCheckRef'
-import { useCreateImageSprites } from './useCreateSprites'
-import { useCreateMapControls, useCreateMapCustomControls } from './useCreateMapControls'
+import { createImageSprites } from './useCreateSprites'
+import { createMapControls, createMapCustomControls } from './useCreateMapControls'
 
 const AzureMap = memo(
   ({
@@ -64,13 +64,13 @@ const AzureMap = memo(
     useCheckRef<MapType, MapType>(mapRef, mapRef, mref => {
       mref.events.add('ready', () => {
         if (imageSprites) {
-          useCreateImageSprites(mref, imageSprites)
+          createImageSprites(mref, imageSprites)
         }
         if (controls) {
-          useCreateMapControls(mref, controls)
+          createMapControls(mref, controls)
         }
         if (customControls) {
-          useCreateMapCustomControls(mref, customControls)
+          createMapCustomControls(mref, customControls)
         }
         if (trafficOptions) {
           mref.setTraffic(trafficOptions)

src/components/AzureMap/useCreateMapControl.test.tsx

@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react-hooks'
 import {
   createControl,
-  useCreateMapControls,
-  useCreateMapCustomControls
+  createMapControls,
+  createMapCustomControls
 } from './useCreateMapControls'
 import { Map } from 'azure-maps-control'
 import { IAzureMapControls, IAzureCustomControls } from '../../types'
@@ -34,7 +34,7 @@ describe('Control hooks', () => {
     it('should create two map controls and call proper method', () => {
       const mockMap = new Map('#fake-container', {})
       mockMap.controls.add = jest.fn()
-      renderHook(() => useCreateMapControls(mockMap, fakeDefaultControls))
+      renderHook(() => createMapControls(mockMap, fakeDefaultControls))
       expect(mockMap.controls.add).toHaveBeenCalledWith(
         { compassOption: 'option' },
         fakeDefaultControls[0].options
@@ -46,11 +46,11 @@ describe('Control hooks', () => {
     })
   })
 
-  describe('useCreateMapCustomControls tests', () => {
+  describe('createMapCustomControls tests', () => {
     it('should create custom map controls and call proper method', () => {
       const mockMap = new Map('#fake-container', {})
       mockMap.controls.add = jest.fn()
-      renderHook(() => useCreateMapCustomControls(mockMap, fakeCustomControlls))
+      renderHook(() => createMapCustomControls(mockMap, fakeCustomControlls))
       expect(mockMap.controls.add).toHaveBeenCalledTimes(1)
       expect(mockMap.controls.add).toHaveBeenCalledWith(
         fakeCustomControlls[0].control,
@@ -80,6 +80,16 @@ describe('Control hooks', () => {
       expect(createdControl).toEqual({ compassOption: 'option' })
     })
 
+    it('should return TrafficControl if type equal TrafficControl', () => {
+      const createdControl = createControl('TrafficControl', {})
+      expect(createdControl).toEqual({ trafficOption: 'option' })
+    })
+
+    it('should return TrafficLegendControl if type equal TrafficLegendControl', () => {
+      const createdControl = createControl('TrafficLegendControl', {})
+      expect(createdControl).toEqual({ trafficLegendOption: 'option' })
+    })
+
     it('should return undefined if there is no control with type', () => {
       const createdControl = createControl('SomeOtherType', {})
       expect(createdControl).toEqual(undefined)

src/components/AzureMap/useCreateMapControls.tsx

@@ -4,12 +4,13 @@ import atlas, {
   ControlOptions,
   PitchControlOptions,
   StyleControlOptions,
+  TrafficControlOptions,
   ZoomControlOptions
 } from 'azure-maps-control'
 
 
 
-export const useCreateMapControls = (mapRef: MapType, controls: IAzureMapControls[]) => {
+export const createMapControls = (mapRef: MapType, controls: IAzureMapControls[]) => {
   controls.forEach((control: IAzureMapControls) => {
     const { controlName, options, controlOptions } = control
     mapRef.controls.add(
@@ -32,16 +33,21 @@ export const createControl = (
       return new atlas.control.StyleControl(options as StyleControlOptions)
     case 'ZoomControl':
       return new atlas.control.ZoomControl(options as ZoomControlOptions)
+    case 'TrafficControl':
+      return new atlas.control.TrafficControl(options as TrafficControlOptions)
+    case 'TrafficLegendControl':
+      return new atlas.control.TrafficLegendControl()
     default:
       console.warn('Check the type and passed props properties or try CustomControl')
   }
 }
 
-export const useCreateMapCustomControls = (
+export const createMapCustomControls = (
   mapRef: MapType,
   customControls: IAzureCustomControls[]
 ) => {
   customControls.forEach(({ control, controlOptions }: IAzureCustomControls) => {
     mapRef.controls.add(control, controlOptions)
   })
 }
+

src/components/AzureMap/useCreateSprites.test.tsx

@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react-hooks'
-import { useCreateImageSprites } from './useCreateSprites'
+import { createImageSprites } from './useCreateSprites'
 import { Map } from 'azure-maps-control'
 
-describe('useCreateImageSprites tests', () => {
+describe('createImageSprites tests', () => {
   it('should create image sprintes with icon field and call proper methods', async () => {
     const mockMap = new Map('#fake-container', {})
     const fakeImageSprite = {
@@ -13,7 +13,7 @@ describe('useCreateImageSprites tests', () => {
       secondaryColor: 'color',
       scale: 1
     }
-    const { result } = renderHook(() => useCreateImageSprites(mockMap, [fakeImageSprite]))
+    const { result } = renderHook(() => createImageSprites(mockMap, [fakeImageSprite]))
     await result.current
     expect(mockMap.imageSprite.add).toHaveBeenCalledWith('id', 'icon')
     expect(mockMap.imageSprite.createFromTemplate).toHaveBeenCalledWith(
@@ -34,7 +34,7 @@ describe('useCreateImageSprites tests', () => {
       secondaryColor: 'color',
       scale: 1
     }
-    const { result } = renderHook(() => useCreateImageSprites(mockMap, [fakeImageSprite]))
+    const { result } = renderHook(() => createImageSprites(mockMap, [fakeImageSprite]))
     await result.current
     expect(mockMap.imageSprite.add).not.toHaveBeenCalled()
     expect(mockMap.imageSprite.createFromTemplate).toHaveBeenCalledWith(
@@ -54,7 +54,7 @@ describe('useCreateImageSprites tests', () => {
       secondaryColor: 'color',
       scale: 1
     }
-    const { result } = renderHook(() => useCreateImageSprites(mockMap, [fakeImageSprite]))
+    const { result } = renderHook(() => createImageSprites(mockMap, [fakeImageSprite]))
     await result.current
     expect(mockMap.imageSprite.add).not.toHaveBeenCalled()
     expect(mockMap.imageSprite.createFromTemplate).toHaveBeenCalledWith(

src/components/AzureMap/useCreateSprites.tsx

@@ -1,6 +1,6 @@
 import { IAzureMapImageSprite, MapType } from '../../types'
 
-export const useCreateImageSprites = async (
+export const createImageSprites = async (
   mapRef: MapType,
   spriteArray: IAzureMapImageSprite[]
 ) => {

src/components/AzureMapFeature/AzureMapFeature.test.tsx

@@ -9,7 +9,7 @@ import atlas from 'azure-maps-control'
 
 jest.mock('./useFeature')
 jest.mock('./useCreateAzureMapFeature.ts', () => ({
-  useCreateAzureMapFeature: () => ({})
+  createAzureMapFeature: () => ({})
 }))
 
 const mapRef = new Map('fake', {})

src/components/AzureMapFeature/AzureMapFeature.tsx

@@ -3,7 +3,7 @@ import atlas from 'azure-maps-control'
 
 import { FeatureType, IAzureMapDataSourceProps, IAzureMapFeature, ShapeType } from '../../types'
 import { AzureMapDataSourceContext } from '../../contexts/AzureMapDataSourceContext'
-import { useCreateAzureMapFeature } from './useCreateAzureMapFeature'
+import { createAzureMapFeature } from './useCreateAzureMapFeature'
 import { useFeature } from './useFeature'
 
 const AzureMapFeature = memo((props: IAzureMapFeature) => {
@@ -15,7 +15,7 @@ const AzureMapFeature = memo((props: IAzureMapFeature) => {
   useFeature(props, dataSourceRef, shapeRef, featureRef)
 
   useEffect(() => {
-    const featureSource: atlas.data.Geometry | undefined = useCreateAzureMapFeature(props)
+    const featureSource: atlas.data.Geometry | undefined = createAzureMapFeature(props)
 
     if ((!featureRef || !shapeRef) && featureSource) {
       switch (variant) {

src/components/AzureMapFeature/useCreateAzureMapFeature.test.tsx

@@ -1,6 +1,6 @@
 import atlas from 'azure-maps-control'
 import { IAzureMapFeature } from '../../types'
-import { useCreateAzureMapFeature } from './useCreateAzureMapFeature'
+import { createAzureMapFeature } from './useCreateAzureMapFeature'
 
 const fakeCoordinate: atlas.data.Position = new atlas.data.Position(10, 10)
 const fakeCoordinates: atlas.data.Position[] = [
@@ -20,13 +20,13 @@ const fakeBbox: atlas.data.BoundingBox = new atlas.data.BoundingBox(
 )
 
 describe('AzureMapFeature hooks', () => {
-  describe('useCreateAzureMapFeature tests', () => {
+  describe('createAzureMapFeature tests', () => {
     it('should return Point if type equal Point', () => {
       const pointProps: IAzureMapFeature = {
         type: 'Point',
         coordinate: fakeCoordinate
       }
-      const createPoint = useCreateAzureMapFeature(pointProps)
+      const createPoint = createAzureMapFeature(pointProps)
       expect(createPoint).toEqual({ coords: [10, 10], type: 'Point' })
     })
     it('should return MultiPoint if type equal MultiPoint', () => {
@@ -35,7 +35,7 @@ describe('AzureMapFeature hooks', () => {
         coordinates: fakeCoordinates,
         bbox: fakeBbox
       }
-      const createMultiPoint = useCreateAzureMapFeature(multiPointProps)
+      const createMultiPoint = createAzureMapFeature(multiPointProps)
       expect(createMultiPoint).toEqual({
         bbox: [
           [10, 10],
@@ -54,7 +54,7 @@ describe('AzureMapFeature hooks', () => {
         coordinates: fakeCoordinates,
         bbox: fakeBbox
       }
-      const createLineString = useCreateAzureMapFeature(lineStringProps)
+      const createLineString = createAzureMapFeature(lineStringProps)
       expect(createLineString).toEqual({
         bbox: [
           [10, 10],
@@ -73,7 +73,7 @@ describe('AzureMapFeature hooks', () => {
         multipleCoordinates: fakeMultipleCoordinates,
         bbox: fakeBbox
       }
-      const createMultiLineStringProps = useCreateAzureMapFeature(multiLineStringProps)
+      const createMultiLineStringProps = createAzureMapFeature(multiLineStringProps)
       expect(createMultiLineStringProps).toEqual({
         bbox: [
           [10, 10],
@@ -89,7 +89,7 @@ describe('AzureMapFeature hooks', () => {
         coordinates: fakeCoordinates,
         bbox: fakeBbox
       }
-      const createLineString = useCreateAzureMapFeature(lineStringProps)
+      const createLineString = createAzureMapFeature(lineStringProps)
       expect(createLineString).toEqual({
         bbox: [
           [10, 10],
@@ -108,7 +108,7 @@ describe('AzureMapFeature hooks', () => {
         multipleDimensionCoordinates: fakeMultipleDimensionCoordinates,
         bbox: fakeBbox
       }
-      const createMultiPolygon = useCreateAzureMapFeature(multiPolygonProps)
+      const createMultiPolygon = createAzureMapFeature(multiPolygonProps)
       expect(createMultiPolygon).toEqual({
         bbox: [
           [10, 10],

src/components/AzureMapFeature/useCreateAzureMapFeature.ts

@@ -1,7 +1,7 @@
 import { IAzureMapFeature } from '../../types'
 import atlas from 'azure-maps-control'
 
-export const useCreateAzureMapFeature = ({
+export const createAzureMapFeature = ({
   type,
   coordinate,
   coordinates,