From aa06b32e17fa6377073f0cefa7fa95a7e9a21795 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 14 Nov 2019 19:08:51 +0200 Subject: [PATCH] Add some tests for Choropleth visualization (#4358) --- client/app/components/ColorPicker/Input.jsx | 1 + client/app/components/ColorPicker/index.jsx | 14 ++- .../choropleth/Editor/ColorsSettings.jsx | 13 ++- .../choropleth/Editor/FormatSettings.jsx | 23 +++-- .../choropleth/Editor/GeneralSettings.jsx | 14 +-- .../visualizations/choropleth_spec.js | 86 +++++++++++++++++++ client/cypress/support/commands.js | 2 +- 7 files changed, 136 insertions(+), 17 deletions(-) create mode 100644 client/cypress/integration/visualizations/choropleth_spec.js diff --git a/client/app/components/ColorPicker/Input.jsx b/client/app/components/ColorPicker/Input.jsx index 89af2ec5af..040f2de25c 100644 --- a/client/app/components/ColorPicker/Input.jsx +++ b/client/app/components/ColorPicker/Input.jsx @@ -61,6 +61,7 @@ export default function Input({ color, presetColors, presetColumns, onChange, on ))}
#} value={inputValue} onChange={e => handleInputChange(e.target.value)} diff --git a/client/app/components/ColorPicker/index.jsx b/client/app/components/ColorPicker/index.jsx index 946c3a5c33..a067f811cc 100644 --- a/client/app/components/ColorPicker/index.jsx +++ b/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={( - {children || ()} + {children || ( + + )} ); } @@ -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; diff --git a/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx b/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx index 6dec6113b8..08ff86b8b8 100644 --- a/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx +++ b/client/app/visualizations/choropleth/Editor/ColorsSettings.jsx @@ -20,12 +20,13 @@ export default function ColorsSettings({ options, onOptionsChange }) { @@ -38,6 +39,7 @@ export default function ColorsSettings({ options, onOptionsChange }) { onOptionsChangeDebounced({ valueFormat: event.target.value })} /> @@ -79,6 +80,7 @@ export default function GeneralSettings({ options, onOptionsChange }) { onOptionsChangeDebounced({ noValuePlaceholder: event.target.value })} /> @@ -89,6 +91,7 @@ export default function GeneralSettings({ options, onOptionsChange }) {
@@ -56,11 +57,12 @@ export default function GeneralSettings({ options, data, onOptionsChange }) { @@ -70,11 +72,12 @@ export default function GeneralSettings({ options, data, onOptionsChange }) { @@ -84,11 +87,12 @@ export default function GeneralSettings({ options, data, onOptionsChange }) { diff --git a/client/cypress/integration/visualizations/choropleth_spec.js b/client/cypress/integration/visualizations/choropleth_spec.js new file mode 100644 index 0000000000..65a6b4c18a --- /dev/null +++ b/client/cypress/integration/visualizations/choropleth_spec.js @@ -0,0 +1,86 @@ +/* global cy, Cypress */ + +import { createQuery } from '../../support/redash-api'; + +const SQL = ` + SELECT 'AR' AS "code", 'Argentina' AS "name", 37.62 AS "value" UNION ALL + SELECT 'AU' AS "code", 'Australia' AS "name", 37.62 AS "value" UNION ALL + SELECT 'AT' AS "code", 'Austria' AS "name", 42.62 AS "value" UNION ALL + SELECT 'BE' AS "code", 'Belgium' AS "name", 37.62 AS "value" UNION ALL + SELECT 'BR' AS "code", 'Brazil' AS "name", 190.10 AS "value" UNION ALL + SELECT 'CA' AS "code", 'Canada' AS "name", 303.96 AS "value" UNION ALL + SELECT 'CL' AS "code", 'Chile' AS "name", 46.62 AS "value" UNION ALL + SELECT 'CZ' AS "code", 'Czech Republic' AS "name", 90.24 AS "value" UNION ALL + SELECT 'DK' AS "code", 'Denmark' AS "name", 37.62 AS "value" UNION ALL + SELECT 'FI' AS "code", 'Finland' AS "name", 41.62 AS "value" UNION ALL + SELECT 'FR' AS "code", 'France' AS "name", 195.10 AS "value" UNION ALL + SELECT 'DE' AS "code", 'Germany' AS "name", 156.48 AS "value" UNION ALL + SELECT 'HU' AS "code", 'Hungary' AS "name", 45.62 AS "value" UNION ALL + SELECT 'IN' AS "code", 'India' AS "name", 75.26 AS "value" UNION ALL + SELECT 'IE' AS "code", 'Ireland' AS "name", 45.62 AS "value" UNION ALL + SELECT 'IT' AS "code", 'Italy' AS "name", 37.62 AS "value" UNION ALL + SELECT 'NL' AS "code", 'Netherlands' AS "name", 40.62 AS "value" UNION ALL + SELECT 'NO' AS "code", 'Norway' AS "name", 39.62 AS "value" UNION ALL + SELECT 'PL' AS "code", 'Poland' AS "name", 37.62 AS "value" UNION ALL + SELECT 'PT' AS "code", 'Portugal' AS "name", 77.24 AS "value" UNION ALL + SELECT 'ES' AS "code", 'Spain' AS "name", 37.62 AS "value" UNION ALL + SELECT 'SE' AS "code", 'Sweden' AS "name", 38.62 AS "value" UNION ALL + SELECT 'US' AS "code", 'USA' AS "name", 523.06 AS "value" UNION ALL + SELECT 'GB' AS "code", 'United Kingdom' AS "name", 112.86 AS "value" +`; + +describe('Choropleth', () => { + const viewportWidth = Cypress.config('viewportWidth'); + + beforeEach(() => { + cy.login(); + createQuery({ query: SQL }).then(({ id }) => { + cy.visit(`queries/${id}/source`); + cy.getByTestId('ExecuteButton').click(); + }); + }); + + it('creates visualization', () => { + cy.clickThrough(` + NewVisualization + VisualizationType + VisualizationType.CHOROPLETH + `); + + cy.clickThrough(` + Choropleth.EditorTabs.General + Choropleth.Editor.MapType + Choropleth.Editor.MapType.Countries + Choropleth.Editor.KeyColumn + Choropleth.Editor.KeyColumn.name + Choropleth.Editor.KeyType + Choropleth.Editor.KeyType.name + Choropleth.Editor.ValueColumn + Choropleth.Editor.ValueColumn.value + `); + + cy.clickThrough('Choropleth.EditorTabs.Colors'); + cy.clickThrough('Choropleth.Editor.Colors.Min'); + cy.fillInputs({ 'ColorPicker.CustomColor': 'yellow{enter}' }); + cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting + cy.clickThrough('Choropleth.Editor.Colors.Max'); + cy.fillInputs({ 'ColorPicker.CustomColor': 'red{enter}' }); + cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting + cy.clickThrough('Choropleth.Editor.Colors.Borders'); + cy.fillInputs({ 'ColorPicker.CustomColor': 'black{enter}' }); + cy.wait(100); // eslint-disable-line cypress/no-unnecessary-waiting + + cy.clickThrough(` + Choropleth.EditorTabs.Format + Choropleth.Editor.LegendPosition + Choropleth.Editor.LegendPosition.TopRight + `); + + cy.getByTestId('Choropleth.Editor.LegendTextAlignment.Left').check({ force: true }); + + // Wait for proper initialization of visualization + cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting + cy.getByTestId('VisualizationPreview').find('.map-visualization-container.leaflet-container').should('exist'); + cy.percySnapshot('Visualizations - Choropleth', { widths: [viewportWidth] }); + }); +}); diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js index eefe325f33..1bdae27469 100644 --- a/client/cypress/support/commands.js +++ b/client/cypress/support/commands.js @@ -47,7 +47,7 @@ Cypress.Commands.add('clickThrough', (...args) => { Cypress.Commands.add('fillInputs', (elements, { wait = 0 } = {}) => { each(elements, (value, testId) => { - cy.getByTestId(testId).clear().type(value); + cy.getByTestId(testId).filter(':visible').clear().type(value); if (wait > 0) { cy.wait(wait); // eslint-disable-line cypress/no-unnecessary-waiting }