Tests

client/app/components/ColorPicker/Input.jsx

@@ -61,6 +61,7 @@ export default function Input({ color, presetColors, presetColumns, onChange, on
       ))}
       <div className="color-picker-input">
         <TextInput
+          data-test="ColorPicker.CustomColor"
           addonBefore={<Typography.Text type="secondary">#</Typography.Text>}
           value={inputValue}
           onChange={e => handleInputChange(e.target.value)}

client/app/components/ColorPicker/index.jsx

@@ -1,6 +1,7 @@
 import { toString } from 'lodash';
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import tinycolor from 'tinycolor2';
 import Popover from 'antd/lib/popover';
 import Card from 'antd/lib/card';
@@ -19,6 +20,7 @@ function validateColor(value, fallback = null) {
 
 export default function ColorPicker({
   color, placement, presetColors, presetColumns, triggerSize, interactive, children, onChange,
+  className, ...props
 }) {
   const [visible, setVisible] = useState(false);
   const [currentColor, setCurrentColor] = useState('');
@@ -67,6 +69,7 @@ export default function ColorPicker({
       overlayStyle={{ '--color-picker-selected-color': currentColor }}
       content={(
         <Card
+          data-test="ColorPicker"
           className="color-picker-panel"
           bordered={false}
           title={toString(currentColor).toUpperCase()}
@@ -90,7 +93,14 @@ export default function ColorPicker({
       visible={visible}
       onVisibleChange={setVisible}
     >
-      {children || (<Swatch className="color-picker-trigger" color={validateColor(color)} size={triggerSize} />)}
+      {children || (
+        <Swatch
+          className={cx('color-picker-trigger', className)}
+          color={validateColor(color)}
+          size={triggerSize}
+          {...props}
+        />
+      )}
     </Popover>
   );
 }
@@ -111,6 +121,7 @@ ColorPicker.propTypes = {
   interactive: PropTypes.bool,
   children: PropTypes.node,
   onChange: PropTypes.func,
+  className: PropTypes.string,
 };
 
 ColorPicker.defaultProps = {
@@ -122,6 +133,7 @@ ColorPicker.defaultProps = {
   interactive: false,
   children: null,
   onChange: () => {},
+  className: null,
 };
 
 ColorPicker.Input = ColorInput;

client/app/visualizations/map/Editor/GroupsSettings.jsx

@@ -39,7 +39,7 @@ export default function GroupsSettings({ options, data, onOptionsChange }) {
       width: '1%',
       render: (unused, item) => (
         <ColorPicker
-          data-test={`Map.Editor.Groups.${item.key}.Color`}
+          data-test={`Map.Editor.Groups.${item.name}.Color`}
           interactive
           presetColors={colors}
           placement="topRight"

client/cypress/integration/visualizations/map_spec.js

@@ -0,0 +1,97 @@
+/* global cy */
+
+import { createQuery } from '../../support/redash-api';
+
+const SQL = `
+  SELECT 'Israel' AS country, 32.0808800 AS lat, 34.7805700 AS lng UNION ALL 
+  SELECT 'Israel' AS country, 31.7690400 AS lat, 35.2163300 AS lng UNION ALL
+  SELECT 'Israel' AS country, 32.8184100 AS lat, 34.9885000 AS lng UNION ALL
+  
+  SELECT 'Ukraine' AS country, 50.4546600 AS lat, 30.5238000 AS lng UNION ALL
+  SELECT 'Ukraine' AS country, 49.8382600 AS lat, 24.0232400 AS lng UNION ALL 
+  SELECT 'Ukraine' AS country, 49.9808100 AS lat, 36.2527200 AS lng UNION ALL 
+
+  SELECT 'Hungary' AS country, 47.4980100 AS lat, 19.0399100 AS lng
+`;
+
+describe('Map (Markers)', () => {
+  const viewportWidth = Cypress.config('viewportWidth');
+
+  beforeEach(() => {
+    cy.login();
+    createQuery({ query: SQL }).then(({ id }) => {
+      cy.visit(`queries/${id}/source`);
+      cy.getByTestId('ExecuteButton').click();
+    });
+  });
+
+  it('creates Map with groups', () => {
+    cy.clickThrough(`
+      NewVisualization
+      VisualizationType
+      VisualizationType.MAP
+    `);
+
+    cy.clickThrough(`
+      Map.EditorTabs.General
+      Map.Editor.LatitudeColumnName
+      Map.Editor.LatitudeColumnName.lat
+      Map.Editor.LongitudeColumnName
+      Map.Editor.LongitudeColumnName.lng
+      Map.Editor.GroupBy
+      Map.Editor.GroupBy.country
+    `);
+
+    cy.clickThrough('Map.EditorTabs.Groups');
+    cy.clickThrough('Map.Editor.Groups.Israel.Color');
+    cy.fillInputs({ 'ColorPicker.CustomColor': 'red{enter}' });
+    cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.clickThrough('Map.Editor.Groups.Ukraine.Color');
+    cy.fillInputs({ 'ColorPicker.CustomColor': 'green{enter}' });
+    cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.clickThrough('Map.Editor.Groups.Hungary.Color');
+    cy.fillInputs({ 'ColorPicker.CustomColor': 'blue{enter}' });
+
+    cy.getByTestId('VisualizationPreview').find('.leaflet-control-zoom-in').click();
+
+    // Wait for proper initialization of visualization
+    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.percySnapshot('Visualizations - Map (Markers) with groups', { widths: [viewportWidth] });
+  });
+
+  it('creates Map with custom markers', () => {
+    cy.clickThrough(`
+      NewVisualization
+      VisualizationType
+      VisualizationType.MAP
+    `);
+
+    cy.clickThrough(`
+      Map.EditorTabs.General
+      Map.Editor.LatitudeColumnName
+      Map.Editor.LatitudeColumnName.lat
+      Map.Editor.LongitudeColumnName
+      Map.Editor.LongitudeColumnName.lng
+    `);
+
+    cy.clickThrough(`
+      Map.EditorTabs.Style
+      Map.Editor.ClusterMarkers
+      Map.Editor.CustomizeMarkers
+    `);
+
+    cy.fillInputs({ 'Map.Editor.MarkerIcon': 'home' }, { wait: 250 }); // this input is debounced
+
+    cy.clickThrough('Map.Editor.MarkerBackgroundColor');
+    cy.fillInputs({ 'ColorPicker.CustomColor': 'red{enter}' });
+    cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.clickThrough('Map.Editor.MarkerBorderColor');
+    cy.fillInputs({ 'ColorPicker.CustomColor': 'maroon{enter}' });
+
+    cy.getByTestId('VisualizationPreview').find('.leaflet-control-zoom-in').click();
+
+    // Wait for proper initialization of visualization
+    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.percySnapshot('Visualizations - Map (Markers) with custom markers', { widths: [viewportWidth] });
+  });
+});

client/cypress/support/commands.js

@@ -47,7 +47,7 @@ Cypress.Commands.add('clickThrough', (...args) => {
 
 Cypress.Commands.add('fillInputs', (elements) => {
   each(elements, (value, testId) => {
-    cy.getByTestId(testId).clear().type(value);
+    cy.getByTestId(testId).filter(':visible').clear().type(value);
   });
 });