You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2023/03/20 11:00:08 UTC
[superset] branch chore/e2e-cross-filters updated: E2E cross filters bar
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/e2e-cross-filters
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/chore/e2e-cross-filters by this push:
new 8d2d1c9254 E2E cross filters bar
8d2d1c9254 is described below
commit 8d2d1c9254698a6baa8aee8a0498c8ee38ed99f9
Author: geido <di...@gmail.com>
AuthorDate: Mon Mar 20 11:59:53 2023 +0100
E2E cross filters bar
---
.../integration/dashboard/crossfilters.test.ts | 696 ++-------------------
.../FilterBar/CrossFilters/CrossFilter.test.tsx | 4 +-
.../FilterBar/CrossFilters/CrossFilterTag.tsx | 10 +-
.../CrossFilters/CrossFilterTitle.test.tsx | 2 +-
.../FilterBar/CrossFilters/CrossFilterTitle.tsx | 4 +-
.../CrossFilters/VerticalCollapse.test.tsx | 6 +-
.../FilterBar/CrossFilters/VerticalCollapse.tsx | 2 +-
7 files changed, 84 insertions(+), 640 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/crossfilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/crossfilters.test.ts
index bddda7f33f..91b77eb06a 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/crossfilters.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/crossfilters.test.ts
@@ -18,57 +18,39 @@
*/
import { ChartSpec, waitForChartLoad } from 'cypress/utils';
import { SUPPORTED_CHARTS_DASHBOARD } from 'cypress/utils/urls';
-import { SUPPORTED_TIER1_CHARTS, SUPPORTED_TIER2_CHARTS } from './utils';
+import { SUPPORTED_TIER1_CHARTS } from './utils';
function setTopLevelTab(tabName: string) {
cy.get("div#TABS-TOP div[role='tab']").contains(tabName).click();
}
-function clickCrossFilterMenu(open = true) {
- const targetMenuItem = open ? 'Add cross-filter' : 'Remove cross-filter';
- cy.getBySel('cross-filter-menu-item')
- .should('not.have.class', 'ant-dropdown-menu-item-disabled')
- .contains(new RegExp(`^${targetMenuItem}$`))
- .click();
-}
-
-function verifyEmitterIcon(emitterName: string) {
- cy.get(`[data-test-viz-type='${emitterName}']`)
- .within(() => {
- cy.getBySel('cross-filters-emitted').should('exist').trigger('mouseover');
- })
- .then(() => {
- cy.get('.ant-tooltip-inner').contains(
- 'This chart emits/applies cross-filters to other charts that use the same dataset',
- );
- });
+function clickCrossFilterMenu() {
+ cy.wait(500);
+ cy.getBySel('cross-filter-menu-item').should('exist').click({ force: true });
}
function toggleCrossFilters({
config,
- open = true,
rightclick = true,
tier = SUPPORTED_TIER1_CHARTS,
}: {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
config: Record<string, any>;
- open?: boolean;
rightclick?: boolean;
tier?: ChartSpec[];
}) {
if (config?.type === 'default' || !config?.type) {
if (rightclick) {
cy.get(`[data-test-viz-type='${config.emitterName}']`)
- .scrollIntoView()
.contains(config.emitterValue)
.rightclick();
- clickCrossFilterMenu(open);
+ clickCrossFilterMenu();
+ tier.forEach(waitForChartLoad);
}
if (!rightclick) {
cy.get(`[data-test-viz-type='${config.emitterName}']`)
- .scrollIntoView()
.contains(config.emitterValue)
.click();
+ tier.forEach(waitForChartLoad);
}
}
@@ -81,7 +63,8 @@ function toggleCrossFilters({
.scrollIntoView()
.trigger('mousemove', coordinates[0], coordinates[1])
.rightclick(coordinates[0], coordinates[1]);
- clickCrossFilterMenu(open);
+ clickCrossFilterMenu();
+ tier.forEach(waitForChartLoad);
},
);
}
@@ -92,25 +75,18 @@ function toggleCrossFilters({
.scrollIntoView()
.trigger('mousemove', coordinates[0], coordinates[1])
.click(coordinates[0], coordinates[1]);
+ tier.forEach(waitForChartLoad);
},
);
}
}
-
- // wait for charts to update
- tier.forEach(waitForChartLoad);
-
- if (open) {
- verifyEmitterIcon(config.emitterName);
- }
}
function verifyDisabledCrossFilters(targetViz: string) {
cy.get(`[data-test-viz-type='${targetViz}']`).scrollIntoView().rightclick();
- cy.getBySel('cross-filter-menu-item').should(
- 'have.class',
- 'ant-dropdown-menu-item-disabled',
- );
+ cy.getBySel('cross-filter-menu-item')
+ .should('exist')
+ .should('have.class', 'ant-dropdown-menu-item-disabled');
}
function verifyAppliedCrossFilters(affectedChart: Record<string, string>) {
@@ -125,7 +101,7 @@ function verifyAppliedCrossFilters(affectedChart: Record<string, string>) {
.contains('Applied cross-filters (1)');
cy.getBySel('cross-filter-lens').should('exist');
cy.getBySel('cross-filter-name').contains(
- affectedChart?.emitterNameInTooltip || affectedChart.emitterName,
+ affectedChart?.emitterTitle || affectedChart.emitterName,
{
matchCase: false,
},
@@ -134,26 +110,38 @@ function verifyAppliedCrossFilters(affectedChart: Record<string, string>) {
});
}
-function verifyNotAppliedCrossFilters(
- emitterName: string,
- affectedChart?: string,
-) {
- cy.get(`[data-test-viz-type='${emitterName}']`).within(() => {
- cy.getBySel('cross-filters-emitted').should('not.exist');
- });
- if (affectedChart) {
- cy.get(`[data-test-viz-type='${affectedChart}']`).within(() => {
- cy.getBySel('applied-filter-count').should('not.exist');
- });
- }
+function verifyNotAppliedCrossFilters() {
+ cy.getBySel('applied-filter-count').should('not.exist');
+}
+
+function verifyAppliedCrossFilterBar(config: Record<string, string>) {
+ const { emitterName, emitterTitle, emitterLabel, emitterValue } = config;
+ cy.getBySel('dashboard-filters-panel').should('exist');
+ cy.getBySel('filter-bar__expand-button').click();
+ cy.getBySel('cross-filter-bar-collapse-title')
+ .should('exist')
+ .contains('Cross-filters');
+ cy.getBySel('cross-filter-bar-title')
+ .find('span')
+ .first()
+ .should('exist')
+ .contains(emitterTitle || emitterName, { matchCase: false });
+ cy.getBySel('cross-filter-bar-highlight').should('exist');
+ cy.getBySel('cross-filter-bar-label').should('exist').contains(emitterLabel);
+ cy.getBySel('cross-filter-bar-value').should('exist').contains(emitterValue);
+ cy.getBySel('filter-bar__collapse-button').click();
+ cy.getBySel('dashboard-filters-panel').should('exist');
+ cy.wait(1000);
+}
+
+function verifyNotAppliedCrossFilterBar() {
+ cy.getBySel('cross-filter-bar-title').should('not.exist');
}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
function addCrossFilter(props: Record<string, any>) {
const { config } = props;
toggleCrossFilters({
config,
- open: true,
rightclick: props?.rightclick,
tier: props?.tier,
});
@@ -163,18 +151,18 @@ function addCrossFilter(props: Record<string, any>) {
...config,
});
}
+ verifyAppliedCrossFilterBar(config);
}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
function removeCrossFilter(props: Record<string, any>) {
- const { config, affectedViz } = props;
+ const { config } = props;
toggleCrossFilters({
config,
- open: false,
rightclick: props?.rightclick,
tier: props?.tier,
});
- verifyNotAppliedCrossFilters(config.emitterName, affectedViz);
+ verifyNotAppliedCrossFilters();
+ verifyNotAppliedCrossFilterBar();
}
describe('Cross-filters Tier 1', () => {
@@ -200,6 +188,7 @@ describe('Cross-filters Tier 1', () => {
const emitterValues = {
emitterName: 'table',
emitterValue: 'boy',
+ emitterLabel: 'gender',
};
const testAffectedChart = 'big_number_total';
it('adds and removes cross-filter with click and rightclick', () => {
@@ -217,7 +206,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -231,8 +219,9 @@ describe('Cross-filters Tier 1', () => {
describe('Pivot Table', () => {
const emitterValues = {
emitterName: 'pivot_table_v2',
- emitterNameInTooltip: 'Pivot Table',
+ emitterTitle: 'Pivot Table',
emitterValue: 'CA',
+ emitterLabel: 'state',
};
const testAffectedChart = 'big_number_total';
it('adds and removes cross-filter with click and rightclick', () => {
@@ -250,7 +239,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -264,8 +252,9 @@ describe('Cross-filters Tier 1', () => {
describe('Time-Series Line Chart', () => {
const emitterValues = {
emitterName: 'echarts_timeseries_line',
- emitterNameInTooltip: 'Time-Series Line Chart',
+ emitterTitle: 'Time-Series Line Chart',
emitterValue: 'boy',
+ emitterLabel: 'gender',
type: 'canvas',
coordinates: [70, 93],
};
@@ -285,7 +274,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -299,8 +287,9 @@ describe('Cross-filters Tier 1', () => {
describe('Time-Series Bar Chart V2', () => {
const emitterValues = {
emitterName: 'echarts_timeseries_bar',
- emitterNameInTooltip: 'Time-Series Bar Chart',
+ emitterTitle: 'Time-Series Bar Chart',
emitterValue: 'boy',
+ emitterLabel: 'gender',
type: 'canvas',
coordinates: [70, 93],
};
@@ -320,7 +309,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -334,8 +322,9 @@ describe('Cross-filters Tier 1', () => {
describe('Time-Series Area Chart', () => {
const emitterValues = {
emitterName: 'echarts_area',
- emitterNameInTooltip: 'Time-Series Area Chart',
+ emitterTitle: 'Time-Series Area Chart',
emitterValue: 'boy',
+ emitterLabel: 'gender',
type: 'canvas',
coordinates: [70, 93],
};
@@ -355,7 +344,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -369,8 +357,9 @@ describe('Cross-filters Tier 1', () => {
describe('Time-Series Scatter Chart', () => {
const emitterValues = {
emitterName: 'echarts_timeseries_scatter',
- emitterNameInTooltip: 'Time-Series Scatter Chart',
+ emitterTitle: 'Time-Series Scatter Chart',
emitterValue: 'boy',
+ emitterLabel: 'gender',
type: 'canvas',
coordinates: [70, 93],
};
@@ -390,7 +379,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -404,12 +392,13 @@ describe('Cross-filters Tier 1', () => {
describe('Pie', () => {
const emitterValues = {
emitterName: 'pie',
- emitterNameInTooltip: 'Pie Chart',
+ emitterTitle: 'Pie Chart',
emitterValue: 'boy',
+ emitterLabel: 'gender',
type: 'canvas',
coordinates: [230, 190],
};
- const testAffectedChart = 'dist_bar';
+ const testAffectedChart = 'pivot_table_v2';
it('adds and removes cross-filter with click and rightclick', () => {
// rightclick
addCrossFilter({
@@ -425,7 +414,6 @@ describe('Cross-filters Tier 1', () => {
addCrossFilter({
config: emitterValues,
affectedViz: testAffectedChart,
- open: true,
rightclick: false,
});
removeCrossFilter({
@@ -445,580 +433,34 @@ describe('Cross-filters Tier 1', () => {
describe('World Map', () => {
const emitterValues = {
emitterName: 'world_map',
- coordinates: [230, 190],
+ emitterTitle: '% Rural',
+ emitterValue: 'DZA',
+ emitterLabel: 'country_code',
};
it('adds and removes cross-filter with click and rightclick', () => {
// rightclick
cy.get(`[data-test-viz-type='${emitterValues.emitterName}']`)
.scrollIntoView()
.rightclick();
- clickCrossFilterMenu(true);
- verifyEmitterIcon(emitterValues.emitterName);
+ clickCrossFilterMenu();
+ verifyAppliedCrossFilterBar(emitterValues);
+
cy.get(`[data-test-viz-type='${emitterValues.emitterName}']`)
.scrollIntoView()
.rightclick();
- clickCrossFilterMenu(false);
- verifyNotAppliedCrossFilters(emitterValues.emitterName);
+ clickCrossFilterMenu();
+ verifyNotAppliedCrossFilterBar();
// click
cy.get(`[data-test-viz-type='${emitterValues.emitterName}']`)
.scrollIntoView()
.click();
- verifyEmitterIcon(emitterValues.emitterName);
+ verifyAppliedCrossFilterBar(emitterValues);
+
cy.get(`[data-test-viz-type='${emitterValues.emitterName}']`)
.scrollIntoView()
.click();
- verifyNotAppliedCrossFilters(emitterValues.emitterName);
- });
- });
-});
-/*
- { name: 'Box Plot Chart', viz: 'box_plot' },
- { name: 'Bubble Chart', viz: 'bubble' },
- { name: 'Calendar Heatmap Chart', viz: 'cal_heatmap' },
- { name: 'Chord Chart', viz: 'chord' },
- { name: 'Time-Series Percent Change Chart', viz: 'compare' },
- { name: 'Time-Series Generic Chart', viz: 'echarts_timeseries' },
- { name: 'Time-Series Smooth Line Chart', viz: 'echarts_timeseries_smooth' },
- { name: 'Time-Series Step Line Chart', viz: 'echarts_timeseries_step' },
- { name: 'Funnel Chart', viz: 'funnel' },
- { name: 'Gauge Chart', viz: 'gauge_chart' },
- { name: 'Heatmap Chart', viz: 'heatmap' },
- { name: 'Line Chart', viz: 'line' },
- { name: 'Mixed Chart', viz: 'mixed_timeseries' },
- { name: 'Partition Chart', viz: 'partition' },
- { name: 'Radar Chart', viz: 'radar' },
- { name: 'Nightingale Chart', viz: 'rose' },
- { name: 'Sankey Chart', viz: 'sankey' },
- { name: 'Sunburst Chart', viz: 'sunburst' },
- { name: 'Treemap Chart', viz: 'treemap' },
- { name: 'Treemap V2 Chart', viz: 'treemap_v2' },
- { name: 'Word Cloud Chart', viz: 'word_cloud' },
-*/
-describe('Cross-filters Tier 2', () => {
- const tier = SUPPORTED_TIER2_CHARTS;
- beforeEach(() => {
- cy.visit(SUPPORTED_CHARTS_DASHBOARD);
- setTopLevelTab('Tier 2');
- tier.forEach(waitForChartLoad);
- });
- describe.only('Box Plot Chart', () => {
- const emitterValues = {
- emitterName: 'box_plot',
- emitterNameInTooltip: 'Box Plot Chart',
- emitterValue: 'boy',
- type: 'canvas',
- coordinates: [135, 275],
- };
- const testAffectedChart = 'bubble';
- it('adds and removes cross-filter with click and rightclick', () => {
- // rightclick
- addCrossFilter({
- config: emitterValues,
- affectedViz: testAffectedChart,
- tier,
- });
- removeCrossFilter({
- config: emitterValues,
- affectedViz: testAffectedChart,
- tier,
- });
-
- // click
- addCrossFilter({
- config: emitterValues,
- affectedViz: testAffectedChart,
- open: true,
- rightclick: false,
- tier,
- });
- removeCrossFilter({
- config: emitterValues,
- affectedViz: testAffectedChart,
- rightclick: false,
- tier,
- });
- });
- });
-});
-
-describe('Drill to detail modal', () => {
- beforeEach(() => {
- closeModal();
- });
-
- describe('Tier 1 charts', () => {
- before(() => {
- cy.visit(SUPPORTED_CHARTS_DASHBOARD);
- setTopLevelTab('Tier 1');
- SUPPORTED_TIER1_CHARTS.forEach(waitForChartLoad);
- });
-
- describe('Modal actions', () => {
- it('opens the modal from the context menu', () => {
- openModalFromMenu('big_number_total');
-
- cy.get("[role='dialog'] .draggable-trigger").should(
- 'contain',
- 'Drill to detail: Big Number',
- );
- });
-
- it('refreshes the data', () => {
- openModalFromMenu('big_number_total');
- // move to the last page
- cy.get('.ant-pagination-item').eq(5).click();
- // skips error on pagination
- cy.on('uncaught:exception', () => false);
- cy.wait('@samples');
- // reload
- cy.get("[aria-label='reload']").click();
- cy.wait('@samples');
- // make sure it started back from first page
- cy.get('.ant-pagination-item-active').should('contain', '1');
- });
-
- it('paginates', () => {
- openModalFromMenu('big_number_total');
- // checking the data
- cy.getBySel('row-count-label').should('contain', '75.7k rows');
- cy.get('.virtual-table-cell').should($rows => {
- expect($rows).to.contain('Amy');
- });
- // checking the paginated data
- cy.get('.ant-pagination-item')
- .should('have.length', 6)
- .should($pages => {
- expect($pages).to.contain('1');
- expect($pages).to.contain('1514');
- });
- cy.get('.ant-pagination-item').eq(4).click();
- // skips error on pagination
- cy.on('uncaught:exception', () => false);
- cy.wait('@samples');
- cy.get('.virtual-table-cell').should($rows => {
- expect($rows).to.contain('Kelly');
- });
-
- // verify scroll top on pagination
- cy.getBySelLike('Number-modal').find('.virtual-grid').scrollTo(0, 200);
-
- cy.get('.virtual-grid').contains('Juan').should('not.be.visible');
-
- cy.get('.ant-pagination-item').eq(0).click();
-
- cy.get('.virtual-grid').contains('Aaron').should('be.visible');
- });
- });
-
- describe('Big number total', () => {
- it('opens the modal with no filters', () => {
- interceptSamples();
-
- // opens the modal by clicking on the number on the chart
- cy.get("[data-test-viz-type='big_number_total'] .header-line")
- .scrollIntoView()
- .rightclick();
-
- openModalFromChartContext('Drill to detail');
-
- cy.getBySel('filter-val').should('not.exist');
- });
- });
-
- describe('Big number with trendline', () => {
- it('opens the modal with the correct data', () => {
- interceptSamples();
-
- // opens the modal by clicking on the number
- cy.get("[data-test-viz-type='big_number'] .header-line")
- .scrollIntoView()
- .rightclick();
-
- openModalFromChartContext('Drill to detail');
-
- cy.getBySel('filter-val').should('not.exist');
-
- closeModal();
-
- // opens the modal by clicking on the trendline
- cy.get("[data-test-viz-type='big_number'] canvas").then($canvas => {
- cy.wrap($canvas)
- .scrollIntoView()
- .trigger('mousemove', 1, 14)
- .rightclick(1, 14);
-
- openModalFromChartContext('Drill to detail by 1965');
-
- // checking the filter
- cy.getBySel('filter-val').should('contain', '1965');
- });
- });
- });
-
- describe('Table', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='table']")
- .scrollIntoView()
- .contains('boy')
- .rightclick();
-
- openModalFromChartContext('Drill to detail by boy');
-
- cy.getBySel('filter-val').should('contain', 'boy');
-
- closeModal();
-
- cy.get("[data-test-viz-type='table']")
- .scrollIntoView()
- .contains('girl')
- .rightclick();
-
- openModalFromChartContext('Drill to detail by girl');
-
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
-
- describe('Pivot Table V2', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='pivot_table_v2']")
- .scrollIntoView()
- .find('[role="gridcell"]')
- .first()
- .rightclick();
-
- openModalFromChartContext('Drill to detail by boy');
-
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.get("[data-test-viz-type='pivot_table_v2']")
- .scrollIntoView()
- .find('[role="gridcell"]')
- .first()
- .rightclick();
-
- openModalFromChartContext('Drill to detail by CA');
-
- cy.getBySel('filter-val').should('contain', 'CA');
- closeModal();
-
- cy.get("[data-test-viz-type='pivot_table_v2']")
- .scrollIntoView()
- .find('[role="gridcell"]')
- .eq(3)
- .rightclick();
-
- openModalFromChartContext('Drill to detail by girl');
-
- cy.getBySel('filter-val').should('contain', 'girl');
- closeModal();
-
- cy.get("[data-test-viz-type='pivot_table_v2']")
- .scrollIntoView()
- .find('[role="gridcell"]')
- .eq(3)
- .rightclick();
-
- openModalFromChartContext('Drill to detail by FL');
-
- cy.getBySel('filter-val').should('contain', 'FL');
- closeModal();
-
- cy.get("[data-test-viz-type='pivot_table_v2']")
- .scrollIntoView()
- .find('[role="gridcell"]')
- .eq(3)
- .rightclick();
-
- openModalFromChartContext('Drill to detail by all');
-
- cy.getBySel('filter-val').first().should('contain', 'girl');
- cy.getBySel('filter-val').eq(1).should('contain', 'FL');
- });
- });
-
- describe('Time-Series Line Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_timeseries_line');
- });
- });
-
- describe('Time-series Bar Chart', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='echarts_timeseries_bar'] canvas").then(
- $canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(70, 100);
-
- openModalFromChartContext('Drill to detail by 1965');
- cy.getBySel('filter-val').should('contain', '1965');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(70, 100);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(70, 100);
-
- openModalFromChartContext('Drill to detail by all');
- cy.getBySel('filter-val').first().should('contain', '1965');
- cy.getBySel('filter-val').eq(1).should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(72, 200);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- },
- );
- });
- });
-
- describe('Time-Series Area Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_area');
- });
- });
-
- describe('Time-Series Scatter Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_timeseries_scatter');
- });
- });
-
- describe('Pie', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- // opens the modal by clicking on the slice of the Pie chart
- cy.get("[data-test-viz-type='pie'] canvas").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(130, 150);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(230, 190);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- });
- });
- });
-
- describe('World Map', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='world_map'] svg").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(70, 150);
- openModalFromChartContext('Drill to detail by USA');
- cy.getBySel('filter-val').should('contain', 'USA');
- closeModal();
- });
- cy.get("[data-test-viz-type='world_map'] svg").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(200, 140);
- openModalFromChartContext('Drill to detail by SVK');
- cy.getBySel('filter-val').should('contain', 'SVK');
- });
- });
- });
-
- describe('Bar Chart', () => {
- it('opens the modal for unsupported chart without filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='dist_bar'] svg").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(70, 150);
- openModalFromChartContext('Drill to detail');
- cy.getBySel('filter-val').should('not.exist');
- });
- });
- });
- });
-
- describe('Tier 2 charts', () => {
- before(() => {
- cy.visit(SUPPORTED_CHARTS_DASHBOARD);
- setTopLevelTab('Tier 2');
- SUPPORTED_TIER2_CHARTS.forEach(waitForChartLoad);
- });
-
- describe('Modal actions', () => {
- it('clears filters', () => {
- interceptSamples();
-
- // opens the modal by clicking on the box on the chart
- cy.get("[data-test-viz-type='box_plot'] canvas").then($canvas => {
- const canvasWidth = $canvas.width() || 0;
- const canvasHeight = $canvas.height() || 0;
- const canvasCenterX = canvasWidth / 3;
- const canvasCenterY = (canvasHeight * 5) / 6;
-
- cy.wrap($canvas)
- .scrollIntoView()
- .rightclick(canvasCenterX, canvasCenterY, { force: true });
-
- openModalFromChartContext('Drill to detail by boy');
-
- // checking the filter
- cy.getBySel('filter-val').should('contain', 'boy');
- cy.getBySel('row-count-label').should('contain', '39.2k rows');
- cy.get('.ant-pagination-item')
- .should('have.length', 6)
- .then($pages => {
- expect($pages).to.contain('1');
- expect($pages).to.contain('785');
- });
-
- // close the filter and test that data was reloaded
- cy.getBySel('filter-col').find("[aria-label='close']").click();
- cy.wait('@samples');
- cy.getBySel('row-count-label').should('contain', '75.7k rows');
- cy.get('.ant-pagination-item-active').should('contain', '1');
- cy.get('.ant-pagination-item')
- .should('have.length', 6)
- .then($pages => {
- expect($pages).to.contain('1');
- expect($pages).to.contain('1514');
- });
- });
- });
- });
-
- describe('Box plot', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='box_plot'] canvas").then($canvas => {
- cy.wrap($canvas)
- .scrollIntoView()
- .trigger('mousemove', 135, 275)
- .rightclick(135, 275);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas)
- .scrollIntoView()
- .trigger('mousemove', 270, 280)
- .rightclick(270, 280);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
- });
-
- describe('Time-Series Generic Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_timeseries');
- });
- });
-
- describe('Time-Series Smooth Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_timeseries_smooth');
- });
- });
-
- describe('Time-Series Step Line Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('echarts_timeseries_step');
- });
- });
-
- describe('Funnel Chart', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='funnel'] canvas").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(170, 90);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(190, 250);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
- });
-
- describe('Gauge Chart', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='gauge_chart'] canvas").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(135, 95);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(95, 135);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
- });
-
- describe('Mixed Chart', () => {
- it('opens the modal with the correct filters', () => {
- testTimeChart('mixed_timeseries');
- });
- });
-
- describe('Radar Chart', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='radar'] canvas").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(180, 45);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(180, 85);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
- });
-
- describe('Treemap', () => {
- it('opens the modal with the correct filters', () => {
- interceptSamples();
-
- cy.get("[data-test-viz-type='treemap_v2'] canvas").then($canvas => {
- cy.wrap($canvas).scrollIntoView().rightclick(100, 30);
-
- openModalFromChartContext('Drill to detail by boy');
- cy.getBySel('filter-val').should('contain', 'boy');
- closeModal();
-
- cy.wrap($canvas).scrollIntoView().rightclick(150, 250);
-
- openModalFromChartContext('Drill to detail by girl');
- cy.getBySel('filter-val').should('contain', 'girl');
- });
- });
+ verifyNotAppliedCrossFilterBar();
});
});
});
-*/
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
index 85dc3bf705..30cd5d0f26 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
@@ -52,9 +52,7 @@ test('Title should render', () => {
test('Search icon should be visible', () => {
setup(mockedProps);
- expect(
- screen.getByTestId('cross-filters-highlight-emitter'),
- ).toBeInTheDocument();
+ expect(screen.getByTestId('cross-filter-bar-highlight')).toBeInTheDocument();
});
test('Column and value should be visible', () => {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index 3a1145c7db..44b77ca415 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
@@ -78,12 +78,18 @@ const CrossFilterTag = (props: {
onClose={() => removeCrossFilter(filter.emitterId)}
>
<Tooltip title={columnIsTruncated ? columnLabel : null}>
- <StyledCrossFilterColumn ref={columnRef}>
+ <StyledCrossFilterColumn
+ ref={columnRef}
+ data-test="cross-filter-bar-label"
+ >
{columnLabel}
</StyledCrossFilterColumn>
</Tooltip>
<Tooltip title={valueIsTruncated ? filter.value : null}>
- <StyledCrossFilterValue ref={valueRef}>
+ <StyledCrossFilterValue
+ ref={valueRef}
+ data-test="cross-filter-bar-value"
+ >
{filter.value}
</StyledCrossFilterValue>
</Tooltip>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
index 16987440a2..1e625acc99 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
@@ -45,7 +45,7 @@ test('Title should be visible', () => {
test('Search icon should highlight emitter', () => {
setup(mockedProps);
- const search = screen.getByTestId('cross-filters-highlight-emitter');
+ const search = screen.getByTestId('cross-filter-bar-highlight');
expect(search).toBeInTheDocument();
userEvent.click(search);
expect(mockedProps.onHighlightFilterSource).toHaveBeenCalled();
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
index 70f0ad2cd9..5e83803c49 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
@@ -59,7 +59,7 @@ const CrossFilterChartTitle = (props: {
const [titleRef, titleIsTruncated] = useCSSTextTruncation<HTMLSpanElement>();
const theme = useTheme();
return (
- <StyledCrossFilterTitle>
+ <StyledCrossFilterTitle data-test="cross-filter-bar-title">
<Tooltip title={titleIsTruncated ? title : null}>
<span
css={css`
@@ -77,7 +77,7 @@ const CrossFilterChartTitle = (props: {
<Tooltip title={t('Locate the chart')}>
<StyledIconSearch
iconSize="s"
- data-test="cross-filters-highlight-emitter"
+ data-test="cross-filter-bar-highlight"
role="button"
tabIndex={0}
onClick={onHighlightFilterSource}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.test.tsx
index 92aaf8cfc6..331120aeaf 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.test.tsx
@@ -65,7 +65,7 @@ test('Collapse should not render when empty', () => {
expect(screen.queryByText('test')).not.toBeInTheDocument();
expect(screen.queryByText('test-b')).not.toBeInTheDocument();
expect(
- screen.queryByTestId('cross-filters-highlight-emitter'),
+ screen.queryByTestId('cross-filter-bar-highlight'),
).not.toBeInTheDocument();
expect(screen.queryByRole('img', { name: 'close' })).not.toBeInTheDocument();
expect(screen.queryByText('country_name')).not.toBeInTheDocument();
@@ -83,9 +83,7 @@ test('Titles should be visible', () => {
test('Search icons should be visible', () => {
setup(mockedProps);
- expect(screen.getAllByTestId('cross-filters-highlight-emitter')).toHaveLength(
- 2,
- );
+ expect(screen.getAllByTestId('cross-filter-bar-highlight')).toHaveLength(2);
});
test('Tags should be visible', () => {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
index a748f9ed99..af3f1a5636 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
@@ -78,7 +78,7 @@ const CrossFiltersVerticalCollapse = (props: {
<Collapse.Panel
key="crossFilters"
header={
- <StyledCrossFiltersTitle>
+ <StyledCrossFiltersTitle data-test="cross-filter-bar-collapse-title">
{t('Cross-filters')}
</StyledCrossFiltersTitle>
}