test: add pagination tests (#354)

src/components/Pagination/__test__/get-first-item.spec.js

@@ -0,0 +1,26 @@
+import getFirstItem from '../get-first-item';
+
+const pages = 7;
+
+describe('getFirstItem function', () => {
+    it('should return 1 if the activeItem is 1', () => {
+        const result = getFirstItem(pages, 1);
+        expect(result).toEqual(1);
+    });
+    it('should return 1 if the activeItem is 2', () => {
+        const result = getFirstItem(pages, 2);
+        expect(result).toEqual(1);
+    });
+    it('should return 3 if the activeItem is 7', () => {
+        const result = getFirstItem(pages, 7);
+        expect(result).toEqual(3);
+    });
+    it('should return 3 if the activeItem is 6', () => {
+        const result = getFirstItem(pages, 6);
+        expect(result).toEqual(3);
+    });
+    it('should return 2 if the activeItem is 4', () => {
+        const result = getFirstItem(pages, 4);
+        expect(result).toEqual(2);
+    });
+});

src/components/Pagination/__test__/navigationButton.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import NavigationButton from '../navigationButton';
+
+const onCkickMockFn = jest.fn();
+
+describe('<NavigationButton />', () => {
+    it('should call the onClick function when clicked', () => {
+        const component = mount(<NavigationButton onClick={onCkickMockFn} icon={<span />} />);
+        const anchor = component.find('a');
+        anchor.simulate('click');
+        expect(onCkickMockFn).toHaveBeenCalledTimes(1);
+    });
+    it('should set the aria-disabled to the anchor element if disabled', () => {
+        const component = mount(
+            <NavigationButton onClick={onCkickMockFn} icon={<span />} disabled />,
+        );
+        const anchor = component.find('a');
+        expect(anchor.prop('aria-disabled')).toBe(true);
+    });
+});

src/components/Pagination/__test__/pageButtons.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import PageButtons from '../pageButtons';
+
+describe('<PageButtons />', () => {
+    it('should render 5 children if pages is grater than 4', () => {
+        const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
+        const buttons = component.find('li');
+        expect(buttons.length).toBe(5);
+    });
+    it('should render as many children as pages if pages is less than 4', () => {
+        const component = mount(<PageButtons pages={4} onChange={() => {}} activePage={3} />);
+        const buttons = component.find('li');
+        expect(buttons.length).toBe(4);
+    });
+    it('should set the right className to the active page button', () => {
+        const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
+        const pageButtons = component.find('li.rainbow-pagination_button');
+        expect(pageButtons.get(2).props.className).toBe('rainbow-pagination_button rainbow-pagination_button--active');
+    });
+    it('should set aria-current to "page" to the active anchor element', () => {
+        const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
+        const pageButtons = component.find('a');
+        expect(pageButtons.get(2).props['aria-current']).toBe('page');
+    });
+    it('should set aria-current to undefined to the anchor element if is not active', () => {
+        const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
+        const pageButtons = component.find('a');
+        expect(pageButtons.get(1).props['aria-current']).toBe(undefined);
+    });
+    it('should set aria-label to the anchor elements', () => {
+        const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
+        const pageButtons = component.find('a');
+        expect(pageButtons.get(1).props['aria-label']).toBe('Goto Page 2');
+    });
+    it('should call onChange if a page button is clicked', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<PageButtons pages={1} onChange={onChangeMockFn} activePage={1} />);
+        const anchor = component.find('a');
+        anchor.simulate('click');
+        expect(onChangeMockFn).toHaveBeenCalledWith(expect.any(Object), 1);
+    });
+});

src/components/Pagination/__test__/pagination.a11y.spec.js

@@ -0,0 +1,13 @@
+import ReactDOMServer from 'react-dom/server';
+import { axe } from 'jest-axe';
+import React from 'react';
+import Pagination from '../';
+
+describe('<Pagination/>', () => {
+    it('should be accessible', async () => {
+        expect.assertions(1);
+        const html = ReactDOMServer.renderToString(<Pagination pages={5} activePage={3} />);
+        const results = await axe(html);
+        expect(results).toHaveNoViolations();
+    });
+});

