test(native-filters): scoping tree in native filters modal (#12655)
* test: add test to scoping tree in native filters * test: rename mocks
This commit is contained in:
simchaNielsen
GitHub
parent
6bf5d2c06d
commit
da63b4b0ea
|
|
@ -189,6 +189,49 @@ export const dashboardLayoutWithTabs = {
|
|||
future: [],
|
||||
};
|
||||
|
||||
export const dashboardLayoutWithChartsInTabsAndRoot = {
|
||||
...dashboardLayoutWithTabs,
|
||||
present: {
|
||||
...dashboardLayoutWithTabs.present,
|
||||
[DASHBOARD_ROOT_ID]: {
|
||||
type: DASHBOARD_ROOT_TYPE,
|
||||
id: DASHBOARD_ROOT_ID,
|
||||
children: ['TABS_ID', 'ROW_ID3'],
|
||||
},
|
||||
|
||||
ROW_ID3: {
|
||||
...newComponentFactory(ROW_TYPE),
|
||||
id: 'ROW_ID3',
|
||||
children: ['CHART_ID3'],
|
||||
parents: ['ROOT_ID'],
|
||||
},
|
||||
|
||||
CHART_ID2: {
|
||||
...newComponentFactory(CHART_TYPE),
|
||||
id: 'CHART_ID2',
|
||||
parents: ['ROOT_ID', 'TABS_ID', 'TAB_ID2', 'ROW_ID2'],
|
||||
meta: {
|
||||
chartId: 20,
|
||||
width: 3,
|
||||
height: 10,
|
||||
chartName: 'Mock chart name 2',
|
||||
},
|
||||
},
|
||||
|
||||
CHART_ID3: {
|
||||
...newComponentFactory(CHART_TYPE),
|
||||
id: 'CHART_ID3',
|
||||
parents: ['ROOT_ID', 'ROW_ID3'],
|
||||
meta: {
|
||||
chartId: 19,
|
||||
width: 3,
|
||||
height: 10,
|
||||
chartName: 'Mock chart name',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const filterComponent = {
|
||||
...newComponentFactory(CHART_TYPE),
|
||||
id: 'CHART-rwDfbGqeEn',
|
||||
|
|
|
|||
|
|
@ -22,7 +22,10 @@ import thunk from 'redux-thunk';
|
|||
import rootReducer from 'src/dashboard/reducers/index';
|
||||
|
||||
import mockState from './mockState';
|
||||
import { dashboardLayoutWithTabs } from './mockDashboardLayout';
|
||||
import {
|
||||
dashboardLayoutWithTabs,
|
||||
dashboardLayoutWithChartsInTabsAndRoot,
|
||||
} from './mockDashboardLayout';
|
||||
import { sliceId } from './mockChartQueries';
|
||||
import { dashboardFilters } from './mockDashboardFilters';
|
||||
import { nativeFilters } from './mockNativeFilters';
|
||||
|
|
@ -47,7 +50,19 @@ export const getMockStoreWithTabs = () =>
|
|||
compose(applyMiddleware(thunk)),
|
||||
);
|
||||
|
||||
export const getMockStoreWithChartsInTabsAndRoot = () =>
|
||||
createStore(
|
||||
rootReducer,
|
||||
{
|
||||
...mockState,
|
||||
dashboardLayout: dashboardLayoutWithChartsInTabsAndRoot,
|
||||
dashboardFilters: {},
|
||||
},
|
||||
compose(applyMiddleware(thunk)),
|
||||
);
|
||||
|
||||
export const mockStoreWithTabs = getMockStoreWithTabs();
|
||||
export const mockStoreWithChartsInTabsAndRoot = getMockStoreWithChartsInTabsAndRoot();
|
||||
|
||||
export const sliceIdWithAppliedFilter = sliceId + 1;
|
||||
export const sliceIdWithRejectedFilter = sliceId + 2;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { render, screen, fireEvent } from 'spec/helpers/testing-library';
|
||||
import { mockStoreWithChartsInTabsAndRoot } from 'spec/fixtures/mockStore';
|
||||
import { Form, FormInstance } from 'src/common/components';
|
||||
import { NativeFiltersForm } from 'src/dashboard/components/nativeFilters/types';
|
||||
import FilterConfigForm from 'src/dashboard/components/nativeFilters/FilterConfigForm';
|
||||
|
||||
describe('FilterScope', () => {
|
||||
const save = jest.fn();
|
||||
let form: FormInstance<NativeFiltersForm>;
|
||||
const mockedProps = {
|
||||
filterId: 'DefaultFilterId',
|
||||
restore: jest.fn(),
|
||||
parentFilters: [],
|
||||
save,
|
||||
};
|
||||
|
||||
const MockModal = ({ scope }: { scope: object | undefined }) => {
|
||||
const [newForm] = Form.useForm<NativeFiltersForm>();
|
||||
form = newForm;
|
||||
if (scope) {
|
||||
form.setFieldsValue({
|
||||
filters: {
|
||||
[mockedProps.filterId]: {
|
||||
scope,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
return (
|
||||
<Provider store={mockStoreWithChartsInTabsAndRoot}>
|
||||
<Form form={form}>
|
||||
<FilterConfigForm form={form} {...mockedProps} />
|
||||
</Form>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const getWrapper = (scope?: object) => {
|
||||
render(<MockModal scope={scope} />);
|
||||
};
|
||||
|
||||
const getTreeSwitcher = (order = 0) =>
|
||||
document.querySelectorAll('.ant-tree-switcher')[order];
|
||||
|
||||
it('renders "apply to all" filter scope', () => {
|
||||
getWrapper();
|
||||
expect(screen.queryByRole('tree')).toBe(null);
|
||||
});
|
||||
|
||||
it('select tree values with 1 excluded', () => {
|
||||
getWrapper();
|
||||
fireEvent.click(screen.getByLabelText('Apply to specific panels'));
|
||||
expect(screen.getByRole('tree')).not.toBe(null);
|
||||
fireEvent.click(getTreeSwitcher(2));
|
||||
fireEvent.click(screen.getByText('CHART_ID2'));
|
||||
expect(form.getFieldValue('filters')?.[mockedProps.filterId].scope).toEqual(
|
||||
{
|
||||
excluded: [20],
|
||||
rootPath: ['ROOT_ID'],
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it('select 1 value only', () => {
|
||||
getWrapper();
|
||||
fireEvent.click(screen.getByLabelText('Apply to specific panels'));
|
||||
expect(screen.getByRole('tree')).not.toBe(null);
|
||||
fireEvent.click(getTreeSwitcher(2));
|
||||
fireEvent.click(screen.getByText('CHART_ID2'));
|
||||
fireEvent.click(screen.getByText('tab1'));
|
||||
expect(form.getFieldValue('filters')?.[mockedProps.filterId].scope).toEqual(
|
||||
{
|
||||
excluded: [18, 20],
|
||||
rootPath: ['ROOT_ID'],
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it('correct init tree with values', () => {
|
||||
getWrapper({
|
||||
rootPath: ['TAB_ID'],
|
||||
excluded: [],
|
||||
});
|
||||
fireEvent.click(screen.getByLabelText('Apply to specific panels'));
|
||||
expect(screen.getByRole('tree')).not.toBe(null);
|
||||
expect(document.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(
|
||||
1,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import ScopingTree from 'src/dashboard/components/nativeFilters/ScopingTree';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { FormInstance } from 'src/common/components';
|
||||
import { NativeFiltersForm } from 'src/dashboard/components/nativeFilters/types';
|
||||
import { getDefaultScopeValue } from 'src/dashboard/components/nativeFilters/FilterScope';
|
||||
|
||||
describe('ScopingTree', () => {
|
||||
const filterId = '1';
|
||||
const form = {
|
||||
getFieldValue: () => ({
|
||||
[filterId]: {
|
||||
scope: getDefaultScopeValue(),
|
||||
},
|
||||
}),
|
||||
};
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<ScopingTree
|
||||
filterId={filterId}
|
||||
initialScope={getDefaultScopeValue()}
|
||||
form={(form as unknown) as FormInstance<NativeFiltersForm>}
|
||||
/>
|
||||
</Provider>,
|
||||
);
|
||||
it('is valid', () => {
|
||||
expect(
|
||||
React.isValidElement(
|
||||
<ScopingTree
|
||||
filterId={filterId}
|
||||
initialScope={getDefaultScopeValue()}
|
||||
form={(form as unknown) as FormInstance<NativeFiltersForm>}
|
||||
/>,
|
||||
),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('renders a tree', () => {
|
||||
expect(wrapper.find('TreeNode')).toExist();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue