update pagination tests

This commit is contained in:
John Mitchell 2018-12-11 16:53:44 -05:00 committed by Jake McDermott
parent e48c734925
commit 11583dbff0
No known key found for this signature in database
GPG Key ID: 9A6F084352C3A0B7
2 changed files with 102 additions and 14 deletions

View File

@ -72,4 +72,97 @@ describe('<Pagination />', () => {
expect(onSetPage).toHaveBeenCalledTimes(2);
expect(onSetPage).toBeCalledWith(1, 5);
});
test('previous button does not work on page 1', () => {
const previous = 'button[aria-label="First"]';
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={21}
page={1}
pageCount={5}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
pagination.find(previous).simulate('click');
expect(onSetPage).toHaveBeenCalledTimes(0);
});
test('changing pageSize works', () => {
const pageSizeDropdownToggleSelector = 'DropdownToggle DropdownToggle[className="togglePageSize"]';
const pageSizeDropdownItemsSelector = 'DropdownItem';
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={21}
page={1}
pageCount={5}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
const pageSizeDropdownToggle = pagination.find(pageSizeDropdownToggleSelector);
expect(pageSizeDropdownToggle.length).toBe(1);
pageSizeDropdownToggle.at(0).simulate('click');
const pageSizeDropdownItems = pagination.find(pageSizeDropdownItemsSelector);
expect(pageSizeDropdownItems.length).toBe(3);
pageSizeDropdownItems.at(1).simulate('click');
});
test('submit a new page by typing in input works', () => {
const textInputSelector = '.pf-l-split__item.pf-m-main .pf-c-form-control';
const submitFormSelector = '.pf-l-split__item.pf-m-main form';
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={21}
page={1}
pageCount={5}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
const textInput = pagination.find(textInputSelector);
expect(textInput.length).toBe(1);
textInput.simulate('change');
pagination.setProps({ page: 2 });
const submitForm = pagination.find(submitFormSelector);
expect(submitForm.length).toBe(1);
submitForm.simulate('submit');
pagination.setState({ value: 'invalid' });
submitForm.simulate('submit');
});
test('text input page change is disabled when only 1 page', () => {
const onSetPage = jest.fn();
pagination = mount(
<I18nProvider>
<Pagination
count={4}
page={1}
pageCount={1}
page_size={5}
pageSizeOptions={[5, 10, 25, 50]}
onSetPage={onSetPage}
/>
</I18nProvider>
);
});
});

View File

@ -7,14 +7,9 @@ import {
DropdownDirection,
DropdownItem,
DropdownToggle,
Form,
FormGroup,
Level,
LevelItem,
TextInput,
Toolbar,
ToolbarGroup,
ToolbarItem,
Split,
SplitItem,
} from '@patternfly/react-core';
@ -32,7 +27,7 @@ class Pagination extends Component {
const { page } = this.props;
if (prevProps.page !== page) {
this.setState({ value: page });
this.onPageChange(page);
}
}
@ -51,13 +46,13 @@ class Pagination extends Component {
if (isValid) {
onSetPage(value, page_size);
} else{
} else {
this.setState({ value: page });
}
};
onFirst = () => {
const { onSetPage, page_size} = this.props;
const { onSetPage, page_size } = this.props;
onSetPage(1, page_size);
};
@ -67,7 +62,7 @@ class Pagination extends Component {
const previousPage = page - 1;
if (previousPage >= 1) {
onSetPage(previousPage, page_size)
onSetPage(previousPage, page_size);
}
};
@ -76,7 +71,7 @@ class Pagination extends Component {
const nextPage = page + 1;
if (nextPage <= pageCount) {
onSetPage(nextPage, page_size)
onSetPage(nextPage, page_size);
}
};
@ -139,18 +134,18 @@ class Pagination extends Component {
direction={up}
isOpen={isOpen}
toggle={(
<DropdownToggle
onToggle={this.onTogglePageSize}>
<DropdownToggle className="togglePageSize" onToggle={this.onTogglePageSize}>
{ page_size }
</DropdownToggle>
)}>
)}
>
{opts.map(option => (
<DropdownItem key={option} component="button">
{ option }
</DropdownItem>
))}
</Dropdown>
<Trans>Per Page</Trans>
<Trans> Per Page</Trans>
</LevelItem>
<LevelItem>
<Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">