Show current page number in Pagination component

taehwanno · Jan 21, 2018 · e8cdbe0 · e8cdbe0
1 parent 4653e88
commit e8cdbe0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/app/components/Pagination/Pagination.spec.jsx b/app/components/Pagination/Pagination.spec.jsx
@@ -9,6 +9,18 @@ describe('<Pagination />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should have .Pagination__button--disabled when props.currentPage === 1', () => {
+    const wrapper = shallow(<Pagination currentPage={1} />);
+    const button = wrapper.find('.Pagination__button--disabled');
+    expect(button.props()['data-button']).toBe('prev');
+  });
+
+  it('should have .Pagination__button--disabled when props.currentPage === 10', () => {
+    const wrapper = shallow(<Pagination currentPage={10} />);
+    const button = wrapper.find('.Pagination__button--disabled');
+    expect(button.props()['data-button']).toBe('next');
+  });
+
   it('should calls onPaginate with currentPage - 1 when simulate prev button click event', () => {
     const currentPage = 3;
     const onPaginate = jest.fn();
@@ -20,8 +32,8 @@ describe('<Pagination />', () => {
       />
     ));
     wrapper.find('.Pagination__button').at(0).simulate('click');
-    expect(onPaginate.mock.calls.length).toBe(1);
-    expect(onPaginate.mock.calls[0]).toEqual([currentPage - 1]);
+    expect(onPaginate).toHaveBeenCalledTimes(1);
+    expect(onPaginate).toHaveBeenCalledWith(currentPage - 1);
   });
 
   it('should calls onPaginate with currentPage + 1 when simulate next button click event', () => {
@@ -35,7 +47,7 @@ describe('<Pagination />', () => {
       />
     ));
     wrapper.find('.Pagination__button').at(1).simulate('click');
-    expect(onPaginate.mock.calls.length).toBe(1);
-    expect(onPaginate.mock.calls[0]).toEqual([currentPage + 1]);
+    expect(onPaginate).toHaveBeenCalledTimes(1);
+    expect(onPaginate).toHaveBeenCalledWith(currentPage + 1);
   });
 });
diff --git a/app/components/Pagination/__snapshots__/Pagination.spec.jsx.snap b/app/components/Pagination/__snapshots__/Pagination.spec.jsx.snap
@@ -9,16 +9,21 @@ exports[`<Pagination /> should match snapshot when render default 1`] = `
   >
     <button
       className="Pagination__button Pagination__button--disabled"
+      data-button="prev"
       disabled={true}
       onClick={[Function]}
       type="button"
     >
       &lt;
        Prev
     </button>
+    1
+     / 10
      
     <button
       className="Pagination__button"
+      data-button="next"
+      disabled={false}
       onClick={[Function]}
       type="button"
     >

diff --git a/app/components/Pagination/index.jsx b/app/components/Pagination/index.jsx
@@ -16,25 +16,34 @@ const defaultProps = {
 
 function Pagination({ currentPage, onPaginate }) {
   const prevDisabled = currentPage === 1;
+  const nextDisabled = currentPage === 10;
 
   const prevButtonClassName = cx('Pagination__button', {
     'Pagination__button--disabled': prevDisabled,
   });
 
+  const nextButtonClassName = cx('Pagination__button', {
+    'Pagination__button--disabled': nextDisabled,
+  });
+
   return (
     <div className="Pagination">
       <div className="Pagination__inner">
         <button
           className={prevButtonClassName}
+          data-button="prev"
           disabled={prevDisabled}
           type="button"
           onClick={() => onPaginate(currentPage - 1)}
         >
           {'<'} Prev
         </button>
+        {currentPage} / 10
         {' '}
         <button
-          className="Pagination__button"
+          className={nextButtonClassName}
+          data-button="next"
+          disabled={nextDisabled}
           type="button"
           onClick={() => onPaginate(currentPage + 1)}
         >