src/components/Pagination/__test__/pagination.spec.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Pagination from '../';
+
+describe('<Pagination />', () => {
+    it('should disable the previous button if the active page is the first', () => {
+        const component = mount(<Pagination pages={5} activePage={1} />);
+        const navButtons = component.find('NavigationButton');
+        expect(navButtons.get(0).props.disabled).toBe(true);
+    });
+    it('should disable the next button if the active page is the last', () => {
+        const component = mount(<Pagination pages={5} activePage={5} />);
+        const navButtons = component.find('NavigationButton');
+        expect(navButtons.get(1).props.disabled).toBe(true);
+    });
+    it('should set aria-label to pagination', () => {
+        const component = mount(<Pagination pages={5} activePage={1} />);
+        expect(component.find('nav').prop('aria-label')).toBe('pagination');
+    });
+    it('shold call the onClick function with the right arguments when the previous page button is clicked', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<Pagination pages={5} activePage={5} onChange={onChangeMockFn} />);
+        const previousButton = component.find('[data-id="previous-page-button"]');
+        previousButton.simulate('click');
+        expect(onChangeMockFn).toHaveBeenCalledWith(expect.any(Object), 4);
+    });
+    it('shold call the onClick function with the right arguments when the next page button is clicked', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<Pagination pages={5} activePage={1} onChange={onChangeMockFn} />);
+        const previousButton = component.find('[data-id="next-page-button"]');
+        previousButton.simulate('click');
+        expect(onChangeMockFn).toHaveBeenCalledWith(expect.any(Object), 2);
+    });
+});
+

src/components/Pagination/index.js

