QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-19 08:04:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(native-filters): Show incompatible native filters indicator (#12687)

Browse Source 
* Show incompatible native filters indicator

* Add Native Filters mocks and tests to Filter Badge

* Compare filter names in deduplication logic

* Add indicator key

* Remove unnecessary import
This commit is contained in:
Agata Stawarz
2021-01-23 06:23:21 +01:00
committed by GitHub
parent 9a159b30c4
commit 9c53ad48aa
6 changed files with 320 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx
View File

@@ -24,7 +24,10 @@ import * as SupersetUI from '@superset-ui/core';
import { CHART_UPDATE_SUCCEEDED } from 'src/chart/chartAction';
import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
import FiltersBadge from 'src/dashboard/containers/FiltersBadge';
import { getMockStoreWithFilters } from 'spec/fixtures/mockStore';
import {
getMockStoreWithFilters,
getMockStoreWithNativeFilters,
} from 'spec/fixtures/mockStore';
import { sliceId } from 'spec/fixtures/mockChartQueries';
import { dashboardFilters } from 'spec/fixtures/mockDashboardFilters';
import { dashboardWithFilter } from 'spec/fixtures/mockDashboardLayout';
@@ -45,83 +48,166 @@ describe('FiltersBadge', () => {
jest.spyOn(SupersetUI, 'useTheme').mockImplementation(() => supersetTheme);
});
it("doesn't show number when there are no active filters", () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [],
},
],
dashboardFilters,
describe('for dashboard filters', () => {
it("doesn't show number when there are no active filters", () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [],
},
],
dashboardFilters,
});
const wrapper = shallow(
<Provider store={store}>
<FiltersBadge chartId={sliceId} />,
</Provider>,
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).not.toExist();
});
it('shows the indicator when filters have been applied', () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [{ column: 'region' }],
rejected_filters: [],
},
],
dashboardFilters,
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('WarningFilled')).not.toExist();
});
it("shows a warning when there's a rejected filter", () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [
{ column: 'region', reason: 'not_in_datasource' },
],
},
],
dashboardFilters,
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('0');
expect(
wrapper.dive().find('[data-test="incompatible-filter-count"]'),
).toHaveText('1');
// to look at the shape of the wrapper use:
// console.log(wrapper.dive().debug())
expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
});
const wrapper = shallow(
<Provider store={store}>
<FiltersBadge chartId={sliceId} />,
</Provider>,
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).not.toExist();
});
it('shows the indicator when filters have been applied', () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [{ column: 'region' }],
rejected_filters: [],
},
],
dashboardFilters,
describe('for native filters', () => {
it("doesn't show number when there are no active filters", () => {
const store = getMockStoreWithNativeFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [],
},
],
});
const wrapper = shallow(
<Provider store={store}>
<FiltersBadge chartId={sliceId} />,
</Provider>,
);
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).not.toExist();
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('WarningFilled')).not.toExist();
});
it("shows a warning when there's a rejected filter", () => {
const store = getMockStoreWithFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
},
],
dashboardFilters,
it('shows the indicator when filters have been applied', () => {
const store = getMockStoreWithNativeFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [{ column: 'region' }],
rejected_filters: [],
},
],
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('WarningFilled')).not.toExist();
});
it("shows a warning when there's a rejected filter", () => {
const store = getMockStoreWithNativeFilters();
// start with basic dashboard state, dispatch an event to simulate query completion
store.dispatch({
type: CHART_UPDATE_SUCCEEDED,
key: sliceId,
queriesResponse: [
{
status: 'success',
applied_filters: [],
rejected_filters: [
{ column: 'region', reason: 'not_in_datasource' },
],
},
],
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('0');
expect(
wrapper.dive().find('[data-test="incompatible-filter-count"]'),
).toHaveText('1');
expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
});
const wrapper = shallow(
<FiltersBadge {...{ store }} chartId={sliceId} />,
).dive();
expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
expect(
wrapper.dive().find('[data-test="applied-filter-count"]'),
).toHaveText('0');
expect(
wrapper.dive().find('[data-test="incompatible-filter-count"]'),
).toHaveText('1');
// to look at the shape of the wrapper use:
// console.log(wrapper.dive().debug())
expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
});
});