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 2022/12/01 17:12:11 UTC
[superset] 01/01: Add initial Horizontal FilterBar e2e tests
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/hfb-e2e-tests
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 112a1bd6e5eff664a4868862d68d2f362aa2b08a
Author: geido <di...@gmail.com>
AuthorDate: Thu Dec 1 19:11:54 2022 +0200
Add initial Horizontal FilterBar e2e tests
---
.../integration/dashboard/nativeFilters.test.ts | 161 +++++++++++++++++++++
.../cypress/integration/dashboard/utils.ts | 10 +-
.../cypress-base/cypress/support/index.ts | 2 +
.../src/components/DropdownContainer/index.tsx | 5 +-
superset-frontend/src/components/Loading/index.tsx | 1 +
.../src/dashboard/actions/dashboardInfo.ts | 1 +
.../FilterBar/FilterBarOrientationSelect/index.tsx | 8 +-
.../nativeFilters/FilterBar/Horizontal.tsx | 2 +-
tests/integration_tests/superset_test_config.py | 1 +
9 files changed, 187 insertions(+), 4 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 afcd5b2f60..682f4c1a06 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,166 @@ 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() {
+ interceptFilterState();
+ cy.getBySel('dropdown-container-btn').click();
+ 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', () => {
+ prepareDashboardFilters([
+ { name: 'test_1', column: 'country_name', datasetId: 2 },
+ { name: 'test_2', column: 'country_code', datasetId: 2 },
+ ]);
+ setFilterBarOrientation('horizontal');
+ cy.get('.filter-item-wrapper').should('have.length', 2);
+ });
+
+ it('should show "more filters" on window resize', () => {
+ 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', 1);
+ openMoreFilters();
+ cy.getBySel('form-item-value').should('have.length', 3);
+ });
+
+ 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',
+ );
+ });
+});
+
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 89b5c85052..0fd8d19a5d 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 });
}
/** ************************************************************************
diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts
index 9d9b764e56..e3909338ff 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 2d0e3af1d6..54988d593c 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -328,7 +328,10 @@ const DropdownContainer = forwardRef(
onVisibleChange={visible => setPopoverVisible(visible)}
placement="bottom"
>
- <Button buttonStyle="secondary">
+ <Button
+ buttonStyle="secondary"
+ data-test="dropdown-container-btn"
+ >
{dropdownTriggerIcon}
{dropdownTriggerText}
<Badge
diff --git a/superset-frontend/src/components/Loading/index.tsx b/superset-frontend/src/components/Loading/index.tsx
index 97cd553ad5..b8d91ce6a2 100644
--- a/superset-frontend/src/components/Loading/index.tsx
+++ b/superset-frontend/src/components/Loading/index.tsx
@@ -70,6 +70,7 @@ export default function Loading({
role="status"
aria-live="polite"
aria-label="Loading"
+ data-test="loading-indicator"
/>
);
}
diff --git a/superset-frontend/src/dashboard/actions/dashboardInfo.ts b/superset-frontend/src/dashboard/actions/dashboardInfo.ts
index dbec0cd1cc..14785d91d9 100644
--- a/superset-frontend/src/dashboard/actions/dashboardInfo.ts
+++ b/superset-frontend/src/dashboard/actions/dashboardInfo.ts
@@ -134,6 +134,7 @@ export function setFilterBarOrientation(
export function saveFilterBarOrientation(orientation: FilterBarOrientation) {
return async (dispatch: Dispatch, getState: () => RootState) => {
const { id, metadata } = getState().dashboardInfo;
+ console.log('getState().dashboardInfo', getState().dashboardInfo);
const updateDashboard = makeApi<
Partial<DashboardInfo>,
{ result: Partial<DashboardInfo>; last_modified_time: number }
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx
index 70d7075c6e..50e57fd86e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx
@@ -63,7 +63,13 @@ const FilterBarOrientationSelect = () => {
<DropdownSelectableIcon
onSelect={toggleFilterBarOrientation}
info={t('Orientation of filter bar')}
- icon={<Icons.Gear name="gear" iconColor={theme.colors.grayscale.base} />}
+ icon={
+ <Icons.Gear
+ name="gear"
+ iconColor={theme.colors.grayscale.base}
+ data-test="filterbar-orientation-icon"
+ />
+ }
menuItems={[
{
key: FilterBarOrientation.VERTICAL,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
index d085e08900..240af291e0 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -107,7 +107,7 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
<>
{canEdit && <FilterBarOrientationSelect />}
{!hasFilters && (
- <FilterBarEmptyStateContainer>
+ <FilterBarEmptyStateContainer data-test="horizontal-filterbar-empty">
{t('No filters are currently added to this dashboard.')}
</FilterBarEmptyStateContainer>
)}
diff --git a/tests/integration_tests/superset_test_config.py b/tests/integration_tests/superset_test_config.py
index 8f1ef27f2c..19c2cc000f 100644
--- a/tests/integration_tests/superset_test_config.py
+++ b/tests/integration_tests/superset_test_config.py
@@ -71,6 +71,7 @@ FEATURE_FLAGS = {
"ALERT_REPORTS": True,
"DASHBOARD_NATIVE_FILTERS": True,
"DRILL_TO_DETAIL": True,
+ "HORIZONTAL_FILTER_BAR": True,
}
WEBDRIVER_BASEURL = "http://0.0.0.0:8081/"