Skip to content

Commit

Permalink
chore: Add Horizontal FilterBar e2e tests (apache#22305)
Browse files Browse the repository at this point in the history
  • Loading branch information
@geido
geido authored Dec 6, 2022
1 parent 2f23a9c commit e1ffdb9
Show file tree
Hide file tree
Showing 8 changed files with 269 additions and 20 deletions.
216 changes: 216 additions & 0 deletions superset-frontend/cypress-base/cypress/integration/dashboard/nativeFilters.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import {
interceptGet,
interceptCharts,
interceptDatasets,
interceptFilterState,
} from './utils';

const SAMPLE_CHART = { name: 'Most Populated Countries', viz: 'table' };
Expand Down Expand Up @@ -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();
Expand Down
54 changes: 37 additions & 17 deletions superset-frontend/cypress-base/cypress/integration/dashboard/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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 });
}

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

/** ************************************************************************
Expand Down
2 changes: 2 additions & 0 deletions superset-frontend/cypress-base/cypress/support/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */

Expand Down
5 changes: 4 additions & 1 deletion superset-frontend/src/components/DropdownContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions superset-frontend/src/components/Loading/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export default function Loading({
role="status"
aria-live="polite"
aria-label="Loading"
data-test="loading-indicator"
/>
);
}
8 changes: 7 additions & 1 deletion ...end/src/dashboard/components/nativeFilters/FilterBar/FilterBarOrientationSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
1 change: 1 addition & 0 deletions tests/integration_tests/superset_test_config.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@
"ALERT_REPORTS": True,
"DASHBOARD_NATIVE_FILTERS": True,
"DRILL_TO_DETAIL": True,
"HORIZONTAL_FILTER_BAR": True,
}

WEBDRIVER_BASEURL = "http://0.0.0.0:8081/"
Expand Down

0 comments on commit e1ffdb9

Please sign in to comment.