Skip to content

Commit

Permalink
[Lens] Add more chart editor tests based on the debug state (elastic#…
Browse files Browse the repository at this point in the history
…86750)

Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
3 people committed Dec 30, 2020
1 parent b6a0554 commit e4b02ba
Show file tree
Hide file tree
Showing 8 changed files with 232 additions and 0 deletions.
10 changes: 10 additions & 0 deletions x-pack/plugins/lens/public/pie_visualization/render_function.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,15 @@ import {
} from '../../../../../src/plugins/charts/public';
import { LensIconChartDonut } from '../assets/chart_donut';

declare global {
interface Window {
/**
* Flag used to enable debugState on elastic charts
*/
_echDebugStateFlag?: boolean;
}
}

const EMPTY_SLICE = Symbol('empty_slice');

export function PieComponent(
Expand Down Expand Up @@ -251,6 +260,7 @@ export function PieComponent(
>
<Chart>
<Settings
debugState={window._echDebugStateFlag ?? false}
// Legend is hidden in many scenarios
// - Tiny preview
// - Treemap does not need a legend because it uses category labels
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions x-pack/plugins/lens/public/xy_visualization/expression.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,15 @@ import { fittingFunctionDefinitions, getFitOptions } from './fitting_functions';
import { getAxesConfiguration } from './axes_configuration';
import { getColorAssignments } from './color_assignment';

declare global {
interface Window {
/**
* Flag used to enable debugState on elastic charts
*/
_echDebugStateFlag?: boolean;
}
}

type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
type SeriesSpec = InferPropType<typeof LineSeries> &
InferPropType<typeof BarSeries> &
Expand Down Expand Up @@ -508,6 +517,7 @@ export function XYChart({
return (
<Chart>
<Settings
debugState={window._echDebugStateFlag ?? false}
showLegend={
legend.isVisible && !legend.showSingleSeries
? chartHasMoreThanOneSeries
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,20 +94,23 @@ const valueLabelsOptions: Array<{
id: string;
value: 'hide' | 'inside' | 'outside';
label: string;
'data-test-subj': string;
}> = [
{
id: `value_labels_hide`,
value: 'hide',
label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.auto', {
defaultMessage: 'Hide',
}),
'data-test-subj': 'lnsXY_valueLabels_hide',
},
{
id: `value_labels_inside`,
value: 'inside',
label: i18n.translate('xpack.lens.xyChart.valueLabelsVisibility.inside', {
defaultMessage: 'Show',
}),
'data-test-subj': 'lnsXY_valueLabels_inside',
},
];

Expand Down Expand Up @@ -513,6 +516,7 @@ export function DimensionEditor(
legend={i18n.translate('xpack.lens.xyChart.axisSide.label', {
defaultMessage: 'Axis side',
})}
data-test-subj="lnsXY_axisSide_groups"
name="axisSide"
buttonSize="compressed"
options={[
Expand All @@ -521,6 +525,7 @@ export function DimensionEditor(
label: i18n.translate('xpack.lens.xyChart.axisSide.auto', {
defaultMessage: 'Auto',
}),
'data-test-subj': 'lnsXY_axisSide_groups_auto',
},
{
id: `${idPrefix}left`,
Expand All @@ -531,6 +536,7 @@ export function DimensionEditor(
: i18n.translate('xpack.lens.xyChart.axisSide.left', {
defaultMessage: 'Left',
}),
'data-test-subj': 'lnsXY_axisSide_groups_left',
},
{
id: `${idPrefix}right`,
Expand All @@ -541,6 +547,7 @@ export function DimensionEditor(
: i18n.translate('xpack.lens.xyChart.axisSide.right', {
defaultMessage: 'Right',
}),
'data-test-subj': 'lnsXY_axisSide_groups_right',
},
]}
idSelected={`${idPrefix}${axisMode}`}
Expand Down
107 changes: 107 additions & 0 deletions x-pack/test/functional/apps/lens/chart_data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { DebugState } from '@elastic/charts';
import expect from '@kbn/expect';
import { range } from 'lodash';
import { FtrProviderContext } from '../../ftr_provider_context';

export default function ({ getService, getPageObjects }: FtrProviderContext) {
const PageObjects = getPageObjects(['visualize', 'lens', 'common', 'header']);
const elasticChart = getService('elasticChart');

describe('lens chart data', () => {
before(async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');
await elasticChart.setNewChartUiDebugFlag(true);
await PageObjects.lens.goToTimeRange();

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
operation: 'terms',
field: 'ip',
});

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'avg',
field: 'bytes',
});

await PageObjects.header.waitUntilLoadingHasFinished();
});

const expectedData = [
{ x: '0.53.251.53', y: 4624.75 },
{ x: '0.108.3.2', y: 7359.41 },
{ x: '0.209.80.244', y: 6169.9 },
{ x: '0.228.1.71', y: 7092.8 },
{ x: '0.254.91.215', y: 3835.58 },
{ x: '__other__', y: 5727.24 },
];

function assertMatchesExpectedData(state: DebugState) {
expect(
state.bars![0].bars.map((bar) => ({
x: bar.x,
y: Math.round(bar.y * 100) / 100,
}))
).to.eql(expectedData);
}

it('should render xy chart', async () => {
const data = await PageObjects.lens.getCurrentChartDebugState();
assertMatchesExpectedData(data!);
});

// Partition chart tests have to be skipped until
// https://github.com/elastic/elastic-charts/issues/917 gets fixed
it.skip('should render pie chart', async () => {
await PageObjects.lens.switchToVisualization('pie');
await PageObjects.header.waitUntilLoadingHasFinished();
const data = await PageObjects.lens.getCurrentChartDebugState();
assertMatchesExpectedData(data!);
});

it.skip('should render donut chart', async () => {
await PageObjects.lens.switchToVisualization('donut');
await PageObjects.header.waitUntilLoadingHasFinished();
const data = await PageObjects.lens.getCurrentChartDebugState();
assertMatchesExpectedData(data!);
});

it.skip('should render treemap chart', async () => {
await PageObjects.lens.switchToVisualization('treemap');
await PageObjects.header.waitUntilLoadingHasFinished();
const data = await PageObjects.lens.getCurrentChartDebugState();
assertMatchesExpectedData(data!);
});

it('should render datatable', async () => {
await PageObjects.lens.switchToVisualization('lnsDatatable');
await PageObjects.header.waitUntilLoadingHasFinished();
const terms = await Promise.all(
range(0, 6).map((index) => PageObjects.lens.getDatatableCellText(index, 0))
);
const values = await Promise.all(
range(0, 6).map((index) => PageObjects.lens.getDatatableCellText(index, 1))
);
expect(terms.map((term) => (term === 'Other' ? '__other__' : term))).to.eql(
expectedData.map(({ x }) => x)
);
expect(values.map((value) => Math.round(100 * Number(value.replace(',', ''))) / 100)).to.eql(
expectedData.map(({ y }) => y)
);
});

it('should render metric', async () => {
await PageObjects.lens.switchToVisualization('lnsMetric');
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.lens.assertMetric('Average of bytes', '5,727.322');
});
});
}
1 change: 1 addition & 0 deletions x-pack/test/functional/apps/lens/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
loadTestFile(require.resolve('./dashboard'));
loadTestFile(require.resolve('./persistent_context'));
loadTestFile(require.resolve('./colors'));
loadTestFile(require.resolve('./chart_data'));
loadTestFile(require.resolve('./drag_and_drop'));
loadTestFile(require.resolve('./lens_reporting'));

Expand Down
77 changes: 77 additions & 0 deletions x-pack/test/functional/apps/lens/smokescreen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const find = getService('find');
const listingTable = getService('listingTable');
const testSubjects = getService('testSubjects');
const elasticChart = getService('elasticChart');

describe('lens smokescreen tests', () => {
it('should allow creation of lens xy chart', async () => {
Expand Down Expand Up @@ -191,6 +192,82 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await testSubjects.missingOrFail('lnsXY_yDimensionPanel > lns-dimensionTrigger');
});

it('should allow creation of a multi-axis chart', async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');
await elasticChart.setNewChartUiDebugFlag(true);
await PageObjects.lens.goToTimeRange();
await PageObjects.lens.switchToVisualization('bar');

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
operation: 'terms',
field: 'geo.dest',
});

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'avg',
field: 'bytes',
});

await PageObjects.lens.configureDimension({
dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
operation: 'cardinality',
field: 'bytes',
keepOpen: true,
});

await PageObjects.lens.changeAxisSide('right');

await PageObjects.lens.closeDimensionEditor();

await PageObjects.header.waitUntilLoadingHasFinished();

const data = await PageObjects.lens.getCurrentChartDebugState();
expect(data?.axes?.y.length).to.eql(2);
expect(data?.axes?.y.some(({ position }) => position === 'right')).to.eql(true);
});

