fix issues with unit tests based on search changes

2026-01-19 13:41:28 -03:30 · 2019-12-18 17:03:01 -05:00 · 2019-12-18 17:03:01 -05:00 · 2c1648f9c9
commit 2c1648f9c9
parent 2c953ed7d0
8 changed files with 120 additions and 106 deletions
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@ -7,7 +7,7 @@ import {
 } from '@patternfly/react-core';
 import styled from 'styled-components';
 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 Search from '../Search';
 import Sort from '../Sort';
@ -40,6 +40,7 @@ const DataToolbarSeparator = styled(DataToolbarItem)`
 class DataListToolbar extends React.Component {
  render() {
    const {
+      clearAllFilters,
      searchColumns,
      sortColumns,
      showSelectAll,
@ -59,64 +60,70 @@ class DataListToolbar extends React.Component {

    const showExpandCollapse = onCompact && onExpand;
    return (
-      <Fragment>
-        {showSelectAll && (
-          <DataToolbarGroup>
-            <DataToolbarItem>
-              <Checkbox
-                isChecked={isAllSelected}
-                onChange={onSelectAll}
-                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>
+      <DataToolbar id={`${qsConfig.namespace}-list-toolbar`}
+        clearAllFilters={clearAllFilters}
+        collapseListedFiltersBreakpoint="xl"
+      >
+        <DataToolbarContent>
+          {showSelectAll && (
+            <DataToolbarGroup>
              <DataToolbarItem>
-                <ExpandCollapse
-                  isCompact={isCompact}
-                  onCompact={onCompact}
-                  onExpand={onExpand}
+                <Checkbox
+                  isChecked={isAllSelected}
+                  onChange={onSelectAll}
+                  aria-label={i18n._(t`Select all`)}
+                  id="select-all"
                />
              </DataToolbarItem>
-            </Fragment>
+              <DataToolbarSeparator variant="separator" />
+            </DataToolbarGroup>
          )}
-        </DataToolbarGroup>
-        <AdditionalControlsDataToolbarGroup>
-          <DataToolbarItem>
-            <AdditionalControlsWrapper>
-              {additionalControls}
-            </AdditionalControlsWrapper>
-          </DataToolbarItem>
-        </AdditionalControlsDataToolbarGroup>
-      </Fragment>
+          <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>
+                  <ExpandCollapse
+                    isCompact={isCompact}
+                    onCompact={onCompact}
+                    onExpand={onExpand}
+                  />
+                </DataToolbarItem>
+              </Fragment>
+            )}
+          </DataToolbarGroup>
+          <AdditionalControlsDataToolbarGroup>
+            <DataToolbarItem>
+              <AdditionalControlsWrapper>
+                {additionalControls}
+              </AdditionalControlsWrapper>
+            </DataToolbarItem>
+          </AdditionalControlsDataToolbarGroup>
+        </DataToolbarContent>
+      </DataToolbar>
    );
  }
 }

 DataListToolbar.propTypes = {
+  clearAllFilters: PropTypes.func,
  qsConfig: QSConfig.isRequired,
  searchColumns: SearchColumns.isRequired,
  sortColumns: SortColumns.isRequired,
@ -133,6 +140,7 @@ DataListToolbar.propTypes = {
 };

 DataListToolbar.defaultProps = {
+  clearAllFilters: null,
  showSelectAll: false,
  isAllSelected: false,
  isCompact: false,
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@ -20,10 +20,11 @@ describe('<DataListToolbar />', () => {
  });

  const onSearch = jest.fn();
+  const onReplaceSearch = jest.fn();
  const onSort = jest.fn();
  const onSelectAll = jest.fn();

-  test('it triggers the expected callbacks', () => {  
+  test('it triggers the expected callbacks', () => {
    const searchColumns = [
      { name: 'Name', key: 'name', isDefault: true }
    ];
@ -43,6 +44,7 @@ describe('<DataListToolbar />', () => {
        searchColumns={searchColumns}
        sortColumns={sortColumns}
        onSearch={onSearch}
+        onReplaceSearch={onReplaceSearch}
        onSort={onSort}
        onSelectAll={onSelectAll}
        showSelectAll
@ -259,6 +261,7 @@ describe('<DataListToolbar />', () => {
        searchColumns={searchColumns}
        sortColumns={sortColumns}
        onSearch={onSearch}
+        onReplaceSearch={onReplaceSearch}
        onSort={onSort}
        onSelectAll={onSelectAll}
        additionalControls={[
@ -289,6 +292,7 @@ describe('<DataListToolbar />', () => {
        searchColumns={searchColumns}
        sortColumns={sortColumns}
        onSearch={onSearch}
+        onReplaceSearch={onReplaceSearch}
        onSort={onSort}
        onSelectAll={onSelectAll}
        showSelectAll
--- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 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 {
@ -105,22 +105,18 @@ class ListHeader extends React.Component {
            </DataToolbarContent>
          </DataToolbar>
        ) : (
-          <DataToolbar id={`${qsConfig.namespace}-list-toolbar`}
-            clearAllFilters={this.handleRemoveAll}
-            collapseListedFiltersBreakpoint="xl"
-          >
-            <DataToolbarContent>
-              {renderToolbar({
-                searchColumns,
-                sortColumns,
-                onSearch: this.handleSearch,
-                onReplaceSearch: this.handleReplaceSearch,
-                onSort: this.handleSort,
-                onRemove: this.handleRemove,
-                qsConfig,
-              })}
-            </DataToolbarContent>
-          </DataToolbar>
+          <Fragment>
+            {renderToolbar({
+              searchColumns,
+              sortColumns,
+              onSearch: this.handleSearch,
+              onReplaceSearch: this.handleReplaceSearch,
+              onSort: this.handleSort,
+              onRemove: this.handleRemove,
+              clearAllFilters: this.handleRemoveAll,
+              qsConfig,
+            })}
+          </Fragment>
        )}
      </Fragment>
    );
--- a/awx/ui_next/src/components/Search/Search.jsx
+++ b/awx/ui_next/src/components/Search/Search.jsx
@ -20,7 +20,7 @@ import {
  DataToolbarGroup,
  DataToolbarItem,
  DataToolbarFilter
-} from '@patternfly/react-core/dist/esm/experimental';
+} from '@patternfly/react-core/dist/umd/experimental';
 import { SearchIcon } from '@patternfly/react-icons';
 import { parseQueryString } from '@util/qs';
 import { QSConfig, SearchColumns } from '@types';
@ -135,7 +135,7 @@ class Search extends React.Component {
      ));

    const filterDefaultParams = (paramsArr, config) => {
-      const defaultParamsKeys = Object.keys(config.defaultParams);
+      const defaultParamsKeys = Object.keys(config.defaultParams || {});
      return paramsArr.filter(key => defaultParamsKeys.indexOf(key) === -1);
    };

@ -147,7 +147,7 @@ class Search extends React.Component {
        queryParamsByKey[key] = {key, label: name, chips: []};
      });
      const nonDefaultParams = filterDefaultParams(
-        Object.keys(queryParams),
+        Object.keys(queryParams || {}),
        qsConfig
      );

--- a/awx/ui_next/src/components/Search/Search.test.jsx
+++ b/awx/ui_next/src/components/Search/Search.test.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import { DataToolbar, DataToolbarContent } from '@patternfly/react-core/dist/umd/experimental';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import Search from './Search';

@ -8,7 +9,7 @@ describe('<Search />', () => {
  const QS_CONFIG = {
    namespace: 'organization',
    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'],
  };

@ -29,11 +30,18 @@ describe('<Search />', () => {
    const onSearch = jest.fn();

    search = mountWithContexts(
-      <Search
-        qsConfig={QS_CONFIG}
-        columns={columns}
-        onSearch={onSearch}
-      />
+      <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="md"
+      >
+        <DataToolbarContent>
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+          />
+        </DataToolbarContent>
+      </DataToolbar>
    );

    search.find(searchTextInput).instance().value = 'test-321';
@ -50,11 +58,18 @@ describe('<Search />', () => {
    ];
    const onSearch = jest.fn();
    const wrapper = mountWithContexts(
-      <Search
-        qsConfig={QS_CONFIG}
-        columns={columns}
-        onSearch={onSearch}
-      />
+      <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="md"
+      >
+        <DataToolbarContent>
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+          />
+        </DataToolbarContent>
+      </DataToolbar>
    ).find('Search');
    expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
    wrapper.instance().handleDropdownToggle(true);
@ -68,11 +83,18 @@ describe('<Search />', () => {
    ];
    const onSearch = jest.fn();
    const wrapper = mountWithContexts(
-      <Search
-        qsConfig={QS_CONFIG}
-        columns={columns}
-        onSearch={onSearch}
-      />
+      <DataToolbar id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="md"
+      >
+        <DataToolbarContent>
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+          />
+        </DataToolbarContent>
+      </DataToolbar>
    ).find('Search');
    expect(wrapper.state('searchKey')).toEqual('name');
    wrapper
--- a/awx/ui_next/src/components/Sort/Sort.jsx
+++ b/awx/ui_next/src/components/Sort/Sort.jsx
@ -150,7 +150,7 @@ class Sort extends React.Component {
            )}
            <Button
              variant={ButtonVariant.control}
-              aria-label={i18n._(t`Reverse Sort Order`)}
+              aria-label={i18n._(t`Sort`)}
              onClick={this.handleSort}
            >
              <SortIcon />
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
@ -161,7 +161,7 @@ describe('<InventoryGroupsList />', () => {
    });
    wrapper.update();
    await act(async () => {
-      wrapper.find('Toolbar Button[aria-label="Delete"]').invoke('onClick')();
+      wrapper.find('DataToolbar Button[aria-label="Delete"]').invoke('onClick')();
    });
    await waitForElement(
      wrapper,
@ -193,7 +193,7 @@ describe('<InventoryGroupsList />', () => {
    });
    wrapper.update();
    await act(async () => {
-      wrapper.find('Toolbar Button[aria-label="Delete"]').invoke('onClick')();
+      wrapper.find('DataToolbar Button[aria-label="Delete"]').invoke('onClick')();
    });
    await waitForElement(
      wrapper,
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@ -125,28 +125,12 @@ function OrganizationsList({ i18n }) {
                key: 'name',
                isDefault: true
              },
-              {
-                name: i18n._(t`Modified`),
-                key: 'modified',
-              },
-              {
-                name: i18n._(t`Created`),
-                key: 'created',
-              },
            ]}
            toolbarSortColumns={[
              {
                name: i18n._(t`Name`),
                key: 'name',
              },
-              {
-                name: i18n._(t`Modified`),
-                key: 'modified',
-              },
-              {
-                name: i18n._(t`Created`),
-                key: 'created',
-              },
            ]}
            renderToolbar={props => (
              <DataListToolbar