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 { DataMaskStateWithId, DataMaskType } from 'src/dataMask/types';
|
||||||
import { NativeFiltersState } from 'src/dashboard/reducers/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 = {
|
export const nativeFiltersInfo: NativeFiltersState = {
|
||||||
filterSets: {},
|
filterSets: {
|
||||||
|
'set-id': {
|
||||||
|
id: 'DefaultsID',
|
||||||
|
name: 'Set name',
|
||||||
|
nativeFilters: {},
|
||||||
|
dataMask: mockDataMaskInfo,
|
||||||
|
},
|
||||||
|
},
|
||||||
filters: {
|
filters: {
|
||||||
DefaultsID: {
|
DefaultsID: {
|
||||||
cascadeParentIds: [],
|
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,
|
DASHBOARD_ROOT_DEPTH,
|
||||||
DashboardStandaloneMode,
|
DashboardStandaloneMode,
|
||||||
} from 'src/dashboard/util/constants';
|
} from 'src/dashboard/util/constants';
|
||||||
import FilterBar from '../nativeFilters/FilterBar/FilterBar';
|
import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
|
||||||
import { StickyVerticalBar } from '../StickyVerticalBar';
|
import { StickyVerticalBar } from '../StickyVerticalBar';
|
||||||
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
|
import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
|
||||||
import { useFilters } from '../nativeFilters/FilterBar/state';
|
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 React, { useState } from 'react';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { setFilterConfiguration } from 'src/dashboard/actions/nativeFilters';
|
import { setFilterConfiguration } from 'src/dashboard/actions/nativeFilters';
|
||||||
import { FilterConfiguration } from '../types';
|
import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
|
||||||
import { FiltersConfigModal } from '../FiltersConfigModal/FiltersConfigModal';
|
import { FiltersConfigModal } from 'src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal';
|
||||||
|
|
||||||
export interface FCBProps {
|
export interface FCBProps {
|
||||||
createNewOnOpen?: boolean;
|
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;
|
filterSetId: string;
|
||||||
dataMaskSelected: DataMaskUnit;
|
dataMaskSelected: DataMaskUnit;
|
||||||
onCancel: HandlerFunction;
|
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;
|
editMode?: boolean;
|
||||||
isApplied?: boolean;
|
isApplied?: boolean;
|
||||||
filterSet?: FilterSet;
|
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.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { styledMount as mount } from 'spec/helpers/theming';
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
|
|
||||||
import { mockStore } from 'spec/fixtures/mockStore';
|
import { mockStore } from 'spec/fixtures/mockStore';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
|
import FiltersHeader, { FiltersHeaderProps } from './FiltersHeader';
|
||||||
|
|
||||||
describe('FilterConfigurationButton', () => {
|
const mockedProps = {
|
||||||
const mockedProps = {
|
dataMask: {
|
||||||
createNewOnOpen: false,
|
DefaultsID: {
|
||||||
};
|
currentState: {
|
||||||
it('is valid', () => {
|
value: 'value',
|
||||||
expect(
|
},
|
||||||
React.isValidElement(<FilterConfigurationLink {...mockedProps} />),
|
},
|
||||||
).toBe(true);
|
},
|
||||||
});
|
};
|
||||||
it('takes in children', () => {
|
const setup = (props: FiltersHeaderProps) => (
|
||||||
const wrapper = mount(
|
<Provider store={mockStore}>
|
||||||
<Provider store={mockStore}>
|
<FiltersHeader {...props} />
|
||||||
<FilterConfigurationLink {...mockedProps}>
|
</Provider>
|
||||||
{' '}
|
);
|
||||||
<span>Test</span>
|
|
||||||
</FilterConfigurationLink>
|
test('should render', () => {
|
||||||
</Provider>,
|
const { container } = render(setup(mockedProps));
|
||||||
);
|
expect(container).toBeInTheDocument();
|
||||||
expect(wrapper.find('span')).toHaveLength(1);
|
});
|
||||||
});
|
|
||||||
|
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;
|
dataMask?: DataMaskUnit;
|
||||||
filterSet?: FilterSet;
|
filterSet?: FilterSet;
|
||||||
};
|
};
|
||||||
@ -93,8 +93,9 @@ const FiltersHeader: FC<FiltersHeaderProps> = ({ dataMask, filterSet }) => {
|
|||||||
t('Filter metadata changed in dashboard. It will not be applied.'))
|
t('Filter metadata changed in dashboard. It will not be applied.'))
|
||||||
}
|
}
|
||||||
placement="bottomLeft"
|
placement="bottomLeft"
|
||||||
|
key={id}
|
||||||
>
|
>
|
||||||
<div>
|
<div data-test="filter-info">
|
||||||
<Typography.Text strong delete={removedFilter} mark={changedFilter}>
|
<Typography.Text strong delete={removedFilter} mark={changedFilter}>
|
||||||
{name}:
|
{name}:
|
||||||
</Typography.Text>
|
</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 { APPLY_FILTERS_HINT } from './utils';
|
||||||
import { useFilterSetNameDuplicated } from './state';
|
import { useFilterSetNameDuplicated } from './state';
|
||||||
|
|
||||||
type FooterProps = {
|
export type FooterProps = {
|
||||||
filterSetName: string;
|
filterSetName: string;
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
editMode: boolean;
|
editMode: boolean;
|
||||||
|
@ -61,7 +61,7 @@ const FilterSetUnitWrapper = styled.div<{
|
|||||||
`background: ${selected ? theme.colors.primary.light5 : 'transparent'}`};
|
`background: ${selected ? theme.colors.primary.light5 : 'transparent'}`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type FilterSetsProps = {
|
export type FilterSetsProps = {
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
isFilterSetChanged: boolean;
|
isFilterSetChanged: boolean;
|
||||||
dataMaskSelected: DataMaskUnit;
|
dataMaskSelected: DataMaskUnit;
|
||||||
@ -253,6 +253,7 @@ const FilterSets: React.FC<FilterSetsProps> = ({
|
|||||||
onClick={(e: MouseEvent<HTMLElement>) =>
|
onClick={(e: MouseEvent<HTMLElement>) =>
|
||||||
takeFilterSet(filterSet.id, e.target as HTMLElement)
|
takeFilterSet(filterSet.id, e.target as HTMLElement)
|
||||||
}
|
}
|
||||||
|
key={filterSet.id}
|
||||||
>
|
>
|
||||||
<FilterSetUnit
|
<FilterSetUnit
|
||||||
isApplied={filterSet.id === selectedFiltersSetId && !disabled}
|
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 { useSelector } from 'react-redux';
|
||||||
import { getInitialMask } from 'src/dataMask/reducer';
|
import { getInitialMask } from 'src/dataMask/reducer';
|
||||||
import { DataMaskUnit, DataMaskUnitWithId } from 'src/dataMask/types';
|
import { DataMaskUnit, DataMaskUnitWithId } from 'src/dataMask/types';
|
||||||
import FilterConfigurationLink from './FilterConfigurationLink';
|
import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
|
||||||
import { useFilters } from './state';
|
import { useFilters } from 'src/dashboard/components/nativeFilters/FilterBar/state';
|
||||||
import { Filter } from '../types';
|
import { Filter } from 'src/dashboard/components/nativeFilters/types';
|
||||||
|
|
||||||
const TitleArea = styled.h4`
|
const TitleArea = styled.h4`
|
||||||
display: flex;
|
display: flex;
|
@ -29,9 +29,9 @@ import { updateDataMask } from 'src/dataMask/actions';
|
|||||||
import { DataMaskState, DataMaskUnit } from 'src/dataMask/types';
|
import { DataMaskState, DataMaskUnit } from 'src/dataMask/types';
|
||||||
import { useImmer } from 'use-immer';
|
import { useImmer } from 'use-immer';
|
||||||
import { areObjectsEqual } from 'src/reduxUtils';
|
import { areObjectsEqual } from 'src/reduxUtils';
|
||||||
import { Filter } from '../types';
|
import { Filter } from 'src/dashboard/components/nativeFilters/types';
|
||||||
import { mapParentFiltersToChildren, TabIds } from './utils';
|
import { mapParentFiltersToChildren, TabIds } from './utils';
|
||||||
import FilterSets from './FilterSets/FilterSets';
|
import FilterSets from './FilterSets';
|
||||||
import {
|
import {
|
||||||
useDataMask,
|
useDataMask,
|
||||||
useFilters,
|
useFilters,
|
||||||
@ -138,7 +138,7 @@ const StyledTabs = styled(Tabs)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface FiltersBarProps {
|
export interface FiltersBarProps {
|
||||||
filtersOpen: boolean;
|
filtersOpen: boolean;
|
||||||
toggleFiltersBar: any;
|
toggleFiltersBar: any;
|
||||||
directPathToChild?: string[];
|
directPathToChild?: string[];
|
Loading…
Reference in New Issue
Block a user