react-map-gl/test/render/test-cases.jsx

import * as React from 'react';
import {
  NavigationControl,
  GeolocateControl,
  Marker,
  Popup,
  Source,
  Layer
} from 'react-map-gl/mapbox-legacy';

const __MAPBOX_TOKEN__ = import.meta.env.VITE_MAPBOX_TOKEN;

const ALT_EMPTY_MAP_STYLE = {
  version: 8,
  sources: {},
  layers: [
    {
      id: 'background',
      type: 'background',
      paint: {
        'background-color': '#F6F046',
        'background-opacity': 1
      }
    }
  ]
};

export default [
  {
    title: 'Basic map',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5
    },
    threshold: 0.97,
    goldenImage: 'test/render/golden-images/basic-map.png'
  },
  {
    title: 'Invalid map token',
    props: {
      mapboxAccessToken: 'invalid_token',
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5
    },
    mapError: true
  },
  {
    title: 'Custom tile server',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      mapStyle: '/test/data/style.json',
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5
    },
    threshold: 0.97,
    goldenImage: 'test/render/golden-images/uber-map.png'
  },
  {
    title: 'NavigationControl',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5,
      bearing: 30,
      children: <NavigationControl position="top-left" />
    },
    goldenImage: 'test/render/golden-images/navigation-control.png'
  },
  {
    title: 'GeolocateControl',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5,
      bearing: 30,
      children: (
        <GeolocateControl
          position="top-left"
          positionOptions={{enableHighAccuracy: true}}
          trackUserLocation={true}
        />
      )
    },
    goldenImage: 'test/render/golden-images/geolocate-control.png'
  },
  {
    title: 'Marker',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      longitude: -122.4,
      latitude: 37.78,
      reuseMaps: true,
      zoom: 12.5,
      children: [
        <Marker key="0" longitude={-122.4} latitude={37.78} />,
        <Marker key="1" longitude={-122.41} latitude={37.779} anchor="bottom">
          <svg height={24} viewBox="0 0 24 24" style={{fill: '#d00', stroke: 'none'}}>
            <path
              d={`M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
  C20.1,15.8,20.2,15.8,20.2,15.7z`}
            />
          </svg>
        </Marker>
      ]
    },
    threshold: 0.95,
    goldenImage: 'test/render/golden-images/marker.png'
  },
  {
    title: 'Popup',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      longitude: -122.4,
      latitude: 37.78,
      reuseMaps: true,
      zoom: 12.5,
      children: [
        <Popup key="0" longitude={-122.4} latitude={37.78} className="test-popup">
          This is the center
        </Popup>,
        <Popup
          key="1"
          longitude={-122.4}
          latitude={37.779}
          closeButton={false}
          anchor="top-right"
          className="test-popup"
        >
          Custom anchor
        </Popup>
      ]
    },
    threshold: 0.95,
    goldenImage: 'test/render/golden-images/popup.png'
  },
  {
    title: 'JSX Source/Layer',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5,
      children: [
        <Source
          key="geojson-data"
          type="geojson"
          data={{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.78]}}}
        >
          <Layer type="circle" paint={{'circle-radius': 10, 'circle-color': '#08f'}} />
        </Source>
      ]
    },
    goldenImage: 'test/render/golden-images/source-01.png'
  },
  {
    title: 'JSX Source/Layer toggle style',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      mapStyle: ALT_EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5,
      children: [
        <Source
          key="geojson-data"
          type="geojson"
          data={{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.78]}}}
        >
          <Layer type="circle" paint={{'circle-radius': 10, 'circle-color': '#08f'}} />
        </Source>
      ]
    },
    goldenImage: 'test/render/golden-images/source-02.png'
  },
  {
    title: 'JSX Source/Layer removal',
    props: {
      mapboxAccessToken: __MAPBOX_TOKEN__,
      mapStyle: ALT_EMPTY_MAP_STYLE,
      longitude: -122.4,
      latitude: 37.78,
      zoom: 12.5,
      children: []
    },
    goldenImage: 'test/render/golden-images/alt-empty-map.png'
  }
].filter(testCase => testCase.props.mapboxAccessToken);