External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-13 20:37:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

fix issues with unit tests based on search changes

Browse Source
This commit is contained in:
John Mitchell
2019-12-18 17:03:01 -05:00
parent 2c953ed7d0
commit 2c1648f9c9
8 changed files with 120 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -7,7 +7,7 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import styled from 'styled-components'; import styled from 'styled-components';
import { SearchIcon } from '@patternfly/react-icons'; import { SearchIcon } from '@patternfly/react-icons';
import { DataToolbarGroup, DataToolbarToggleGroup, DataToolbarItem } from '@patternfly/react-core/dist/esm/experimental'; import { DataToolbar, DataToolbarContent, DataToolbarGroup, DataToolbarToggleGroup, DataToolbarItem } from '@patternfly/react-core/dist/umd/experimental';
import ExpandCollapse from '../ExpandCollapse'; import ExpandCollapse from '../ExpandCollapse';
import Search from '../Search'; import Search from '../Search';
import Sort from '../Sort'; import Sort from '../Sort';
@@ -40,6 +40,7 @@ const DataToolbarSeparator = styled(DataToolbarItem)`
class DataListToolbar extends React.Component { class DataListToolbar extends React.Component {
render() { render() {
const { const {
clearAllFilters,
searchColumns, searchColumns,
sortColumns, sortColumns,
showSelectAll, showSelectAll,
@@ -59,64 +60,70 @@ class DataListToolbar extends React.Component {
const showExpandCollapse = onCompact && onExpand; const showExpandCollapse = onCompact && onExpand;
return ( return (
<Fragment> <DataToolbar id={`${qsConfig.namespace}-list-toolbar`}
{showSelectAll && ( clearAllFilters={clearAllFilters}
<DataToolbarGroup> collapseListedFiltersBreakpoint="xl"
<DataToolbarItem> >
<Checkbox <DataToolbarContent>
isChecked={isAllSelected} {showSelectAll && (
onChange={onSelectAll} <DataToolbarGroup>
aria-label={i18n._(t`Select all`)}
id="select-all"
/>
</DataToolbarItem>
<DataToolbarSeparator variant="separator" />
</DataToolbarGroup>
)}
<DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="xl">
<DataToolbarItem>
<Search
qsConfig={qsConfig}
columns={searchColumns}
onSearch={onSearch}
onReplaceSearch={onReplaceSearch}
onRemove={onRemove}
/>
</DataToolbarItem>
<DataToolbarItem>
<Sort
qsConfig={qsConfig}
columns={sortColumns}
onSort={onSort}
/>
</DataToolbarItem>
</DataToolbarToggleGroup>
<DataToolbarGroup>
{showExpandCollapse && (
<Fragment>
<DataToolbarItem> <DataToolbarItem>
<ExpandCollapse <Checkbox
isCompact={isCompact} isChecked={isAllSelected}
onCompact={onCompact} onChange={onSelectAll}
onExpand={onExpand} aria-label={i18n._(t`Select all`)}
id="select-all"
/> />
</DataToolbarItem> </DataToolbarItem>
</Fragment> <DataToolbarSeparator variant="separator" />
</DataToolbarGroup>
)} )}
</DataToolbarGroup> <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="xl">
<AdditionalControlsDataToolbarGroup> <DataToolbarItem>
<DataToolbarItem> <Search
<AdditionalControlsWrapper> qsConfig={qsConfig}
{additionalControls} columns={searchColumns}
</AdditionalControlsWrapper> onSearch={onSearch}
</DataToolbarItem> onReplaceSearch={onReplaceSearch}
</AdditionalControlsDataToolbarGroup> onRemove={onRemove}
</Fragment> />
</DataToolbarItem>
<DataToolbarItem>
<Sort
qsConfig={qsConfig}
columns={sortColumns}
onSort={onSort}
/>
</DataToolbarItem>
</DataToolbarToggleGroup>
<DataToolbarGroup>
{showExpandCollapse && (
<Fragment>
<DataToolbarItem>
<ExpandCollapse
isCompact={isCompact}
onCompact={onCompact}
onExpand={onExpand}
/>
</DataToolbarItem>
</Fragment>
)}
</DataToolbarGroup>
<AdditionalControlsDataToolbarGroup>
<DataToolbarItem>
<AdditionalControlsWrapper>
{additionalControls}
</AdditionalControlsWrapper>
</DataToolbarItem>
</AdditionalControlsDataToolbarGroup>
</DataToolbarContent>
</DataToolbar>
); );
} }
} }
DataListToolbar.propTypes = { DataListToolbar.propTypes = {
clearAllFilters: PropTypes.func,
qsConfig: QSConfig.isRequired, qsConfig: QSConfig.isRequired,
searchColumns: SearchColumns.isRequired, searchColumns: SearchColumns.isRequired,
sortColumns: SortColumns.isRequired, sortColumns: SortColumns.isRequired,
@@ -133,6 +140,7 @@ DataListToolbar.propTypes = {
}; };
DataListToolbar.defaultProps = { DataListToolbar.defaultProps = {
clearAllFilters: null,
showSelectAll: false, showSelectAll: false,
isAllSelected: false, isAllSelected: false,
isCompact: false, isCompact: false,

4
awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
View File

@@ -20,6 +20,7 @@ describe('<DataListToolbar />', () => {
}); });
const onSearch = jest.fn(); const onSearch = jest.fn();
const onReplaceSearch = jest.fn();
const onSort = jest.fn(); const onSort = jest.fn();
const onSelectAll = jest.fn(); const onSelectAll = jest.fn();
@@ -43,6 +44,7 @@ describe('<DataListToolbar />', () => {
searchColumns={searchColumns} searchColumns={searchColumns}
sortColumns={sortColumns} sortColumns={sortColumns}
onSearch={onSearch} onSearch={onSearch}
onReplaceSearch={onReplaceSearch}
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
showSelectAll showSelectAll
@@ -259,6 +261,7 @@ describe('<DataListToolbar />', () => {
searchColumns={searchColumns} searchColumns={searchColumns}
sortColumns={sortColumns} sortColumns={sortColumns}
onSearch={onSearch} onSearch={onSearch}
onReplaceSearch={onReplaceSearch}
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
additionalControls={[ additionalControls={[
@@ -289,6 +292,7 @@ describe('<DataListToolbar />', () => {
searchColumns={searchColumns} searchColumns={searchColumns}
sortColumns={sortColumns} sortColumns={sortColumns}
onSearch={onSearch} onSearch={onSearch}
onReplaceSearch={onReplaceSearch}
onSort={onSort} onSort={onSort}
onSelectAll={onSelectAll} onSelectAll={onSelectAll}
showSelectAll showSelectAll

30
awx/ui_next/src/components/ListHeader/ListHeader.jsx
View File

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { DataToolbar, DataToolbarContent } from '@patternfly/react-core/dist/esm/experimental'; import { DataToolbar, DataToolbarContent } from '@patternfly/react-core/dist/umd/experimental';
import DataListToolbar from '@components/DataListToolbar'; import DataListToolbar from '@components/DataListToolbar';
import { import {
@@ -105,22 +105,18 @@ class ListHeader extends React.Component {
</DataToolbarContent> </DataToolbarContent>
</DataToolbar> </DataToolbar>
) : ( ) : (
<DataToolbar id={`${qsConfig.namespace}-list-toolbar`} <Fragment>
clearAllFilters={this.handleRemoveAll} {renderToolbar({
collapseListedFiltersBreakpoint="xl" searchColumns,
> sortColumns,
<DataToolbarContent> onSearch: this.handleSearch,
{renderToolbar({ onReplaceSearch: this.handleReplaceSearch,
searchColumns, onSort: this.handleSort,
sortColumns, onRemove: this.handleRemove,
onSearch: this.handleSearch, clearAllFilters: this.handleRemoveAll,
onReplaceSearch: this.handleReplaceSearch, qsConfig,
onSort: this.handleSort, })}
onRemove: this.handleRemove, </Fragment>
qsConfig,
})}
</DataToolbarContent>
</DataToolbar>
)} )}
</Fragment> </Fragment>
); );

6
awx/ui_next/src/components/Search/Search.jsx
View File

@@ -20,7 +20,7 @@ import {
DataToolbarGroup, DataToolbarGroup,
DataToolbarItem, DataToolbarItem,
DataToolbarFilter DataToolbarFilter
} from '@patternfly/react-core/dist/esm/experimental'; } from '@patternfly/react-core/dist/umd/experimental';
import { SearchIcon } from '@patternfly/react-icons'; import { SearchIcon } from '@patternfly/react-icons';
import { parseQueryString } from '@util/qs'; import { parseQueryString } from '@util/qs';
import { QSConfig, SearchColumns } from '@types'; import { QSConfig, SearchColumns } from '@types';
@@ -135,7 +135,7 @@ class Search extends React.Component {
)); ));
const filterDefaultParams = (paramsArr, config) => { const filterDefaultParams = (paramsArr, config) => {
const defaultParamsKeys = Object.keys(config.defaultParams); const defaultParamsKeys = Object.keys(config.defaultParams || {});
return paramsArr.filter(key => defaultParamsKeys.indexOf(key) === -1); return paramsArr.filter(key => defaultParamsKeys.indexOf(key) === -1);
}; };
@@ -147,7 +147,7 @@ class Search extends React.Component {
queryParamsByKey[key] = {key, label: name, chips: []}; queryParamsByKey[key] = {key, label: name, chips: []};
}); });
const nonDefaultParams = filterDefaultParams( const nonDefaultParams = filterDefaultParams(
Object.keys(queryParams), Object.keys(queryParams || {}),
qsConfig qsConfig
); );

54
awx/ui_next/src/components/Search/Search.test.jsx
View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { DataToolbar, DataToolbarContent } from '@patternfly/react-core/dist/umd/experimental';
import { mountWithContexts } from '../../../testUtils/enzymeHelpers'; import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import Search from './Search'; import Search from './Search';
@@ -8,7 +9,7 @@ describe('<Search />', () => {
const QS_CONFIG = { const QS_CONFIG = {
namespace: 'organization', namespace: 'organization',
dateFields: ['modified', 'created'], dateFields: ['modified', 'created'],
defaulkntParams: { page: 1, page_size: 5, order_by: 'name' }, defaultParams: { page: 1, page_size: 5, order_by: 'name' },
integerFields: ['page', 'page_size'], integerFields: ['page', 'page_size'],
}; };
@@ -29,11 +30,18 @@ describe('<Search />', () => {
const onSearch = jest.fn(); const onSearch = jest.fn();
search = mountWithContexts( search = mountWithContexts(
<Search <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
qsConfig={QS_CONFIG} clearAllFilters={() => {}}
columns={columns} collapseListedFiltersBreakpoint="md"
onSearch={onSearch} >
/> <DataToolbarContent>
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
/>
</DataToolbarContent>
</DataToolbar>
); );
search.find(searchTextInput).instance().value = 'test-321'; search.find(searchTextInput).instance().value = 'test-321';
@@ -50,11 +58,18 @@ describe('<Search />', () => {
]; ];
const onSearch = jest.fn(); const onSearch = jest.fn();
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<Search <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
qsConfig={QS_CONFIG} clearAllFilters={() => {}}
columns={columns} collapseListedFiltersBreakpoint="md"
onSearch={onSearch} >
/> <DataToolbarContent>
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
/>
</DataToolbarContent>
</DataToolbar>
).find('Search'); ).find('Search');
expect(wrapper.state('isSearchDropdownOpen')).toEqual(false); expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
wrapper.instance().handleDropdownToggle(true); wrapper.instance().handleDropdownToggle(true);
@@ -68,11 +83,18 @@ describe('<Search />', () => {
]; ];
const onSearch = jest.fn(); const onSearch = jest.fn();
const wrapper = mountWithContexts( const wrapper = mountWithContexts(
<Search <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
qsConfig={QS_CONFIG} clearAllFilters={() => {}}
columns={columns} collapseListedFiltersBreakpoint="md"
onSearch={onSearch} >
/> <DataToolbarContent>
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
/>
</DataToolbarContent>
</DataToolbar>
).find('Search'); ).find('Search');
expect(wrapper.state('searchKey')).toEqual('name'); expect(wrapper.state('searchKey')).toEqual('name');
wrapper wrapper

2
awx/ui_next/src/components/Sort/Sort.jsx
View File

@@ -150,7 +150,7 @@ class Sort extends React.Component {
)} )}
<Button <Button
variant={ButtonVariant.control} variant={ButtonVariant.control}
aria-label={i18n._(t`Reverse Sort Order`)} aria-label={i18n._(t`Sort`)}
onClick={this.handleSort} onClick={this.handleSort}
> >
<SortIcon /> <SortIcon />

4
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
View File

@@ -161,7 +161,7 @@ describe('<InventoryGroupsList />', () => {
}); });
wrapper.update(); wrapper.update();
await act(async () => { await act(async () => {
wrapper.find('Toolbar Button[aria-label="Delete"]').invoke('onClick')(); wrapper.find('DataToolbar Button[aria-label="Delete"]').invoke('onClick')();
}); });
await waitForElement( await waitForElement(
wrapper, wrapper,
@@ -193,7 +193,7 @@ describe('<InventoryGroupsList />', () => {
}); });
wrapper.update(); wrapper.update();
await act(async () => { await act(async () => {
wrapper.find('Toolbar Button[aria-label="Delete"]').invoke('onClick')(); wrapper.find('DataToolbar Button[aria-label="Delete"]').invoke('onClick')();
}); });
await waitForElement( await waitForElement(
wrapper, wrapper,

16
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
View File

@@ -125,28 +125,12 @@ function OrganizationsList({ i18n }) {
key: 'name', key: 'name',
isDefault: true isDefault: true
}, },
{
name: i18n._(t`Modified`),
key: 'modified',
},
{
name: i18n._(t`Created`),
key: 'created',
},
]} ]}
toolbarSortColumns={[ toolbarSortColumns={[
{ {
name: i18n._(t`Name`), name: i18n._(t`Name`),
key: 'name', key: 'name',
}, },
{
name: i18n._(t`Modified`),
key: 'modified',
},
{
name: i18n._(t`Created`),
key: 'created',
},
]} ]}
renderToolbar={props => ( renderToolbar={props => (
<DataListToolbar <DataListToolbar