unit test mapbox icon-image expression

elastic · Jun 25, 2020 · 5dd915e · 5dd915e
1 parent 1577507
commit 5dd915e
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 14 deletions.
diff --git a/...public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap b/...public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
@@ -34,8 +34,8 @@ const makeProperty = (options: Partial<IconDynamicOptions>, field: IField = mock
   );
 };
 
-describe('DynamicIconProperty', () => {
-  it('should derive category number from palettes', async () => {
+describe('getNumberOfCategories', () => {
+  test('should derive category number from palettes', async () => {
     const filled = makeProperty({
       iconPaletteId: 'filledShapes',
     });
@@ -47,15 +47,53 @@ describe('DynamicIconProperty', () => {
   });
 });
 
-test('Should render categorical legend with breaks', async () => {
-  const iconStyle = makeProperty({
-    iconPaletteId: 'filledShapes',
+describe('renderLegendDetailRow', () => {
+  test('Should render categorical legend with breaks', async () => {
+    const iconStyle = makeProperty({
+      iconPaletteId: 'filledShapes',
+    });
+
+    const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
+    const component = shallow(legendRow);
+    await new Promise((resolve) => process.nextTick(resolve));
+    component.update();
+
+    expect(component).toMatchSnapshot();
   });
+});
 
-  const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
-  const component = shallow(legendRow);
-  await new Promise((resolve) => process.nextTick(resolve));
-  component.update();
+describe('get mapbox icon-image expression (via internal _getMbIconImageExpression)', () => {
+  describe('categorical icon palette', () => {
+    test('should return mapbox expression for pre-defined icon palette', async () => {
+      const iconStyle = makeProperty({
+        iconPaletteId: 'filledShapes',
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'US',
+        'circle-15',
+        'CN',
+        'marker-15',
+        'square-15',
+      ]);
+    });
 
-  expect(component).toMatchSnapshot();
+    test('should return mapbox expression for custom icon palette', async () => {
+      const iconStyle = makeProperty({
+        useCustomIconMap: true,
+        customIconStops: [
+          { stop: null, icon: 'circle' },
+          { stop: 'MX', icon: 'marker' },
+        ],
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'MX',
+        'marker-15',
+        'circle-15',
+      ]);
+    });
+  });
 });
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts
@@ -62,11 +62,11 @@ export function assignCategoriesToPalette({
   paletteValues: string[];
 }) {
   const stops = [];
-  let fallback = null;
+  let fallbackSymbolId = null;
 
   if (categories.length && paletteValues.length) {
     const maxLength = Math.min(paletteValues.length, categories.length + 1);
-    fallback = paletteValues[maxLength - 1];
+    fallbackSymbolId = paletteValues[maxLength - 1];
     for (let i = 0; i < maxLength - 1; i++) {
       stops.push({
         stop: categories[i].key,
@@ -77,7 +77,7 @@ export function assignCategoriesToPalette({
 
   return {
     stops,
-    fallback,
+    fallbackSymbolId,
   };
 }