Normalize event callback function names in search and sort components

This commit is contained in:
mabashian
2019-03-14 13:36:50 -04:00
parent 3596d776fc
commit fc80470e5d
4 changed files with 26 additions and 26 deletions

View File

@@ -39,7 +39,7 @@ describe('<Search />', () => {
expect(onSearch).toBeCalledWith('test-321'); expect(onSearch).toBeCalledWith('test-321');
}); });
test('onSearchDropdownToggle properly updates state', async () => { test('handleDropdownToggle properly updates state', async () => {
const columns = [{ name: 'Name', key: 'name', isSortable: true }]; const columns = [{ name: 'Name', key: 'name', isSortable: true }];
const onSearch = jest.fn(); const onSearch = jest.fn();
const wrapper = mount( const wrapper = mount(
@@ -52,11 +52,11 @@ describe('<Search />', () => {
</I18nProvider> </I18nProvider>
).find('Search'); ).find('Search');
expect(wrapper.state('isSearchDropdownOpen')).toEqual(false); expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
wrapper.instance().onSearchDropdownToggle(true); wrapper.instance().handleDropdownToggle(true);
expect(wrapper.state('isSearchDropdownOpen')).toEqual(true); expect(wrapper.state('isSearchDropdownOpen')).toEqual(true);
}); });
test('onSearchDropdownSelect properly updates state', async () => { test('handleDropdownSelect properly updates state', async () => {
const columns = [ const columns = [
{ name: 'Name', key: 'name', isSortable: true }, { name: 'Name', key: 'name', isSortable: true },
{ name: 'Description', key: 'description', isSortable: true } { name: 'Description', key: 'description', isSortable: true }
@@ -72,7 +72,7 @@ describe('<Search />', () => {
</I18nProvider> </I18nProvider>
).find('Search'); ).find('Search');
expect(wrapper.state('searchKey')).toEqual('name'); expect(wrapper.state('searchKey')).toEqual('name');
wrapper.instance().onSearchDropdownSelect({ target: { innerText: 'Description' } }); wrapper.instance().handleDropdownSelect({ target: { innerText: 'Description' } });
expect(wrapper.state('searchKey')).toEqual('description'); expect(wrapper.state('searchKey')).toEqual('description');
}); });
}); });

View File

@@ -110,7 +110,7 @@ describe('<Sort />', () => {
</I18nProvider> </I18nProvider>
).find('Sort'); ).find('Sort');
wrapper.instance().onSortDropdownSelect({ target: { innerText: 'Bar' } }); wrapper.instance().handleDropdownSelect({ target: { innerText: 'Bar' } });
expect(onSort).toBeCalledWith('bar', 'ascending'); expect(onSort).toBeCalledWith('bar', 'ascending');
}); });
@@ -135,7 +135,7 @@ describe('<Sort />', () => {
</I18nProvider> </I18nProvider>
).find('Sort'); ).find('Sort');
expect(wrapper.state('isSortDropdownOpen')).toEqual(false); expect(wrapper.state('isSortDropdownOpen')).toEqual(false);
wrapper.instance().onSortDropdownToggle(true); wrapper.instance().handleDropdownToggle(true);
expect(wrapper.state('isSortDropdownOpen')).toEqual(true); expect(wrapper.state('isSortDropdownOpen')).toEqual(true);
}); });

View File

