Skip to content

Commit

Permalink
Tests
Browse files Browse the repository at this point in the history
  • Loading branch information
kravets-levko committed Oct 20, 2019
1 parent 33899f2 commit 4b244b8
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
<Input
id="funnel-editor-step-column-title"
className="w-100"
data-test="Funnel.NumberFormat"
defaultValue={options.numberFormat}
onChange={event => onOptionsChangeDebounced({ numberFormat: event.target.value })}
/>
Expand All @@ -58,6 +59,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
<Input
id="funnel-editor-step-column-title"
className="w-100"
data-test="Funnel.PercentFormat"
defaultValue={options.percentFormat}
onChange={event => onOptionsChangeDebounced({ percentFormat: event.target.value })}
/>
Expand All @@ -72,6 +74,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
<InputNumber
id="funnel-editor-items-limit"
className="w-100"
data-test="Funnel.ItemsLimit"
min={2}
defaultValue={options.itemsLimit}
onChange={itemsLimit => onOptionsChangeDebounced({ itemsLimit })}
Expand All @@ -87,6 +90,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
<InputNumber
id="funnel-editor-percent-values-range-min"
className="w-100"
data-test="Funnel.PercentRangeMin"
min={0}
defaultValue={options.percentValuesRange.min}
onChange={min => onOptionsChangeDebounced({ percentValuesRange: { min } })}
Expand All @@ -102,6 +106,7 @@ export default function AppearanceSettings({ options, onOptionsChange }) {
<InputNumber
id="funnel-editor-percent-values-range-max"
className="w-100"
data-test="Funnel.PercentRangeMax"
min={0}
defaultValue={options.percentValuesRange.max}
onChange={max => onOptionsChangeDebounced({ percentValuesRange: { max } })}
Expand Down
12 changes: 9 additions & 3 deletions client/app/visualizations/funnel/Editor/GeneralSettings.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Select
id="funnel-editor-step-column-name"
className="w-100"
data-test="Funnel.StepColumn"
placeholder="Choose column..."
defaultValue={options.stepCol.colName || undefined}
onChange={colName => onOptionsChange({ stepCol: { colName: colName || null } })}
>
{map(columnNames, col => (
<Select.Option key={col}>{col}</Select.Option>
<Select.Option key={col} data-test={`Funnel.StepColumn.${col}`}>{col}</Select.Option>
))}
</Select>
</Grid.Col>
Expand All @@ -41,6 +42,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Input
id="funnel-editor-step-column-title"
className="w-100"
data-test="Funnel.StepColumnTitle"
defaultValue={options.stepCol.displayAs}
onChange={event => onOptionsChangeDebounced({ stepCol: { displayAs: event.target.value } })}
/>
Expand All @@ -55,12 +57,13 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Select
id="funnel-editor-value-column-name"
className="w-100"
data-test="Funnel.ValueColumn"
placeholder="Choose column..."
defaultValue={options.valueCol.colName || undefined}
onChange={colName => onOptionsChange({ valueCol: { colName: colName || null } })}
>
{map(columnNames, col => (
<Select.Option key={col}>{col}</Select.Option>
<Select.Option key={col} data-test={`Funnel.ValueColumn.${col}`}>{col}</Select.Option>
))}
</Select>
</Grid.Col>
Expand All @@ -74,6 +77,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Input
id="funnel-editor-value-column-title"
className="w-100"
data-test="Funnel.ValueColumnTitle"
defaultValue={options.valueCol.displayAs}
onChange={event => onOptionsChangeDebounced({ valueCol: { displayAs: event.target.value } })}
/>
Expand All @@ -88,13 +92,14 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Select
id="funnel-editor-sort-column-name"
className="w-100"
data-test="Funnel.SortColumn"
allowClear
placeholder="Choose column..."
defaultValue={options.sortKeyCol.colName || undefined}
onChange={colName => onOptionsChange({ sortKeyCol: { colName: colName || null } })}
>
{map(columnNames, col => (
<Select.Option key={col}>{col}</Select.Option>
<Select.Option key={col} data-test={`Funnel.SortColumn.${col}`}>{col}</Select.Option>
))}
</Select>
</Grid.Col>
Expand All @@ -107,6 +112,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
<Grid.Col span={12}>
<Switch
id="funnel-editor-sort-reverse"
data-test="Funnel.SortReverse"
defaultChecked={options.sortKeyCol.reverse}
onChange={reverse => onOptionsChange({ sortKeyCol: { reverse } })}
/>
Expand Down
3 changes: 1 addition & 2 deletions client/app/visualizations/funnel/getOptions.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ const DEFAULT_OPTIONS = {
stepCol: { colName: null, displayAs: 'Steps' },
valueCol: { colName: null, displayAs: 'Value' },
sortKeyCol: { colName: null, reverse: false },
autoSort: true,
itemsLimit: 100,
percentValuesRange: { min: 0.01, max: 1000.0 },
numberFormat: '0,0[.]00',
Expand Down Expand Up @@ -36,7 +35,7 @@ export default function getOptions(options, { columns }) {
// Backward compatibility
if (options.autoSort) {
delete options.autoSort;
options.sortKeyCol.colName = options.valueCol;
options.sortKeyCol.colName = options.valueCol.colName;
options.sortKeyCol.reverse = true;
}

Expand Down
80 changes: 80 additions & 0 deletions client/cypress/integration/visualizations/funnel_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/* global cy, Cypress */

import { createQuery } from '../../support/redash-api';

const SQL = `
SELECT 'a.01' AS a, 1.758831600227 AS b UNION ALL
SELECT 'a.02' AS a, 613.4456936572 AS b UNION ALL
SELECT 'a.03' AS a, 9.045647090023 AS b UNION ALL
SELECT 'a.04' AS a, 29.37836413439 AS b UNION ALL
SELECT 'a.05' AS a, 642.9434910444 AS b UNION ALL
SELECT 'a.06' AS a, 176.7634164480 AS b UNION ALL
SELECT 'a.07' AS a, 279.4880059198 AS b UNION ALL
SELECT 'a.08' AS a, 78.48128609207 AS b UNION ALL
SELECT 'a.09' AS a, 14.10443892662 AS b UNION ALL
SELECT 'a.10' AS a, 59.25097112438 AS b UNION ALL
SELECT 'a.11' AS a, 61.58610868125 AS b UNION ALL
SELECT 'a.12' AS a, 277.8473055268 AS b UNION ALL
SELECT 'a.13' AS a, 621.1535090415 AS b UNION ALL
SELECT 'a.14' AS a, 261.1409234646 AS b UNION ALL
SELECT 'a.15' AS a, 72.94883358030 AS b
`;

describe('Funnel', () => {
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.FUNNEL
`);

cy.clickThrough(`
Funnel.EditorTabs.General
Funnel.StepColumn
Funnel.StepColumn.a
Funnel.ValueColumn
Funnel.ValueColumn.b
Funnel.SortColumn
Funnel.SortColumn.b
Funnel.SortReverse
`);

cy.fillInputs({
'Funnel.StepColumnTitle': 'Column A',
'Funnel.ValueColumnTitle': 'Column B',
});

// Wait for proper initialization of visualization
cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
cy.getByTestId('VisualizationPreview').find('table').should('exist');
cy.percySnapshot('Visualizations - Funnel (basic)', { widths: [viewportWidth] });

cy.clickThrough(`
Funnel.EditorTabs.Appearance
`);

cy.fillInputs({
'Funnel.NumberFormat': '0[.]00',
'Funnel.PercentFormat': '0[.]0000%',
'Funnel.ItemsLimit': '10',
'Funnel.PercentRangeMin': '10',
'Funnel.PercentRangeMax': '90',
});

// Wait for proper initialization of visualization
cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
cy.getByTestId('VisualizationPreview').find('table').should('exist');
cy.percySnapshot('Visualizations - Funnel (extra options)', { widths: [viewportWidth] });
});
});

0 comments on commit 4b244b8

Please sign in to comment.