mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
test: Tests audit for the Dashboard FilterBar (#13916)
* Add FilterBar tests * Finalize FilterBar tests * Add tests for FilterBar Header * Add tests for FilterBar FilterConfigurationLink * Add tests for FilterBar FilterSets EditSection * Add tests for FilterBar FilterSets * Clean up * Add tests for FilterBar FilterSetUnit * Add tests for FilterBar FilterSets FiltersHeader * Add tests for FilterBar FilterSets Footer * Fix linting * Fix import * Fix minor changes * Fix import * Add factory and clean up
This commit is contained in:
parent
80da1ca995
commit
11869dc076
@ -1,50 +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 { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { Provider } from 'react-redux';
|
||||
import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar/FilterBar';
|
||||
import Button from 'src/components/Button';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
|
||||
describe('FilterBar', () => {
|
||||
const props = {
|
||||
filtersOpen: false,
|
||||
toggleFiltersBar: jest.fn(),
|
||||
};
|
||||
|
||||
const wrapper = mount(
|
||||
<Provider store={mockStore}>
|
||||
<FilterBar {...props} />
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
it('is a valid', () => {
|
||||
expect(React.isValidElement(<FilterBar {...props} />)).toBe(true);
|
||||
});
|
||||
it('has filter and collapse icons', () => {
|
||||
expect(wrapper.find({ name: 'filter' })).toExist();
|
||||
expect(wrapper.find({ name: 'collapse' })).toExist();
|
||||
});
|
||||
it('has apply and clear all buttons', () => {
|
||||
expect(wrapper.find(Button).length).toBe(2);
|
||||
expect(wrapper.find(Button).at(0)).toHaveProp('buttonStyle', 'tertiary');
|
||||
expect(wrapper.find(Button).at(1)).toHaveProp('buttonStyle', 'primary');
|
||||
});
|
||||
});
|
@ -19,8 +19,28 @@
|
||||
import { DataMaskStateWithId, DataMaskType } from 'src/dataMask/types';
|
||||
import { NativeFiltersState } from 'src/dashboard/reducers/types';
|
||||
|
||||
export const mockDataMaskInfo: DataMaskStateWithId = {
|
||||
[DataMaskType.CrossFilters]: {},
|
||||
[DataMaskType.OwnFilters]: {},
|
||||
[DataMaskType.NativeFilters]: {
|
||||
DefaultsID: {
|
||||
id: 'DefaultId',
|
||||
currentState: {
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const nativeFiltersInfo: NativeFiltersState = {
|
||||
filterSets: {},
|
||||
filterSets: {
|
||||
'set-id': {
|
||||
id: 'DefaultsID',
|
||||
name: 'Set name',
|
||||
nativeFilters: {},
|
||||
dataMask: mockDataMaskInfo,
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
DefaultsID: {
|
||||
cascadeParentIds: [],
|
||||
@ -49,16 +69,3 @@ export const nativeFiltersInfo: NativeFiltersState = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const mockDataMaskInfo: DataMaskStateWithId = {
|
||||
[DataMaskType.CrossFilters]: {},
|
||||
[DataMaskType.OwnFilters]: {},
|
||||
[DataMaskType.NativeFilters]: {
|
||||
DefaultsID: {
|
||||
id: 'DefaultId',
|
||||
currentState: {
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -49,7 +49,7 @@ import {
|
||||
DASHBOARD_ROOT_DEPTH,
|
||||
DashboardStandaloneMode,
|
||||
} from 'src/dashboard/util/constants';
|
||||
import FilterBar from '../nativeFilters/FilterBar/FilterBar';
|
||||
import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
|
||||
import { StickyVerticalBar } from '../StickyVerticalBar';
|
||||
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
|
||||
import { useFilters } from '../nativeFilters/FilterBar/state';
|
||||
|
@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { Provider } from 'react-redux';
|
||||
import FilterBar, { FiltersBarProps } from '.';
|
||||
|
||||
const createProps = () => ({
|
||||
filtersOpen: false,
|
||||
toggleFiltersBar: jest.fn(),
|
||||
});
|
||||
|
||||
const setup = (props: FiltersBarProps) => (
|
||||
<Provider store={mockStore}>
|
||||
<FilterBar {...props} />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(setup(mockedProps));
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Filters" heading', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Filters')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Clear all" option', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Clear all')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Apply" option', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Apply')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the collapse icon', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByRole('img', { name: 'collapse' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the filter icon', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByRole('img', { name: 'filter' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the filter control name', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('test')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should toggle', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
const collapse = screen.getByRole('img', { name: 'collapse' });
|
||||
expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
|
||||
userEvent.click(collapse);
|
||||
expect(mockedProps.toggleFiltersBar).toHaveBeenCalled();
|
||||
});
|
@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import FilterConfigurationLink from '.';
|
||||
|
||||
test('should render', () => {
|
||||
const { container } = render(
|
||||
<FilterConfigurationLink>Config link</FilterConfigurationLink>,
|
||||
{
|
||||
useRedux: true,
|
||||
},
|
||||
);
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the config link text', () => {
|
||||
render(<FilterConfigurationLink>Config link</FilterConfigurationLink>, {
|
||||
useRedux: true,
|
||||
});
|
||||
expect(screen.getByText('Config link')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the modal on click', () => {
|
||||
render(<FilterConfigurationLink>Config link</FilterConfigurationLink>, {
|
||||
useRedux: true,
|
||||
});
|
||||
const configLink = screen.getByText('Config link');
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
userEvent.click(configLink);
|
||||
expect(screen.getByRole('dialog')).toBeInTheDocument();
|
||||
});
|
@ -19,8 +19,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { setFilterConfiguration } from 'src/dashboard/actions/nativeFilters';
|
||||
import { FilterConfiguration } from '../types';
|
||||
import { FiltersConfigModal } from '../FiltersConfigModal/FiltersConfigModal';
|
||||
import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
|
||||
import { FiltersConfigModal } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal';
|
||||
|
||||
export interface FCBProps {
|
||||
createNewOnOpen?: boolean;
|
@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { Provider } from 'react-redux';
|
||||
import EditSection, { EditSectionProps } from './EditSection';
|
||||
|
||||
const createProps = () => ({
|
||||
filterSetId: 'set-id',
|
||||
dataMaskSelected: {
|
||||
DefaultsID: {
|
||||
currentState: {
|
||||
value: 'value',
|
||||
},
|
||||
},
|
||||
},
|
||||
onCancel: jest.fn(),
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const setup = (props: EditSectionProps) => (
|
||||
<Provider store={mockStore}>
|
||||
<EditSection {...props} />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(setup(mockedProps));
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the title', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Editing filter set:')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the set name', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Set name')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render a textbox', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByRole('textbox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should change the set name', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
const textbox = screen.getByRole('textbox');
|
||||
userEvent.clear(textbox);
|
||||
userEvent.type(textbox, 'New name');
|
||||
expect(textbox).toHaveValue('New name');
|
||||
});
|
||||
|
||||
test('should render the enter icon', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByRole('img', { name: 'enter' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the Cancel button', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Cancel')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should cancel', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
const cancelBtn = screen.getByText('Cancel');
|
||||
expect(mockedProps.onCancel).not.toHaveBeenCalled();
|
||||
userEvent.click(cancelBtn);
|
||||
expect(mockedProps.onCancel).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should render the Save button', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Save')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the Save button as disabled', () => {
|
||||
const mockedProps = createProps();
|
||||
const saveDisabledProps = {
|
||||
...mockedProps,
|
||||
disabled: true,
|
||||
};
|
||||
render(setup(saveDisabledProps));
|
||||
expect(screen.getByText('Save').parentElement).toBeDisabled();
|
||||
});
|
@ -58,7 +58,7 @@ const ActionButton = styled.div<{ disabled?: boolean }>`
|
||||
}
|
||||
`;
|
||||
|
||||
type EditSectionProps = {
|
||||
export type EditSectionProps = {
|
||||
filterSetId: string;
|
||||
dataMaskSelected: DataMaskUnit;
|
||||
onCancel: HandlerFunction;
|
||||
|
@ -0,0 +1,100 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { Provider } from 'react-redux';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import FilterSetUnit, { FilterSetUnitProps } from './FilterSetUnit';
|
||||
|
||||
const createProps = () => ({
|
||||
editMode: true,
|
||||
setFilterSetName: jest.fn(),
|
||||
onDelete: jest.fn(),
|
||||
onEdit: jest.fn(),
|
||||
onRebuild: jest.fn(),
|
||||
});
|
||||
|
||||
function openDropdown() {
|
||||
const dropdownIcon = screen.getByRole('img', { name: 'ellipsis' });
|
||||
userEvent.click(dropdownIcon);
|
||||
}
|
||||
|
||||
const setup = (props: FilterSetUnitProps) => (
|
||||
<Provider store={mockStore}>
|
||||
<FilterSetUnit {...props} />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(setup(mockedProps));
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the edit button', () => {
|
||||
const mockedProps = createProps();
|
||||
const editModeOffProps = {
|
||||
...mockedProps,
|
||||
editMode: false,
|
||||
};
|
||||
render(setup(editModeOffProps));
|
||||
expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the menu', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
openDropdown();
|
||||
expect(screen.getByRole('menu')).toBeInTheDocument();
|
||||
expect(screen.getAllByRole('menuitem')).toHaveLength(3);
|
||||
expect(screen.getByText('Edit')).toBeInTheDocument();
|
||||
expect(screen.getByText('Rebuild')).toBeInTheDocument();
|
||||
expect(screen.getByText('Delete')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should edit', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
openDropdown();
|
||||
const editBtn = screen.getByText('Edit');
|
||||
expect(mockedProps.onEdit).not.toHaveBeenCalled();
|
||||
userEvent.click(editBtn);
|
||||
expect(mockedProps.onEdit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should delete', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
openDropdown();
|
||||
const deleteBtn = screen.getByText('Delete');
|
||||
expect(mockedProps.onDelete).not.toHaveBeenCalled();
|
||||
userEvent.click(deleteBtn);
|
||||
expect(mockedProps.onDelete).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should rebuild', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
openDropdown();
|
||||
const rebuildBtn = screen.getByText('Rebuild');
|
||||
expect(mockedProps.onRebuild).not.toHaveBeenCalled();
|
||||
userEvent.click(rebuildBtn);
|
||||
expect(mockedProps.onRebuild).toHaveBeenCalled();
|
||||
});
|
@ -40,7 +40,7 @@ const IconsBlock = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
type FilterSetUnitProps = {
|
||||
export type FilterSetUnitProps = {
|
||||
editMode?: boolean;
|
||||
isApplied?: boolean;
|
||||
filterSet?: FilterSet;
|
||||
|
@ -0,0 +1,67 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { Provider } from 'react-redux';
|
||||
import FilterSets, { FilterSetsProps } from '.';
|
||||
|
||||
const createProps = () => ({
|
||||
disabled: false,
|
||||
isFilterSetChanged: false,
|
||||
dataMaskSelected: {
|
||||
DefaultsID: {
|
||||
currentState: {
|
||||
value: 'value',
|
||||
},
|
||||
},
|
||||
},
|
||||
onEditFilterSet: jest.fn(),
|
||||
onFilterSelectionChange: jest.fn(),
|
||||
});
|
||||
|
||||
const setup = (props: FilterSetsProps) => (
|
||||
<Provider store={mockStore}>
|
||||
<FilterSets {...props} />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(setup(mockedProps));
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the default title', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('New filter set')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the right number of filters', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Filters (1)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the filters', () => {
|
||||
const mockedProps = createProps();
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Set name')).toBeInTheDocument();
|
||||
});
|
@ -17,29 +17,38 @@
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { styledMount as mount } from 'spec/helpers/theming';
|
||||
import { Provider } from 'react-redux';
|
||||
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import { mockStore } from 'spec/fixtures/mockStore';
|
||||
import { Provider } from 'react-redux';
|
||||
import FiltersHeader, { FiltersHeaderProps } from './FiltersHeader';
|
||||
|
||||
describe('FilterConfigurationButton', () => {
|
||||
const mockedProps = {
|
||||
createNewOnOpen: false,
|
||||
dataMask: {
|
||||
DefaultsID: {
|
||||
currentState: {
|
||||
value: 'value',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
it('is valid', () => {
|
||||
expect(
|
||||
React.isValidElement(<FilterConfigurationLink {...mockedProps} />),
|
||||
).toBe(true);
|
||||
});
|
||||
it('takes in children', () => {
|
||||
const wrapper = mount(
|
||||
const setup = (props: FiltersHeaderProps) => (
|
||||
<Provider store={mockStore}>
|
||||
<FilterConfigurationLink {...mockedProps}>
|
||||
{' '}
|
||||
<span>Test</span>
|
||||
</FilterConfigurationLink>
|
||||
</Provider>,
|
||||
<FiltersHeader {...props} />
|
||||
</Provider>
|
||||
);
|
||||
expect(wrapper.find('span')).toHaveLength(1);
|
||||
|
||||
test('should render', () => {
|
||||
const { container } = render(setup(mockedProps));
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the right number of filters', () => {
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('Filters (1)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the name and value', () => {
|
||||
render(setup(mockedProps));
|
||||
expect(screen.getByText('test:')).toBeInTheDocument();
|
||||
expect(screen.getByText('value')).toBeInTheDocument();
|
||||
});
|
@ -54,7 +54,7 @@ const StyledCollapse = styled(Collapse)`
|
||||
}
|
||||
`;
|
||||
|
||||
type FiltersHeaderProps = {
|
||||
export type FiltersHeaderProps = {
|
||||
dataMask?: DataMaskUnit;
|
||||
filterSet?: FilterSet;
|
||||
};
|
||||
@ -93,8 +93,9 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
|
||||
t('Filter metadata changed in dashboard. It will not be applied.'))
|
||||
}
|
||||
placement="bottomLeft"
|
||||
key={id}
|
||||
>
|
||||
<div>
|
||||
<div data-test="filter-info">
|
||||
<Typography.Text strong delete={removedFilter} mark={changedFilter}>
|
||||
{name}:
|
||||
</Typography.Text>
|
||||
|
@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 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 userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from 'spec/helpers/testing-library';
|
||||
import Footer from './Footer';
|
||||
|
||||
const createProps = () => ({
|
||||
filterSetName: 'Set name',
|
||||
disabled: false,
|
||||
editMode: false,
|
||||
onCancel: jest.fn(),
|
||||
onEdit: jest.fn(),
|
||||
onCreate: jest.fn(),
|
||||
});
|
||||
|
||||
const editModeProps = {
|
||||
...createProps(),
|
||||
editMode: true,
|
||||
};
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(<Footer {...mockedProps} />, { useRedux: true });
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render a button', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Footer {...mockedProps} />, { useRedux: true });
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
expect(screen.getByText('Create new filter set')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render a disabled button', () => {
|
||||
const mockedProps = createProps();
|
||||
const disabledProps = {
|
||||
...mockedProps,
|
||||
disabled: true,
|
||||
};
|
||||
render(<Footer {...disabledProps} />, { useRedux: true });
|
||||
expect(screen.getByRole('button')).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should edit', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Footer {...mockedProps} />, { useRedux: true });
|
||||
const btn = screen.getByRole('button');
|
||||
expect(mockedProps.onEdit).not.toHaveBeenCalled();
|
||||
userEvent.click(btn);
|
||||
expect(mockedProps.onEdit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should render the Create button', () => {
|
||||
render(<Footer {...editModeProps} />, { useRedux: true });
|
||||
expect(screen.getByText('Create')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should create', () => {
|
||||
render(<Footer {...editModeProps} />, { useRedux: true });
|
||||
const createBtn = screen.getByText('Create');
|
||||
expect(editModeProps.onCreate).not.toHaveBeenCalled();
|
||||
userEvent.click(createBtn);
|
||||
expect(editModeProps.onCreate).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should render the Cancel button', () => {
|
||||
render(<Footer {...editModeProps} />, { useRedux: true });
|
||||
expect(screen.getByText('Cancel')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should cancel', () => {
|
||||
render(<Footer {...editModeProps} />, { useRedux: true });
|
||||
const cancelBtn = screen.getByText('Cancel');
|
||||
expect(editModeProps.onCancel).not.toHaveBeenCalled();
|
||||
userEvent.click(cancelBtn);
|
||||
expect(editModeProps.onCancel).toHaveBeenCalled();
|
||||
});
|
@ -23,7 +23,7 @@ import { Tooltip } from 'src/common/components/Tooltip';
|
||||
import { APPLY_FILTERS_HINT } from './utils';
|
||||
import { useFilterSetNameDuplicated } from './state';
|
||||
|
||||
type FooterProps = {
|
||||
export type FooterProps = {
|
||||
filterSetName: string;
|
||||
disabled: boolean;
|
||||
editMode: boolean;
|
||||
|
@ -61,7 +61,7 @@ const FilterSetUnitWrapper = styled.div<{
|
||||
`background: ${selected ? theme.colors.primary.light5 : 'transparent'}`};
|
||||
`;
|
||||
|
||||
type FilterSetsProps = {
|
||||
export type FilterSetsProps = {
|
||||
disabled: boolean;
|
||||
isFilterSetChanged: boolean;
|
||||
dataMaskSelected: DataMaskUnit;
|
||||
@ -253,6 +253,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
|
||||
onClick={(e: MouseEvent<HTMLElement>) =>
|
||||
takeFilterSet(filterSet.id, e.target as HTMLElement)
|
||||
}
|
||||
key={filterSet.id}
|
||||
>
|
||||
<FilterSetUnit
|
||||
isApplied={filterSet.id === selectedFiltersSetId && !disabled}
|
@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 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 { render, screen } from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import Header from './index';
|
||||
|
||||
const createProps = () => ({
|
||||
toggleFiltersBar: jest.fn(),
|
||||
onApply: jest.fn(),
|
||||
setDataMaskSelected: jest.fn(),
|
||||
dataMaskSelected: {
|
||||
DefaultsID: {
|
||||
currentState: {
|
||||
value: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
dataMaskApplied: {
|
||||
DefaultsID: {
|
||||
id: 'DefaultsID',
|
||||
currentState: {
|
||||
value: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
isApplyDisabled: false,
|
||||
});
|
||||
|
||||
test('should render', () => {
|
||||
const mockedProps = createProps();
|
||||
const { container } = render(<Header {...mockedProps} />, { useRedux: true });
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Filters" heading', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
expect(screen.getByText('Filters')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Clear all" option', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
expect(screen.getByText('Clear all')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the "Apply" button', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
expect(screen.getByText('Apply')).toBeInTheDocument();
|
||||
expect(screen.getByText('Apply').parentElement).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should render the "Clear all" button as disabled', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
const clearBtn = screen.getByText('Clear all');
|
||||
expect(clearBtn.parentElement).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should render the "Apply" button as disabled', () => {
|
||||
const mockedProps = createProps();
|
||||
const applyDisabledProps = {
|
||||
...mockedProps,
|
||||
isApplyDisabled: true,
|
||||
};
|
||||
render(<Header {...applyDisabledProps} />, { useRedux: true });
|
||||
const applyBtn = screen.getByText('Apply');
|
||||
expect(applyBtn.parentElement).toBeDisabled();
|
||||
userEvent.click(applyBtn);
|
||||
expect(mockedProps.onApply).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should apply', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
const applyBtn = screen.getByText('Apply');
|
||||
expect(mockedProps.onApply).not.toHaveBeenCalled();
|
||||
userEvent.click(applyBtn);
|
||||
expect(mockedProps.onApply).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('should render the expand button', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
expect(screen.getByRole('button', { name: 'expand' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should toggle', () => {
|
||||
const mockedProps = createProps();
|
||||
render(<Header {...mockedProps} />, { useRedux: true });
|
||||
const expandBtn = screen.getByRole('button', { name: 'expand' });
|
||||
expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
|
||||
userEvent.click(expandBtn);
|
||||
expect(mockedProps.toggleFiltersBar).toHaveBeenCalled();
|
||||
});
|
@ -24,9 +24,9 @@ import Button from 'src/components/Button';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getInitialMask } from 'src/dataMask/reducer';
|
||||
import { DataMaskUnit, DataMaskUnitWithId } from 'src/dataMask/types';
|
||||
import FilterConfigurationLink from './FilterConfigurationLink';
|
||||
import { useFilters } from './state';
|
||||
import { Filter } from '../types';
|
||||
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
|
||||
import { useFilters } from 'src/dashboard/components/nativeFilters/FilterBar/state';
|
||||
import { Filter } from 'src/dashboard/components/nativeFilters/types';
|
||||
|
||||
const TitleArea = styled.h4`
|
||||
display: flex;
|
@ -29,9 +29,9 @@ import { updateDataMask } from 'src/dataMask/actions';
|
||||
import { DataMaskState, DataMaskUnit } from 'src/dataMask/types';
|
||||
import { useImmer } from 'use-immer';
|
||||
import { areObjectsEqual } from 'src/reduxUtils';
|
||||
import { Filter } from '../types';
|
||||
import { Filter } from 'src/dashboard/components/nativeFilters/types';
|
||||
import { mapParentFiltersToChildren, TabIds } from './utils';
|
||||
import FilterSets from './FilterSets/FilterSets';
|
||||
import FilterSets from './FilterSets';
|
||||
import {
|
||||
useDataMask,
|
||||
useFilters,
|
||||
@ -138,7 +138,7 @@ const StyledTabs = styled(Tabs)`
|
||||
}
|
||||
`;
|
||||
|
||||
interface FiltersBarProps {
|
||||
export interface FiltersBarProps {
|
||||
filtersOpen: boolean;
|
||||
toggleFiltersBar: any;
|
||||
directPathToChild?: string[];
|
Loading…
Reference in New Issue
Block a user