Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add option to define rel property for page number anchor tag #391

Merged
merged 6 commits into from
Nov 3, 2021
Merged

Add option to define rel property for page number anchor tag #391

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b88169e
Add rel property for page number anchor tag
switzbug Nov 2, 2021
1f2faf8
Add test for nextPageRel, previousPageRel and selectedPageRel
switzbug Nov 2, 2021
f75aa72
Change function name
switzbug Nov 3, 2021
37e77d4
Fix tests description
switzbug Nov 3, 2021
fc0be0b
Add prevPageRel, selectedPageRel and nextPageRel to README.md
switzbug Nov 3, 2021
b69203a
Add test to check for null
switzbug Nov 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
194 changes: 194 additions & 0 deletions __tests__/PaginationBoxView-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1474,4 +1474,198 @@ describe('Test custom props', () => {
).toBe('Item 1');
});
});
describe('prevPageRel/nextPageRel/selectedPageRel', () => {
it('should render default rel if not defined', function () {
MonsieurV marked this conversation as resolved.
Show resolved Hide resolved
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={4} />
);

const activeItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(activeItem);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(3) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(2) a')
.getAttribute('rel')
).toBe('prev');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(4) a')
.getAttribute('rel')
).toBe('next');
});
it('should render custom rel if defined', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={4}
prevPageRel="custom-prev-rel"
nextPageRel="custom-next-rel"
selectedPageRel="custom-selected-rel"
/>
);

const activeItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(activeItem);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(3) a')
.getAttribute('rel')
).toBe('custom-selected-rel');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(2) a')
.getAttribute('rel')
).toBe('custom-prev-rel');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-child(4) a')
.getAttribute('rel')
).toBe('custom-next-rel');
});
it('should not render prevPageRel and nextPageRel if pageCount is 1', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={1} />
);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:first-child a')
.getAttribute('aria-label')
).toBe('Previous page');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(2) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('.selected a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(2) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:last-child a')
.getAttribute('aria-label')
).toBe('Next page');
});
it('should not render prevPageRel if selected page is first', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={4} />
);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(1) a')
.getAttribute('aria-label')
).toBe('Previous page');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(2) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(3) a')
.getAttribute('rel')
).toBe('next');
});
it('should not render nextPageRel if selected page is last', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView pageCount={4} />
);

const activeItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-last-child(2) a'
);
ReactTestUtils.Simulate.click(activeItem);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(1) a')
.getAttribute('aria-label')
).toBe('Next page');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(2) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(3) a')
.getAttribute('rel')
).toBe('prev');
});
it('should not render prevPageRel if the break page is present just before the selected page', function () {
switzbug marked this conversation as resolved.
Show resolved Hide resolved
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={20}
marginPagesDisplayed={2}
pageRangeDisplayed={0}
/>
);

const activeItem =
ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3) a');
ReactTestUtils.Simulate.click(activeItem);

expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(2) a')
.getAttribute('rel')
).toBe('prev');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(3) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-Child(4)')
.getAttribute('class')
).toBe('break');
});
it('should not render nextPageRel if the break page is present just after the selected page', function () {
const pagination = ReactTestUtils.renderIntoDocument(
<PaginationBoxView
pageCount={20}
marginPagesDisplayed={2}
pageRangeDisplayed={0}
/>
);

const activeItem = ReactDOM.findDOMNode(pagination).querySelector(
'li:nth-last-child(3) a'
);

ReactTestUtils.Simulate.click(activeItem);
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(2) a')
.getAttribute('rel')
).toBe('next');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(3) a')
.getAttribute('rel')
).toBe('canonical');
expect(
ReactDOM.findDOMNode(pagination)
.querySelector('li:nth-last-Child(4)')
.getAttribute('class')
).toBe('break');
});
});
});
3 changes: 3 additions & 0 deletions react_components/PageView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const PageView = (props) => {
href,
extraAriaContext,
pageLabelBuilder,
rel,
} = props;

let ariaLabel =
Expand Down Expand Up @@ -45,6 +46,7 @@ const PageView = (props) => {
return (
<li className={pageClassName}>
<a
rel={rel}
role={!href ? 'button' : undefined}
className={pageLinkClassName}
href={href}
Expand Down Expand Up @@ -73,6 +75,7 @@ PageView.propTypes = {
page: PropTypes.number.isRequired,
getEventListener: PropTypes.func.isRequired,
pageLabelBuilder: PropTypes.func.isRequired,
rel: PropTypes.string,
};

export default PageView;
20 changes: 20 additions & 0 deletions react_components/PaginationBoxView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ export default class PaginationBoxView extends Component {
marginPagesDisplayed: PropTypes.number.isRequired,
previousLabel: PropTypes.node,
previousAriaLabel: PropTypes.string,
prevPageRel: PropTypes.string,
switzbug marked this conversation as resolved.
Show resolved Hide resolved
prevRel: PropTypes.string,
nextLabel: PropTypes.node,
nextAriaLabel: PropTypes.string,
nextPageRel: PropTypes.string,
nextRel: PropTypes.string,
breakLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
hrefBuilder: PropTypes.func,
Expand All @@ -41,6 +43,7 @@ export default class PaginationBoxView extends Component {
ariaLabelBuilder: PropTypes.func,
eventListener: PropTypes.string,
renderOnZeroPageCount: PropTypes.func,
selectedPageRel: PropTypes.string,
};

static defaultProps = {
Expand All @@ -51,17 +54,20 @@ export default class PaginationBoxView extends Component {
previousLabel: 'Previous',
previousClassName: 'previous',
previousAriaLabel: 'Previous page',
prevPageRel: 'prev',
prevRel: 'prev',
nextLabel: 'Next',
nextClassName: 'next',
nextAriaLabel: 'Next page',
nextPageRel: 'next',
nextRel: 'next',
breakLabel: '...',
disabledClassName: 'disabled',
disableInitialCallback: false,
pageLabelBuilder: (page) => page,
eventListener: 'onClick',
renderOnZeroPageCount: undefined,
selectedPageRel: 'canonical',
};

constructor(props) {
Expand Down Expand Up @@ -239,6 +245,19 @@ export default class PaginationBoxView extends Component {
this.props.onPageActive({ selected: selectedItem });
}
};
handlePageRel = (index) => {
const { selected } = this.state;
const { nextPageRel, prevPageRel, selectedPageRel } = this.props;

if (selected - 1 === index) {
return prevPageRel;
} else if (selected === index) {
return selectedPageRel;
} else if (selected + 1 === index) {
return nextPageRel;
}
return undefined;
};

getPageElement(index) {
const { selected } = this.state;
Expand All @@ -256,6 +275,7 @@ export default class PaginationBoxView extends Component {
key={index}
pageSelectedHandler={this.handlePageSelected.bind(null, index)}
selected={selected === index}
rel={this.handlePageRel(index)}
switzbug marked this conversation as resolved.
Show resolved Hide resolved
pageClassName={pageClassName}
pageLinkClassName={pageLinkClassName}
activeClassName={activeClassName}
Expand Down