it('should show value labels on bar charts when enabled', async () => {
// enable value labels
await PageObjects.lens.toggleToolbarPopover('lnsValuesButton');
await testSubjects.click('lnsXY_valueLabels_inside');

await PageObjects.header.waitUntilLoadingHasFinished();

// check for value labels
let data = await PageObjects.lens.getCurrentChartDebugState();
expect(data?.bars?.[0].labels).not.to.eql(0);

// switch to stacked bar chart
await PageObjects.lens.switchToVisualization('bar_stacked');
await PageObjects.header.waitUntilLoadingHasFinished();

// check for value labels
data = await PageObjects.lens.getCurrentChartDebugState();
expect(data?.bars?.[0].labels.length).to.eql(0);
});

it('should override axis title', async () => {
const axisTitle = 'overridden axis';
await PageObjects.lens.toggleToolbarPopover('lnsLeftAxisButton');
await testSubjects.setValue('lnsyLeftAxisTitle', axisTitle, {
clearWithKeyboard: true,
});
await PageObjects.header.waitUntilLoadingHasFinished();

let data = await PageObjects.lens.getCurrentChartDebugState();
expect(data?.axes?.y?.[0].title).to.eql(axisTitle);

// hide the gridlines
await testSubjects.click('lnsshowyLeftAxisGridlines');
await PageObjects.header.waitUntilLoadingHasFinished();

data = await PageObjects.lens.getCurrentChartDebugState();
expect(data?.axes?.y?.[0].gridlines.length).to.eql(0);
});

it('should transition from a multi-layer stacked bar to donut chart using suggestions', async () => {
await PageObjects.visualize.navigateToNewVisualization();
await PageObjects.visualize.clickVisType('lens');
Expand Down
Loading

0 comments on commit e4b02ba

Please sign in to comment.