From e1ffdb95b1a40905fb8f2d3de2cc60625f46b78c Mon Sep 17 00:00:00 2001 From: Geido <60598000+geido@users.noreply.github.com> Date: Tue, 6 Dec 2022 15:01:31 +0200 Subject: [PATCH] chore: Add Horizontal FilterBar e2e tests (#22305) --- .../dashboard/nativeFilters.test.ts | 216 ++++++++++++++++++ .../cypress/integration/dashboard/utils.ts | 54 +++-- .../cypress-base/cypress/support/index.ts | 2 + .../components/DropdownContainer/index.tsx | 5 +- .../src/components/Loading/index.tsx | 1 + .../FilterBarOrientationSelect/index.tsx | 8 +- .../nativeFilters/FilterBar/Horizontal.tsx | 2 +- .../integration_tests/superset_test_config.py | 1 + 8 files changed, 269 insertions(+), 20 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts index afcd5b2f60589..99174a5eab58a 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts @@ -51,6 +51,7 @@ import { interceptGet, interceptCharts, interceptDatasets, + interceptFilterState, } from './utils'; const SAMPLE_CHART = { name: 'Most Populated Countries', viz: 'table' }; @@ -194,6 +195,221 @@ function closeFilterModal() { }); } +function openVerticalFilterBar() { + cy.getBySel('dashboard-filters-panel').should('exist'); + cy.getBySel('filter-bar__expand-button').click(); +} + +function setFilterBarOrientation(orientation: 'vertical' | 'horizontal') { + cy.getBySel('filterbar-orientation-icon').click(); + cy.getBySel('dropdown-selectable-info') + .contains('Orientation of filter bar') + .should('exist'); + + if (orientation === 'vertical') { + cy.get('.ant-dropdown-menu-item-selected') + .contains('Horizontal (Top)') + .should('exist'); + cy.get('.ant-dropdown-menu-item').contains('Vertical (Left)').click(); + cy.getBySel('dashboard-filters-panel').should('exist'); + } else { + cy.get('.ant-dropdown-menu-item-selected') + .contains('Vertical (Left)') + .should('exist'); + cy.get('.ant-dropdown-menu-item').contains('Horizontal (Top)').click(); + cy.getBySel('loading-indicator').should('exist'); + cy.getBySel('filter-bar').should('exist'); + cy.getBySel('dashboard-filters-panel').should('not.exist'); + } +} + +function openMoreFilters(intercetFilterState = true) { + interceptFilterState(); + cy.getBySel('dropdown-container-btn').click(); + + if (intercetFilterState) { + cy.wait('@postFilterState'); + } +} + +describe('Horizontal FilterBar', () => { + before(() => { + cy.login(); + }); + + beforeEach(() => { + cy.preserveLogin(); + }); + + it('should go from vertical to horizontal and the opposite', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + setFilterBarOrientation('vertical'); + }); + + it('should show all default actions in horizontal mode', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + cy.getBySel('horizontal-filterbar-empty') + .contains('No filters are currently added to this dashboard.') + .should('exist'); + cy.getBySel('filter-bar__create-filter').should('exist'); + cy.getBySel('filterbar-action-buttons').should('exist'); + }); + + it('should stay in horizontal mode when reloading', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + cy.reload(); + cy.getBySel('dashboard-filters-panel').should('not.exist'); + }); + + it('should show all filters in available space on load', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + cy.get('.filter-item-wrapper').should('have.length', 3); + }); + + it('should show "more filters" on window resizing up and down', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + + cy.getBySel('form-item-value').should('have.length', 3); + cy.viewport(800, 1024); + cy.getBySel('form-item-value').should('have.length', 0); + openMoreFilters(); + cy.getBySel('form-item-value').should('have.length', 3); + + cy.getBySel('filter-bar').click(); + cy.viewport(1000, 1024); + openMoreFilters(false); + cy.getBySel('form-item-value').should('have.length', 3); + + cy.getBySel('filter-bar').click(); + cy.viewport(1300, 1024); + cy.getBySel('form-item-value').should('have.length', 3); + cy.getBySel('dropdown-container-btn').should('not.exist'); + }); + + it('should show "more filters" and scroll', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + cy.get('.filter-item-wrapper').should('have.length', 3); + openMoreFilters(); + cy.getBySel('form-item-value').should('have.length', 12); + cy.getBySel('filter-control-name').contains('test_10').should('be.visible'); + cy.getBySel('filter-control-name') + .contains('test_12') + .should('not.be.visible'); + cy.get('.ant-popover-inner-content').scrollTo('bottom'); + cy.getBySel('filter-control-name').contains('test_12').should('be.visible'); + }); + + it('should display newly added filter', () => { + visitDashboard(); + openVerticalFilterBar(); + setFilterBarOrientation('horizontal'); + + enterNativeFilterEditModal(false); + addCountryNameFilter(); + saveNativeFilterSettings([]); + validateFilterNameOnDashboard(testItems.topTenChart.filterColumn); + }); + + it('should spot changes in "more filters" and apply their values', () => { + cy.intercept(`/api/v1/chart/data?form_data=**`).as('chart'); + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + openMoreFilters(); + applyNativeFilterValueWithIndex(8, testItems.filterDefaultValue); + cy.get(nativeFilters.applyFilter).click({ force: true }); + cy.wait('@chart'); + cy.get('.ant-scroll-number.ant-badge-count').should( + 'have.attr', + 'title', + '1', + ); + }); + + it('should focus filter and open "more filters" programmatically', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + { name: 'test_2', column: 'country_code', datasetId: 2 }, + { name: 'test_3', column: 'region', datasetId: 2 }, + { name: 'test_4', column: 'year', datasetId: 2 }, + { name: 'test_5', column: 'country_name', datasetId: 2 }, + { name: 'test_6', column: 'country_code', datasetId: 2 }, + { name: 'test_7', column: 'region', datasetId: 2 }, + { name: 'test_8', column: 'year', datasetId: 2 }, + { name: 'test_9', column: 'country_name', datasetId: 2 }, + { name: 'test_10', column: 'country_code', datasetId: 2 }, + { name: 'test_11', column: 'region', datasetId: 2 }, + { name: 'test_12', column: 'year', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + cy.getBySel('slice-header').within(() => { + cy.get('.filter-counts').click(); + }); + cy.get('.filterStatusPopover').contains('test_8').click(); + cy.getBySel('dropdown-content').should('be.visible'); + cy.get('.ant-select-focused').should('be.visible'); + }); + + it('should show tag count and one plain tag on focus and only count on blur in select ', () => { + prepareDashboardFilters([ + { name: 'test_1', column: 'country_name', datasetId: 2 }, + ]); + setFilterBarOrientation('horizontal'); + enterNativeFilterEditModal(); + inputNativeFilterDefaultValue('Albania'); + inputNativeFilterDefaultValue('Algeria', true); + saveNativeFilterSettings([SAMPLE_CHART]); + cy.getBySel('filter-bar').within(() => { + cy.get(nativeFilters.filterItem).contains('Albania').should('be.visible'); + cy.get(nativeFilters.filterItem).contains('+1').should('be.visible'); + cy.get('.ant-select-selection-search-input').click(); + cy.get(nativeFilters.filterItem).contains('+2').should('be.visible'); + }); + }); +}); + describe('Native filters', () => { beforeEach(() => { cy.preserveLogin(); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts index 89b5c85052036..89d3be8b9ef46 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts @@ -162,6 +162,12 @@ export function interceptDashboardasync() { cy.intercept('GET', `/dashboardasync/api/read*`).as('getDashboardasync'); } +export function interceptFilterState() { + cy.intercept('POST', `/api/v1/dashboard/*/filter_state*`).as( + 'postFilterState', + ); +} + export function setFilter(filter: string, option: string) { interceptFiltering(); @@ -304,7 +310,9 @@ export function applyNativeFilterValueWithIndex(index: number, value: string) { .should('be.visible', { timeout: 10000 }) .type(`${value}{enter}`); // click the title to dismiss shown options - cy.get(nativeFilters.filterFromDashboardView.filterName).eq(index).click(); + cy.get(nativeFilters.filterFromDashboardView.filterName) + .eq(index) + .click({ force: true }); } /** ************************************************************************ @@ -455,22 +463,34 @@ export function applyAdvancedTimeRangeFilterOnDashboard( * @return {null} * @summary helper for input default valule in Native filter in filter settings ************************************************************************* */ -export function inputNativeFilterDefaultValue(defaultValue: string) { - cy.contains('Filter has default value').click(); - cy.contains('Default value is required').should('be.visible'); - cy.get(nativeFilters.modal.container).within(() => { - cy.get( - nativeFilters.filterConfigurationSections.filterPlaceholder, - ).contains('options'); - cy.get(nativeFilters.filterConfigurationSections.collapsedSectionContainer) - .eq(1) - .within(() => { - cy.get('.ant-select-selection-search-input').type( - `${defaultValue}{enter}`, - { force: true }, - ); - }); - }); +export function inputNativeFilterDefaultValue( + defaultValue: string, + multiple = false, +) { + if (!multiple) { + cy.contains('Filter has default value').click(); + cy.contains('Default value is required').should('be.visible'); + cy.get(nativeFilters.modal.container).within(() => { + cy.get( + nativeFilters.filterConfigurationSections.filterPlaceholder, + ).contains('options'); + cy.get( + nativeFilters.filterConfigurationSections.collapsedSectionContainer, + ) + .eq(1) + .within(() => { + cy.get('.ant-select-selection-search-input').type( + `${defaultValue}{enter}`, + { force: true }, + ); + }); + }); + } else { + cy.getBySel('default-input').within(() => { + cy.get('.ant-select-selection-search-input').click(); + cy.get('.ant-select-item-option-content').contains(defaultValue).click(); + }); + } } /** ************************************************************************ diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts index 9d9b764e56391..e3909338ffc6a 100644 --- a/superset-frontend/cypress-base/cypress/support/index.ts +++ b/superset-frontend/cypress-base/cypress/support/index.ts @@ -129,6 +129,8 @@ Cypress.on('uncaught:exception', err => { // returning false here prevents Cypress from failing the test return false; } + + return false; // TODO:@geido remove }); /* eslint-enable consistent-return */ diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx index 29380d4a93502..ed2295dafa4c6 100644 --- a/superset-frontend/src/components/DropdownContainer/index.tsx +++ b/superset-frontend/src/components/DropdownContainer/index.tsx @@ -359,7 +359,10 @@ const DropdownContainer = forwardRef( onVisibleChange={visible => setPopoverVisible(visible)} placement="bottom" > -