@@ -19,11 +19,13 @@ export default function Pagination(props) {
         <nav className={getContainerClassNames()} style={style} aria-label="pagination">
             <ul className="rainbow-pagination_container">
                 <NavigationButton
+                    dataId="previous-page-button"
                     icon={<LeftArrow />}
                     onClick={event => onChange(event, activePage - 1)}
                     disabled={isFirstItemSelected} />
                 <PageButtons onChange={onChange} pages={pages} activePage={activePage} />
                 <NavigationButton
+                    dataId="next-page-button"
                     icon={<RightArrow />}
                     onClick={event => onChange(event, activePage + 1)}
                     disabled={isLastItemSelected} />

src/components/Pagination/leftArrow.js

@@ -6,9 +6,9 @@ export default function LeftArrow() {
             <title>arrow-left</title>
             <desc>Created with Sketch.</desc>
             <defs />
-            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g id="components-left" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <g id="arrow-left" fill="#576574" fillRule="nonzero">
-                    <path d="M3.25545171,7.98130841 L-0.981308411,3.74454829 C-1.2741433,3.4517134 -1.2741433,2.97819315 -0.981308411,2.68847352 L-0.277258567,1.98442368 C0.015576324,1.69158879 0.489096573,1.69158879 0.778816199,1.98442368 L3.78193146,4.98753894 L6.78504673,1.98442368 C7.07788162,1.69158879 7.55140187,1.69158879 7.8411215,1.98442368 L8.54517134,2.68847352 C8.83800623,2.98130841 8.83800623,3.45482866 8.54517134,3.74454829 L4.30841121,7.98130841 C4.02180685,8.2741433 3.5482866,8.2741433 3.25545171,7.98130841 Z" id="shape" transform="translate(3.781931, 4.982866) scale(-1, 1) rotate(-90.000000) translate(-3.781931, -4.982866) " />
+                    <path d="M3.25545171,7.98130841 L-0.981308411,3.74454829 C-1.2741433,3.4517134 -1.2741433,2.97819315 -0.981308411,2.68847352 L-0.277258567,1.98442368 C0.015576324,1.69158879 0.489096573,1.69158879 0.778816199,1.98442368 L3.78193146,4.98753894 L6.78504673,1.98442368 C7.07788162,1.69158879 7.55140187,1.69158879 7.8411215,1.98442368 L8.54517134,2.68847352 C8.83800623,2.98130841 8.83800623,3.45482866 8.54517134,3.74454829 L4.30841121,7.98130841 C4.02180685,8.2741433 3.5482866,8.2741433 3.25545171,7.98130841 Z" id="shape-left" transform="translate(3.781931, 4.982866) scale(-1, 1) rotate(-90.000000) translate(-3.781931, -4.982866) " />
                 </g>
             </g>
         </svg>

src/components/Pagination/navigationButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default function NavigationButton(props) {
-    const { onClick, icon, disabled } = props;
+    const { onClick, icon, disabled, dataId } = props;
 
     const getClassName = () => classnames('rainbow-pagination_navigation-button', {
         'rainbow-pagination_navigation-button--disabled': disabled,
@@ -13,6 +13,7 @@ export default function NavigationButton(props) {
         <li className={getClassName()}>
             <a
                 className="rainbow-pagination_navigation-button-content"
+                data-id={dataId}
                 onClick={onClick}
                 role="presentation"
                 aria-disabled={!!disabled}>
@@ -26,8 +27,10 @@ NavigationButton.propTypes = {
     onClick: PropTypes.func.isRequired,
     icon: PropTypes.node.isRequired,
     disabled: PropTypes.bool,
+    dataId: PropTypes.string,
 };
 
 NavigationButton.defaultProps = {
     disabled: false,
+    dataId: undefined,
 };

src/components/Pagination/rightArrow.js

@@ -6,13 +6,13 @@ export default function RightArrow() {
             <title>arrow-right</title>
             <desc>Created with Sketch.</desc>
             <defs />
-            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g id="components-right" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <g id="pagination-component-V2" transform="translate(-837.000000, -1090.000000)" fill="#576574" fillRule="nonzero">
                     <g id="Group-78" transform="translate(613.000000, 1079.000000)">
                         <g id="Group-76" transform="translate(40.000000, 0.000000)">
                             <g id="Group-31" transform="translate(128.000000, 0.000000)">
                                 <g id="arrow-right" transform="translate(56.000000, 11.000000)">
-                                    <path d="M2.69158879,7.98130841 L-1.54517134,3.74454829 C-1.83800623,3.4517134 -1.83800623,2.97819315 -1.54517134,2.68847352 L-0.841121495,1.98442368 C-0.548286604,1.69158879 -0.0747663551,1.69158879 0.214953271,1.98442368 L3.21806854,4.98753894 L6.2211838,1.98442368 C6.51401869,1.69158879 6.98753894,1.69158879 7.27725857,1.98442368 L7.98130841,2.68847352 C8.2741433,2.98130841 8.2741433,3.45482866 7.98130841,3.74454829 L3.74454829,7.98130841 C3.45794393,8.2741433 2.98442368,8.2741433 2.69158879,7.98130841 Z" id="shape" transform="translate(3.218069, 4.982866) rotate(-90.000000) translate(-3.218069, -4.982866) " />
+                                    <path d="M2.69158879,7.98130841 L-1.54517134,3.74454829 C-1.83800623,3.4517134 -1.83800623,2.97819315 -1.54517134,2.68847352 L-0.841121495,1.98442368 C-0.548286604,1.69158879 -0.0747663551,1.69158879 0.214953271,1.98442368 L3.21806854,4.98753894 L6.2211838,1.98442368 C6.51401869,1.69158879 6.98753894,1.69158879 7.27725857,1.98442368 L7.98130841,2.68847352 C8.2741433,2.98130841 8.2741433,3.45482866 7.98130841,3.74454829 L3.74454829,7.98130841 C3.45794393,8.2741433 2.98442368,8.2741433 2.69158879,7.98130841 Z" id="shape-right" transform="translate(3.218069, 4.982866) rotate(-90.000000) translate(-3.218069, -4.982866) " />
                                 </g>
                             </g>
                         </g>