Skip to content

Commit

Permalink
[Lens]Test color syncing (#86906)
Browse files Browse the repository at this point in the history
flash1293 authored Jan 7, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 81f7108 commit 3c7bd2f
Showing 4 changed files with 155 additions and 5 deletions.
19 changes: 19 additions & 0 deletions test/functional/page_objects/dashboard_page.ts
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
const dashboardAddPanel = getService('dashboardAddPanel');
const renderable = getService('renderable');
const listingTable = getService('listingTable');
const elasticChart = getService('elasticChart');
const PageObjects = getPageObjects(['common', 'header', 'visualize']);

interface SaveDashboardOptions {
@@ -275,6 +276,20 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
}
}

public async isColorSyncOn() {
log.debug('isColorSyncOn');
await this.openOptions();
return await testSubjects.getAttribute('dashboardSyncColorsCheckbox', 'checked');
}

public async useColorSync(on = true) {
await this.openOptions();
const isColorSyncOn = await this.isColorSyncOn();
if (isColorSyncOn !== 'on') {
return await testSubjects.click('dashboardSyncColorsCheckbox');
}
}

public async gotoDashboardEditMode(dashboardName: string) {
await this.loadSavedDashboard(dashboardName);
await this.switchToEditMode();
@@ -554,6 +569,10 @@ export function DashboardPageProvider({ getService, getPageObjects }: FtrProvide
return 0;
}
}

public async getPanelChartDebugState(panelIndex: number) {
return await elasticChart.getChartDebugData(undefined, panelIndex);
}
}

return new DashboardPage();
17 changes: 12 additions & 5 deletions test/functional/services/visualizations/elastic_chart.ts
Original file line number Diff line number Diff line change
@@ -81,19 +81,23 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
}
}

private async getChart(dataTestSubj?: string, timeout?: number): Promise<WebElementWrapper> {
private async getChart(
dataTestSubj?: string,
timeout?: number,
match: number = 0
): Promise<WebElementWrapper> {
if (dataTestSubj) {
if (!(await testSubjects.exists(dataTestSubj, { timeout }))) {
throw Error(`Failed to find an elastic-chart with testSubject '${dataTestSubj}'`);
}

return await testSubjects.find(dataTestSubj);
return (await testSubjects.findAll(dataTestSubj))[match];
} else {
const charts = await this.getAllCharts(timeout);
if (charts.length === 0) {
throw Error(`Failed to find any elastic-charts on the page`);
} else {
return charts[0];
return charts[match];
}
}
}
@@ -106,8 +110,11 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
* used to get chart data from `@elastic/charts`
* requires `window._echDebugStateFlag` to be true
*/
public async getChartDebugData(dataTestSubj?: string): Promise<DebugState | null> {
const chart = await this.getChart(dataTestSubj);
public async getChartDebugData(
dataTestSubj?: string,
match: number = 0
): Promise<DebugState | null> {
const chart = await this.getChart(dataTestSubj, undefined, match);

try {
const visContainer = await chart.findByCssSelector('.echChartStatus');
1 change: 1 addition & 0 deletions x-pack/test/functional/apps/dashboard/index.ts
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ export default function ({ loadTestFile }: FtrProviderContext) {
loadTestFile(require.resolve('./preserve_url'));
loadTestFile(require.resolve('./reporting'));
loadTestFile(require.resolve('./drilldowns'));
loadTestFile(require.resolve('./sync_colors'));
loadTestFile(require.resolve('./_async_dashboard'));
});
}
123 changes: 123 additions & 0 deletions x-pack/test/functional/apps/dashboard/sync_colors.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/*
* 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 { FtrProviderContext } from '../../ftr_provider_context';

export default function ({ getService, getPageObjects }: FtrProviderContext) {
const esArchiver = getService('esArchiver');
const PageObjects = getPageObjects([
'common',
'dashboard',
'spaceSelector',
'header',
'lens',
'timePicker',
]);
const dashboardAddPanel = getService('dashboardAddPanel');
const filterBar = getService('filterBar');
const elasticChart = getService('elasticChart');

function getColorMapping(debugState: DebugState | null) {
if (!debugState) return {};
const colorMapping: Record<string, string> = {};
debugState.bars?.forEach(({ name, color }) => {
colorMapping[name] = color;
});

return colorMapping;
}

describe('sync colors', function () {
before(async function () {
await esArchiver.loadIfNeeded('logstash_functional');
await esArchiver.loadIfNeeded('lens/basic');
});

after(async function () {
await esArchiver.unload('logstash_functional');
await esArchiver.unload('lens/basic');
});

it('should sync colors on dashboard by default', async function () {
await PageObjects.common.navigateToApp('dashboard');
await elasticChart.setNewChartUiDebugFlag(true);
await PageObjects.dashboard.clickCreateDashboardPrompt();
await dashboardAddPanel.clickCreateNewLink();
await dashboardAddPanel.clickVisType('lens');
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.lens.goToTimeRange();

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

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

await PageObjects.lens.save('vis1', true, true);
await PageObjects.header.waitUntilLoadingHasFinished();
await dashboardAddPanel.clickCreateNewLink();
await dashboardAddPanel.clickVisType('lens');
await PageObjects.header.waitUntilLoadingHasFinished();

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

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

await filterBar.addFilter('geo.src', 'is not', 'CN');

await PageObjects.lens.save('vis2', true, true);
await PageObjects.header.waitUntilLoadingHasFinished();
const colorMapping1 = getColorMapping(await PageObjects.dashboard.getPanelChartDebugState(0));
const colorMapping2 = getColorMapping(await PageObjects.dashboard.getPanelChartDebugState(1));
expect(Object.keys(colorMapping1)).to.have.length(6);
expect(Object.keys(colorMapping1)).to.have.length(6);
const panel1Keys = ['CN'];
const panel2Keys = ['PK'];
const sharedKeys = ['IN', 'US', 'ID', 'BR', 'Other'];
// colors for keys exclusive to panel 1 should not occur in panel 2
panel1Keys.forEach((panel1Key) => {
const assignedColor = colorMapping1[panel1Key];
expect(Object.values(colorMapping2)).not.to.contain(assignedColor);
});
// colors for keys exclusive to panel 2 should not occur in panel 1
panel2Keys.forEach((panel2Key) => {
const assignedColor = colorMapping2[panel2Key];
expect(Object.values(colorMapping1)).not.to.contain(assignedColor);
});
// colors for keys used in both panels should be synced
sharedKeys.forEach((sharedKey) => {
expect(colorMapping1[sharedKey]).to.eql(colorMapping2[sharedKey]);
});
});

it('should be possible to disable color sync', async () => {
await PageObjects.dashboard.useColorSync(false);
await PageObjects.header.waitUntilLoadingHasFinished();
const colorMapping1 = getColorMapping(await PageObjects.dashboard.getPanelChartDebugState(0));
const colorMapping2 = getColorMapping(await PageObjects.dashboard.getPanelChartDebugState(1));
const colorsByOrder1 = Object.values(colorMapping1);
const colorsByOrder2 = Object.values(colorMapping2);
// colors by order of occurence have to be the same
expect(colorsByOrder1).to.eql(colorsByOrder2);
});
});
}

0 comments on commit 3c7bd2f

Please sign in to comment.