@@ -23,16 +23,16 @@ class Search extends React.Component {
}; };
this.handleSearchInputChange = this.handleSearchInputChange.bind(this); this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
this.onSearchDropdownToggle = this.onSearchDropdownToggle.bind(this); this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
this.onSearchDropdownSelect = this.onSearchDropdownSelect.bind(this); this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
this.onSearch = this.onSearch.bind(this); this.handleSearch = this.handleSearch.bind(this);
} }
onSearchDropdownToggle (isSearchDropdownOpen) { handleDropdownToggle (isSearchDropdownOpen) {
this.setState({ isSearchDropdownOpen }); this.setState({ isSearchDropdownOpen });
} }
onSearchDropdownSelect ({ target }) { handleDropdownSelect ({ target }) {
const { columns } = this.props; const { columns } = this.props;
const { innerText } = target; const { innerText } = target;
@@ -40,7 +40,7 @@ class Search extends React.Component {
this.setState({ isSearchDropdownOpen: false, searchKey }); this.setState({ isSearchDropdownOpen: false, searchKey });
} }
onSearch () { handleSearch () {
const { searchValue } = this.state; const { searchValue } = this.state;
const { onSearch } = this.props; const { onSearch } = this.props;
@@ -78,13 +78,13 @@ class Search extends React.Component {
<div className="pf-c-input-group"> <div className="pf-c-input-group">
<Dropdown <Dropdown
className="searchKeyDropdown" className="searchKeyDropdown"
onToggle={this.onSearchDropdownToggle} onToggle={this.handleDropdownToggle}
onSelect={this.onSearchDropdownSelect} onSelect={this.handleDropdownSelect}
direction={up} direction={up}
isOpen={isSearchDropdownOpen} isOpen={isSearchDropdownOpen}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
onToggle={this.onSearchDropdownToggle} onToggle={this.handleDropdownToggle}
> >
{searchColumnName} {searchColumnName}
</DropdownToggle> </DropdownToggle>
@@ -101,7 +101,7 @@ class Search extends React.Component {
<Button <Button
variant="tertiary" variant="tertiary"
aria-label={i18n._(t`Search`)} aria-label={i18n._(t`Search`)}
onClick={this.onSearch} onClick={this.handleSearch}
> >
<i className="fas fa-search" aria-hidden="true" /> <i className="fas fa-search" aria-hidden="true" />
</Button> </Button>

View File

@@ -24,16 +24,16 @@ class Sort extends React.Component {
isSortDropdownOpen: false, isSortDropdownOpen: false,
}; };
this.onSortDropdownToggle = this.onSortDropdownToggle.bind(this); this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
this.onSortDropdownSelect = this.onSortDropdownSelect.bind(this); this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
this.onSort = this.onSort.bind(this); this.handleSort = this.handleSort.bind(this);
} }
onSortDropdownToggle (isSortDropdownOpen) { handleDropdownToggle (isSortDropdownOpen) {
this.setState({ isSortDropdownOpen }); this.setState({ isSortDropdownOpen });
} }
onSortDropdownSelect ({ target }) { handleDropdownSelect ({ target }) {
const { columns, onSort, sortOrder } = this.props; const { columns, onSort, sortOrder } = this.props;
const { innerText } = target; const { innerText } = target;
@@ -43,7 +43,7 @@ class Sort extends React.Component {
onSort(searchKey, sortOrder); onSort(searchKey, sortOrder);
} }
onSort () { handleSort () {
const { onSort, sortedColumnKey, sortOrder } = this.props; const { onSort, sortedColumnKey, sortOrder } = this.props;
const newSortOrder = sortOrder === 'ascending' ? 'descending' : 'ascending'; const newSortOrder = sortOrder === 'ascending' ? 'descending' : 'ascending';
@@ -86,13 +86,13 @@ class Sort extends React.Component {
{ sortDropdownItems.length > 1 && ( { sortDropdownItems.length > 1 && (
<Dropdown <Dropdown
style={{ marginRight: '20px' }} style={{ marginRight: '20px' }}
onToggle={this.onSortDropdownToggle} onToggle={this.handleDropdownToggle}
onSelect={this.onSortDropdownSelect} onSelect={this.handleDropdownSelect}
direction={up} direction={up}
isOpen={isSortDropdownOpen} isOpen={isSortDropdownOpen}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
onToggle={this.onSortDropdownToggle} onToggle={this.handleDropdownToggle}
> >
{sortedColumnName} {sortedColumnName}
</DropdownToggle> </DropdownToggle>
@@ -101,7 +101,7 @@ class Sort extends React.Component {
/> />
)} )}
<Button <Button
onClick={this.onSort} onClick={this.handleSort}
variant="plain" variant="plain"
aria-label={i18n._(t`Sort`)} aria-label={i18n._(t`Sort`)}
> >