iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Add Horizontal FilterBar e2e tests (#22305)

This commit is contained in:
Geido 2022-12-06 15:01:31 +02:00 committed by GitHub
parent 2f23a9ceac
commit e1ffdb95b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 269 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
View File

@ -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();

54
superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts
View File

@ -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();
});
}
}
/** ************************************************************************

2
superset-frontend/cypress-base/cypress/support/index.ts
View File

@ -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 */

5
superset-frontend/src/components/DropdownContainer/index.tsx
View File

@ -359,7 +359,10 @@ const DropdownContainer = forwardRef(
onVisibleChange={visible => setPopoverVisible(visible)}
placement="bottom"
>
<Button buttonStyle="secondary">
<Button
buttonStyle="secondary"
data-test="dropdown-container-btn"
>
{dropdownTriggerIcon}
{dropdownTriggerText}
<Badge

1
superset-frontend/src/components/Loading/index.tsx
View File

@ -70,6 +70,7 @@ export default function Loading({
role="status"
aria-live="polite"
aria-label="Loading"
data-test="loading-indicator"
/>
);
}

8
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx
View File

@ -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,

2
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
View File

@ -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>
)}

1
tests/integration_tests/superset_test_config.py
View File

@ -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/"