Created
February 14, 2017 11:29
-
-
Save MrHus/add9acb6dee727a494897706570afe12 to your computer and use it in GitHub Desktop.
Incomplete coverage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @flow | |
| import React, { Component } from 'react'; | |
| type Props = { | |
| hasNext: bool, | |
| hasPrevious: bool, | |
| nextClicked: () => void, | |
| previousClicked: () => void | |
| }; | |
| export default class Pager extends Component<void, Props, void> { | |
| render() { | |
| const { hasNext, hasPrevious } = this.props; | |
| // Don't bother to render a Pager when there is nothing to paginate. | |
| if (!hasPrevious && !hasNext) { | |
| return null; | |
| } | |
| const previousDisabled = hasPrevious ? '' : 'disabled'; | |
| const nextDisabled = hasNext ? '' : 'disabled'; | |
| return ( | |
| <nav aria-label="Page navigation"> | |
| <ul className="pager"> | |
| <li className={ "previous " + previousDisabled }> | |
| <a onClick={ () => this.previousClicked() } aria-label="Previous">Previous</a> | |
| </li> | |
| <li className={"next " + nextDisabled }> | |
| <a onClick={ () => this.nextClicked() } aria-label="Next">Next</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| ); | |
| } | |
| nextClicked() { | |
| if (this.props.hasNext) { | |
| this.props.nextClicked(); | |
| } | |
| } | |
| previousClicked() { | |
| if (this.props.hasPrevious) { | |
| this.props.previousClicked(); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { shallow } from 'enzyme'; | |
| import { noop } from 'lodash'; | |
| import Pager from './Pager'; | |
| describe('Component: Pager', () => { | |
| it('should not render when there is no next or previous page', () => { | |
| const pager = shallow( | |
| <Pager | |
| hasNext={ false } | |
| hasPrevious={ false } | |
| nextClicked={ noop } | |
| previousClicked={ noop } | |
| /> | |
| ); | |
| expect(pager.html()).toBe(null); | |
| }); | |
| it('should call "nextClicked" and "previousClicked when used"', () => { | |
| const nextClicked = jest.fn(); | |
| const previousClicked = jest.fn(); | |
| const pager = shallow( | |
| <Pager | |
| hasNext={ true } | |
| hasPrevious={ true } | |
| nextClicked={ nextClicked } | |
| previousClicked={ previousClicked } | |
| /> | |
| ); | |
| const next = pager.find('li.next > a'); | |
| next.simulate('click'); | |
| expect(nextClicked).toHaveBeenCalledTimes(1); | |
| const previous = pager.find('li.previous > a'); | |
| previous.simulate('click'); | |
| expect(previousClicked).toHaveBeenCalledTimes(1); | |
| }) | |
| it('should disable "nextClicked" when "hasNext" is false', () => { | |
| const nextClicked = jest.fn(); | |
| const pager = shallow( | |
| <Pager | |
| hasNext={ false } | |
| hasPrevious={ true } | |
| nextClicked={ nextClicked } | |
| previousClicked={ noop } | |
| /> | |
| ); | |
| const next = pager.find('li.next.disabled > a'); | |
| next.simulate('click'); | |
| expect(nextClicked).toHaveBeenCalledTimes(0); | |
| }); | |
| it('should disable "previousClicked" when "hasPrevious" is false', () => { | |
| const previousClicked = jest.fn(); | |
| const pager = shallow( | |
| <Pager | |
| hasNext={ true } | |
| hasPrevious={ false } | |
| nextClicked={ noop } | |
| previousClicked={ previousClicked } | |
| /> | |
| ); | |
| const previous = pager.find('li.previous.disabled > a'); | |
| previous.simulate('click'); | |
| expect(previousClicked).toHaveBeenCalledTimes(0); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment