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

test: Added some Cypress tests for Native Filters (#12180)

This commit is contained in:
adam-stasiak-polidea 2021-02-05 07:54:00 +01:00 committed by GitHub
parent 3bb14ab950
commit 3235d918aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 266 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/actions/cached-dependencies vendored

@ -1 +1 @@
Subproject commit b90713be305978a582ff222db84f03262fce5416
Subproject commit 064315d61e424e60d440fa77e8afda19cdd7211a

2
.github/actions/comment-on-pr vendored

@ -1 +1 @@
Subproject commit d1a1d5dd1eb1bb657a01f4d92dd5e4d5bb7857d3
Subproject commit 85a56be792d927ac4bfa2f4326607d38e80e6e60

2
.github/actions/pr-lint-action vendored

@ -1 +1 @@
Subproject commit 94f62f917b004b40381177152360e8fff63dd6d9
Subproject commit a168917ecac38f7b6f98401804e4e40f9f1bca8e

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

@ -16,43 +16,245 @@
* specific language governing permissions and limitations
* under the License.
*/
import { TABBED_DASHBOARD } from './dashboard.helper';
import { CHART_LIST } from '../chart_list/chart_list.helper';
import { DASHBOARD_LIST } from '../dashboard_list/dashboard_list.helper';
const milliseconds = new Date().getTime();
const dashboard = `Test Dashboard${milliseconds}`;
describe('Nativefilters', () => {
before(() => {
cy.login();
cy.visit(DASHBOARD_LIST);
cy.get('[data-test="new-dropdown"]').click();
cy.get('[data-test="menu-item-Dashboard"]').click({ force: true });
cy.get('[data-test="editable-title-input"]')
.click()
.clear()
.type(`${dashboard}{enter}`);
cy.get('[data-test="header-save-button"]').click();
cy.visit(CHART_LIST);
cy.get('[data-test="search-input"]').type('Treemap{enter}');
cy.get('[data-test="Treemap-list-chart-title"]')
.should('be.visible', { timeout: 5000 })
.click();
cy.get('[data-test="query-save-button"]').click();
cy.get('[data-test="save-chart-modal-select-dashboard-form"]')
.find('#dashboard-creatable-select')
.type(`${dashboard}{enter}{enter}`);
cy.get('[data-test="btn-modal-save"]').click();
});
beforeEach(() => {
cy.login();
cy.visit(TABBED_DASHBOARD);
cy.visit(DASHBOARD_LIST);
cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`);
cy.contains('[data-test="cell-text"]', `${dashboard}`).click();
});
it('should show filter bar and allow user to create filters ', () => {
cy.get('[data-test="filter-bar"]').should('be.visible');
cy.get('[data-test="collapse"]').click();
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('.ant-form-vertical').find('.ant-tabs-nav-add').first().click();
cy.get('.ant-modal')
.find('.ant-tabs-tab-btn')
.first()
.click({ force: true })
.type('TEST_Filter');
.find('[data-test="name-input"]')
.click()
.type('Country name');
cy.get('.ant-modal').find('[data-test="datasource-input"]').first().click();
cy.get('.ant-modal').find('[data-test="datasource-input"]').click();
cy.get('[data-test="datasource-input"]')
.contains('wb_health_population')
.click();
// possible bug with cypress where it is having issue discovering the field input
// after it is enabled
/* cy.get('.ant-modal')
// hack for unclickable country_name
cy.get('.ant-modal').find('[data-test="field-input"]').type('country_name');
cy.get('.ant-modal')
.find('[data-test="field-input"]')
.click()
.contains('country_name')
.type('{downarrow}{downarrow}{enter}');
cy.get('[data-test="apply-changes-instantly-checkbox"]').check();
cy.get('.ant-modal-footer')
.find('[data-test="native-filter-modal-save-button"]')
.should('be.visible')
.click();
*/
});
cy.get('.ant-modal-footer').find('button').should('be.visible');
it('should show newly added filter in filter bar menu', () => {
cy.get('[data-test="filter-bar"]').should('be.visible');
cy.get('[data-test="filter-control-name"]').should('be.visible');
cy.get('[data-test="form-item-value"]').should('be.visible');
});
it('should filter dashboard with selected filter value', () => {
cy.get('[data-test="form-item-value"]').should('be.visible').click();
cy.get('.ant-select-selection-search').type('Hong Kong{enter}');
cy.get('[data-test="filter-apply-button"]').click();
cy.get('.treemap').within(() => {
cy.contains('HKG').should('be.visible');
cy.contains('USA').should('not.exist');
});
});
it('default value is respected after revisit', () => {
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('[data-test="default-input"]').click();
cy.get('.ant-modal').find('[data-test="default-input"]').type('Sweden');
cy.get('.ant-modal')
.find('[data-test="default-input"]')
.type('{downarrow}{downarrow}{enter}');
cy.get('[data-test="native-filter-modal-save-button"]')
.should('be.visible')
.click();
cy.visit(DASHBOARD_LIST);
cy.get('[data-test="search-input"]').click().type(`${dashboard}{enter}`);
cy.contains('[data-test="cell-text"]', `${dashboard}`).click();
cy.get('.treemap').within(() => {
cy.contains('SWE').should('be.visible');
cy.contains('USA').should('not.exist');
});
cy.contains('Sweden');
});
it('should allow for deleted filter restore', () => {
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('.ant-tabs-nav-list').within(() => {
cy.get('.ant-tabs-tab-remove').click();
});
cy.get('[data-test="undo-button"]').should('be.visible').click();
cy.get('.ant-tabs-nav-list').within(() => {
cy.get('.ant-tabs-tab-remove').click();
});
cy.get('[data-test="restore-filter-button"]').should('be.visible').click();
});
it('should stop filtering when filter is removed', () => {
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('.ant-tabs-nav-list').within(() => {
cy.get('.ant-tabs-tab-remove').click();
});
cy.get('.ant-modal-footer')
.find('[data-test="native-filter-modal-save-button"]')
.should('be.visible')
.click();
cy.get('.treemap').within(() => {
cy.contains('HKG').should('be.visible');
cy.contains('USA').should('be.visible');
});
});
describe('Parent Filters', () => {
it('should allow for creating parent filters ', () => {
cy.get('[data-test="filter-bar"]').should('be.visible');
cy.get('[data-test="collapse"]').click();
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('.ant-modal')
.find('[data-test="name-input"]')
.click()
.type('Country name');
cy.get('.ant-modal').find('[data-test="datasource-input"]').click();
cy.get('[data-test="datasource-input"]')
.contains('wb_health_population')
.click();
// hack for unclickable country_name
cy.get('.ant-modal')
.find('[data-test="field-input"]')
.type('country_name');
cy.get('.ant-modal')
.find('[data-test="field-input"]')
.type('{downarrow}{downarrow}{enter}');
cy.get('[data-test="apply-changes-instantly-checkbox"]').check();
cy.get('.ant-modal-footer')
.find('[data-test="native-filter-modal-save-button"]')
.should('be.visible')
.click();
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').first().should('be.visible');
cy.get('[data-test=add-filter-button]').first().click();
cy.get('.ant-modal')
.find('[data-test="name-input"]')
.last()
.click()
.type('Region Name');
cy.get('.ant-modal')
.find('[data-test="datasource-input"]')
.last()
.click();
cy.get('[data-test="datasource-input"]')
.last()
.contains('wb_health_population')
.click();
// hack for unclickable country_name
cy.get('.ant-modal')
.find('[data-test="field-input"]')
.last()
.type('region');
cy.get('.ant-modal')
.find('[data-test="field-input"]')
.last()
.type('{downarrow}{downarrow}{downarrow}{downarrow}{enter}');
cy.get('[data-test="apply-changes-instantly-checkbox"]').last().check();
cy.get('.ant-modal')
.find('[data-test="parent-filter-input"]')
.last()
.type('{downarrow}{enter}');
cy.get('.ant-modal-footer')
.find('[data-test="native-filter-modal-save-button"]')
.first()
.should('be.visible')
.click();
cy.get('[data-test="filter-icon"]').should('be.visible');
});
it('should parent filter be working', () => {
cy.get('.treemap').within(() => {
cy.contains('SMR').should('be.visible');
cy.contains('Europe & Central Asia').should('be.visible');
cy.contains('South Asia').should('be.visible');
});
cy.get('[data-test="form-item-value"]').should('be.visible').click();
cy.get('.ant-popover-inner-content').within(() => {
cy.get('[data-test="form-item-value"]')
.should('be.visible')
.first()
.type('San Marino{enter}');
cy.get('[data-test="form-item-value"]')
.should('be.visible')
.last()
.type('Europe & Central Asia{enter}');
});
cy.get('.treemap').within(() => {
cy.contains('SMR').should('be.visible');
cy.contains('Europe & Central Asia').should('be.visible');
cy.contains('South Asia').should('not.exist');
});
});
it('should stop filtering when parent filter is removed', () => {
cy.get('[data-test="create-filter"]').click();
cy.get('.ant-modal').should('be.visible');
cy.get('.ant-tabs-nav-list').within(() => {
cy.get('.ant-tabs-tab-remove').click({ multiple: true });
});
cy.get('.ant-modal-footer')
.find('[data-test="native-filter-modal-save-button"]')
.should('be.visible')
.click();
cy.get('.treemap').within(() => {
cy.contains('HKG').should('be.visible');
cy.contains('USA').should('be.visible');
});
});
});
});

7
superset-frontend/src/components/Menu/NewMenu.tsx
View File

@ -48,6 +48,7 @@ export default function NewMenu() {
return (
<NavDropdown
id="new-dropdown"
data-test="new-dropdown"
title={<StyledI className="fa fa-plus" />}
onMouseEnter={() => setDropdownOpen(true)}
onMouseLeave={() => setDropdownOpen(false)}
@ -58,7 +59,11 @@ export default function NewMenu() {
{dropdownItems.map((menu, i) => (
<Menu.Item key={i}>
<a href={menu.url}>
<i className={`fa ${menu.icon}`} /> {menu.label}
<i
data-test={`menu-item-${menu.label}`}
className={`fa ${menu.icon}`}
/>{' '}
{menu.label}
</a>
</Menu.Item>
))}

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

@ -306,7 +306,7 @@ const FilterValue: React.FC<FilterProps> = ({
}
return (
<FilterItem>
<FilterItem data-test="form-item-value">
<SuperChart
height={20}
width={220}
@ -330,8 +330,10 @@ export const FilterControl: React.FC<FilterProps> = ({
return (
<StyledFilterControlContainer>
<StyledFilterControlTitleBox>
<StyledFilterControlTitle>{name}</StyledFilterControlTitle>
<div>{icon}</div>
<StyledFilterControlTitle data-test="filter-control-name">
{name}
</StyledFilterControlTitle>
<div data-test="filter-icon">{icon}</div>
</StyledFilterControlTitleBox>
<FilterValue
filter={filter}
@ -489,6 +491,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
buttonStyle="secondary"
buttonSize="small"
onClick={handleResetAll}
data-test="filter-reset-button"
>
{t('Reset all')}
</Button>
@ -497,6 +500,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
htmlType="submit"
buttonSize="small"
onClick={handleApply}
data-test="filter-apply-button"
>
{t('Apply')}
</Button>

14
superset-frontend/src/dashboard/components/nativeFilters/FilterConfigForm.tsx
View File

@ -137,8 +137,12 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
<RemovedContent>
<p>{t('You have removed this filter.')}</p>
<div>
<Button type="primary" onClick={() => restore(filterId)}>
{t('Restore filter')}
<Button
data-test="restore-filter-button"
type="primary"
onClick={() => restore(filterId)}
>
{t('Restore Filter')}
</Button>
</div>
</RemovedContent>
@ -241,6 +245,7 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
<StyledFormItem
name={['filters', filterId, 'defaultValue']}
initialValue={filterToEdit?.defaultValue}
data-test="default-input"
label={<StyledLabel>{t('Default Value')}</StyledLabel>}
>
{formFilter?.dataset &&
@ -270,6 +275,7 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
initialValue={parentFilterOptions.find(
({ value }) => value === filterToEdit?.cascadeParentIds[0],
)}
data-test="parent-filter-input"
>
<Select
placeholder={t('None')}
@ -283,7 +289,9 @@ export const FilterConfigForm: React.FC<FilterConfigFormProps> = ({
valuePropName="checked"
colon={false}
>
<Checkbox>{t('Apply changes instantly')}</Checkbox>
<Checkbox data-test="apply-changes-instantly-checkbox">
{t('Apply changes instantly')}
</Checkbox>
</StyledCheckboxFormItem>
<StyledCheckboxFormItem
name={['filters', filterId, 'allowsMultipleValues']}

18
superset-frontend/src/dashboard/components/nativeFilters/FilterConfigModal.tsx
View File

@ -483,10 +483,20 @@ export function FilterConfigModal({
}
return [
<Button key="cancel" buttonStyle="secondary" onClick={handleCancel}>
<Button
key="cancel"
buttonStyle="secondary"
data-test="native-filter-modal-cancel-button"
onClick={handleCancel}
>
{t('Cancel')}
</Button>,
<Button key="submit" buttonStyle="primary" onClick={onOk}>
<Button
key="submit"
buttonStyle="primary"
onClick={onOk}
data-test="native-filter-modal-save-button"
>
{t('Save')}
</Button>,
];
@ -530,7 +540,8 @@ export function FilterConfigModal({
onEdit={onTabEdit}
addIcon={
<StyledAddFilterBox>
<PlusOutlined /> <span>{t('Add filter')}</span>
<PlusOutlined />{' '}
<span data-test="add-filter-button">{t('Add filter')}</span>
</StyledAddFilterBox>
}
>
@ -548,6 +559,7 @@ export function FilterConfigModal({
{removedFilters[id] && (
<StyledSpan
role="button"
data-test="undo-button"
tabIndex={0}
onClick={() => restoreFilter(id)}
>

6
superset-frontend/src/views/CRUD/chart/ChartList.tsx
View File

@ -207,7 +207,11 @@ function ChartList(props: ChartListProps) {
row: {
original: { url, slice_name: sliceName },
},
}: any) => <a href={url}>{sliceName}</a>,
}: any) => (
<a href={url} data-test={`${sliceName}-list-chart-title`}>
{sliceName}
</a>
),
Header: t('Chart'),
accessor: 'slice_name',
},