regression tests

Author: nkinser

src/components/DayPickerNavigation.jsx

@@ -104,7 +104,7 @@ class DayPickerNavigation extends React.PureComponent {
     let navPrevTabIndex = {};
     let navNextTabIndex = {};
 
-    if (!navPrevIcon && !renderNavPrevButton) {
+    if (!navPrevIcon && !renderNavPrevButton && showNavPrevButton) {
       navPrevTabIndex = { tabIndex: '0' };
       isDefaultNavPrev = true;
       let Icon = isVertical ? ChevronUp : LeftArrow;
@@ -122,7 +122,7 @@ class DayPickerNavigation extends React.PureComponent {
       );
     }
 
-    if (!navNextIcon && !renderNavNextButton) {
+    if (!navNextIcon && !renderNavNextButton && showNavNextButton) {
       navNextTabIndex = { tabIndex: '0' };
       isDefaultNavNext = true;
       let Icon = isVertical ? ChevronDown : RightArrow;

stories/DayPickerRangeController.js

@@ -152,7 +152,7 @@ function renderNavNextButton(buttonProps) {
       style={{ position: 'absolute', top: 23, right: 22 }}
       type="button"
     >
-      Next ›
+      Next
     </button>
   );
 }
@@ -176,7 +176,7 @@ function renderNavPrevButtonForVerticalScrollable(buttonProps) {
       style={{ width: '100%', textAlign: 'center' }}
       type="button"
     >
-      &lsaquo; Prev
+      Prev
     </button>
   );
 }

test/components/DayPickerNavigation_spec.jsx

@@ -6,6 +6,7 @@ import { shallow } from 'enzyme';
 import DayPickerNavigation from '../../src/components/DayPickerNavigation';
 import RightArrow from '../../src/components/RightArrow';
 import LeftArrow from '../../src/components/LeftArrow';
+import { VERTICAL_ORIENTATION } from '../../src/constants';
 
 describe('DayPickerNavigation', () => {
   describe('#render', () => {
@@ -91,6 +92,67 @@ describe('DayPickerNavigation', () => {
       expect(wrapper.childAt(1).find('div[role="button"]')).to.have.lengthOf(0);
       expect(renderNavNextButtonStub).to.have.property('callCount', 1);
     });
+
+    it('does not render default styles when custom navigation is used', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const renderNavNextButtonStub = sinon.stub().returns(<button type="button">Next</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavNextButton={renderNavNextButtonStub}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('does render default styles when custom navigation is used for only one nav button', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
+
+    it('does not render default styles when custom navigation is used for only button but the other nav button is not shown', () => {
+      const renderNavPrevButtonStub = sinon.stub().returns(<button type="button">Prev</button>);
+      const wrapper = shallow(
+        <DayPickerNavigation
+          showNavNextButton={false}
+          renderNavPrevButton={renderNavPrevButtonStub}
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(0);
+    });
+
+    it('renders default styles when default navigation is used', () => {
+      const wrapper = shallow(
+        <DayPickerNavigation
+          orientation={VERTICAL_ORIENTATION}
+        />,
+      ).dive();
+      const wrapperDiv = wrapper.find('div').filterWhere((div) => {
+        const className = div.prop('className') || '';
+        return className.includes('DayPickerNavigation__verticalDefault');
+      });
+      expect(wrapperDiv).to.have.lengthOf(1);
+    });
   });
 
   describe('interactions', () => {