From b46aa28a9648f411b9b31f8effdacf12345a37de Mon Sep 17 00:00:00 2001 From: dej611 Date: Mon, 18 Jan 2021 19:12:30 +0100 Subject: [PATCH 1/6] :white_check_mark: Add a11y test suite for Lens + some fixes --- .../lens/public/drag_drop/providers.tsx | 6 +- x-pack/test/accessibility/apps/lens.ts | 98 +++++++++++++++++++ x-pack/test/accessibility/config.ts | 1 + 3 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 x-pack/test/accessibility/apps/lens.ts diff --git a/x-pack/plugins/lens/public/drag_drop/providers.tsx b/x-pack/plugins/lens/public/drag_drop/providers.tsx index 46247fd981134..e4de72aef97e3 100644 --- a/x-pack/plugins/lens/public/drag_drop/providers.tsx +++ b/x-pack/plugins/lens/public/drag_drop/providers.tsx @@ -171,7 +171,11 @@ export function ReorderProvider({
-

+

{state.keyboardReorderMessage}

diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts new file mode 100644 index 0000000000000..9b6eeeff6dc4d --- /dev/null +++ b/x-pack/test/accessibility/apps/lens.ts @@ -0,0 +1,98 @@ +/* + * 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 { FtrProviderContext } from '../ftr_provider_context'; + +export default function ({ getService, getPageObjects }: FtrProviderContext) { + const PageObjects = getPageObjects(['common', 'visualize', 'header', 'home', 'settings', 'lens']); + const a11y = getService('a11y'); + const testSubjects = getService('testSubjects'); + const listingTable = getService('listingTable'); + + describe('Lens', () => { + const lensChartName = 'MyLensChart'; + before(async () => { + await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', { + useActualUrl: true, + }); + await PageObjects.home.addSampleDataSet('flights'); + }); + + after(async () => { + await PageObjects.common.navigateToApp('visualize'); + await listingTable.searchForItemWithName(lensChartName); + await listingTable.checkListingSelectAllCheckbox(); + await listingTable.clickDeleteSelected(); + await PageObjects.common.clickConfirmOnModal(); + }); + + it('lens', async () => { + await PageObjects.visualize.navigateToNewVisualization(); + await PageObjects.visualize.clickVisType('lens'); + await a11y.testAppSnapshot(); + }); + + it('lens chart', async () => { + await PageObjects.visualize.navigateToNewVisualization(); + await PageObjects.visualize.clickVisType('lens'); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'date_histogram', + field: 'timestamp', + }); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension', + operation: 'avg', + field: 'AvgTicketPrice', + }); + + await a11y.testAppSnapshot(); + }); + + it('dimension configuration panel', async () => { + await PageObjects.visualize.navigateToNewVisualization(); + await PageObjects.visualize.clickVisType('lens'); + + await PageObjects.lens.openDimensionEditor('lnsXY_xDimensionPanel > lns-empty-dimension'); + await a11y.testAppSnapshot(); + + await PageObjects.lens.closeDimensionEditor(); + await PageObjects.lens.openDimensionEditor('lnsXY_yDimensionPanel > lns-empty-dimension'); + await a11y.testAppSnapshot(); + + await PageObjects.lens.closeDimensionEditor(); + }); + + it('change chart type', async () => { + await PageObjects.lens.switchToVisualization('line'); + await a11y.testAppSnapshot(); + }); + + it('change chart type via suggestions', async () => { + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'date_histogram', + field: 'timestamp', + }); + + await PageObjects.lens.configureDimension({ + dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension', + operation: 'avg', + field: 'AvgTicketPrice', + }); + + await testSubjects.click('lnsSuggestion-barChart > lnsSuggestion'); + await a11y.testAppSnapshot(); + }); + + it('saves lens chart', async () => { + await PageObjects.lens.save(lensChartName); + await a11y.testAppSnapshot(); + }); + }); +} diff --git a/x-pack/test/accessibility/config.ts b/x-pack/test/accessibility/config.ts index 070e2c3a61f2b..cf13a009c2821 100644 --- a/x-pack/test/accessibility/config.ts +++ b/x-pack/test/accessibility/config.ts @@ -28,6 +28,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) { require.resolve('./apps/kibana_overview'), require.resolve('./apps/ingest_node_pipelines'), require.resolve('./apps/ml'), + require.resolve('./apps/lens'), ], pageObjects, From 8c3dd130d29a7ac3c07d0ea971c9b300c7617f13 Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 19 Jan 2021 12:39:54 +0100 Subject: [PATCH 2/6] :wrench: Removed unused ids --- x-pack/plugins/lens/public/drag_drop/providers.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/lens/public/drag_drop/providers.tsx b/x-pack/plugins/lens/public/drag_drop/providers.tsx index e4de72aef97e3..b72ddea76869b 100644 --- a/x-pack/plugins/lens/public/drag_drop/providers.tsx +++ b/x-pack/plugins/lens/public/drag_drop/providers.tsx @@ -171,14 +171,10 @@ export function ReorderProvider({

-

+

{state.keyboardReorderMessage}

-

+

{i18n.translate('xpack.lens.dragDrop.reorderInstructions', { defaultMessage: `Press space bar to start a drag. When dragging, use arrow keys to reorder. Press space bar again to finish.`, })} From d0e2b4b06b2bd8173152b43fdcb1e38599319aed Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 19 Jan 2021 12:40:23 +0100 Subject: [PATCH 3/6] :bug: Fix component duplication via key prop --- .../editor_frame/config_panel/layer_panel.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index 43c44dc3c07f5..ff62fbf9e23ee 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -207,7 +207,7 @@ export function LayerPanel( fullWidth label={

{group.groupLabel}
} labelType="legend" - key={groupIndex} + key={group.groupId} isInvalid={isMissing} error={ isMissing ? ( @@ -222,7 +222,11 @@ export function LayerPanel( } > <> - + {group.accessors.map((accessorConfig) => { const accessor = accessorConfig.columnId; const { dragging } = dragDropContext; From 2fc57b0617e2f0b53fc389f1e248184e427d6577 Mon Sep 17 00:00:00 2001 From: dej611 Date: Tue, 19 Jan 2021 12:40:44 +0100 Subject: [PATCH 4/6] :white_mark_check: Add more a11y tests --- x-pack/test/accessibility/apps/lens.ts | 42 +++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts index 9b6eeeff6dc4d..bfd79f070d284 100644 --- a/x-pack/test/accessibility/apps/lens.ts +++ b/x-pack/test/accessibility/apps/lens.ts @@ -35,7 +35,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await a11y.testAppSnapshot(); }); - it('lens chart', async () => { + it('lens XY chart', async () => { await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVisType('lens'); @@ -54,6 +54,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await a11y.testAppSnapshot(); }); + it('lens pie chart', async () => { + await PageObjects.lens.switchToVisualization('pie'); + await a11y.testAppSnapshot(); + }); + + it('lens datatable', async () => { + await PageObjects.lens.switchToVisualization('lnsDatatable'); + await a11y.testAppSnapshot(); + }); + + it('lens metric chart', async () => { + await PageObjects.lens.switchToVisualization('lnsMetric'); + await a11y.testAppSnapshot(); + }); + it('dimension configuration panel', async () => { await PageObjects.visualize.navigateToNewVisualization(); await PageObjects.visualize.clickVisType('lens'); @@ -90,6 +105,31 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await a11y.testAppSnapshot(); }); + // Skip until https://github.com/elastic/kibana/issues/88661 gets closed + it.skip('lens XY chart with multiple layers', async () => { + await PageObjects.lens.createLayer(); + + await PageObjects.lens.switchToVisualization('area'); + await PageObjects.lens.configureDimension( + { + dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension', + operation: 'terms', + field: 'DestCityName', + }, + 1 + ); + + await PageObjects.lens.configureDimension( + { + dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension', + operation: 'median', + field: 'FlightTimeMin', + }, + 1 + ); + await a11y.testAppSnapshot(); + }); + it('saves lens chart', async () => { await PageObjects.lens.save(lensChartName); await a11y.testAppSnapshot(); From 8fda415165b806a078359008639a63f41248046f Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 20 Jan 2021 11:30:55 +0100 Subject: [PATCH 5/6] :recycle: Restored back reorder id + fix multi layer duplicate ids --- x-pack/plugins/lens/public/drag_drop/providers.tsx | 2 +- .../editor_frame/config_panel/layer_panel.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/lens/public/drag_drop/providers.tsx b/x-pack/plugins/lens/public/drag_drop/providers.tsx index b72ddea76869b..5e0fc648454ad 100644 --- a/x-pack/plugins/lens/public/drag_drop/providers.tsx +++ b/x-pack/plugins/lens/public/drag_drop/providers.tsx @@ -174,7 +174,7 @@ export function ReorderProvider({

{state.keyboardReorderMessage}

-

+

{i18n.translate('xpack.lens.dragDrop.reorderInstructions', { defaultMessage: `Press space bar to start a drag. When dragging, use arrow keys to reorder. Press space bar again to finish.`, })} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index ff62fbf9e23ee..c7d2c9db5321e 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -193,7 +193,7 @@ export function LayerPanel( - {groups.map((group, groupIndex) => { + {groups.map((group) => { const newId = generateId(); const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0; @@ -223,8 +223,7 @@ export function LayerPanel( > <> {group.accessors.map((accessorConfig) => { From 48ce5ee61809a975567cf922f7633c76be062573 Mon Sep 17 00:00:00 2001 From: dej611 Date: Wed, 20 Jan 2021 11:31:45 +0100 Subject: [PATCH 6/6] :bug: Fix #88806 --- .../lens/public/editor_frame_service/service.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/public/editor_frame_service/service.tsx b/x-pack/plugins/lens/public/editor_frame_service/service.tsx index d4e9522f3bed1..249d678f56af9 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/service.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/service.tsx @@ -125,6 +125,12 @@ export class EditorFrameService { collectAsyncDefinitions(this.visualizations), ]); + const unmount = () => { + if (domElement) { + unmountComponentAtNode(domElement); + } + }; + return { mount: async ( element, @@ -141,6 +147,9 @@ export class EditorFrameService { searchSessionId, } ) => { + if (domElement !== element) { + unmount(); + } domElement = element; const firstDatasourceId = Object.keys(resolvedDatasources)[0]; const firstVisualizationId = Object.keys(resolvedVisualizations)[0]; @@ -179,11 +188,7 @@ export class EditorFrameService { domElement ); }, - unmount() { - if (domElement) { - unmountComponentAtNode(domElement); - } - }, + unmount, }; };