feat(daypicker): Open daypicker at top of calendar. Fix keyboard navi…

setupTests.js

@@ -14,4 +14,6 @@ window.matchMedia = jest.fn().mockImplementation(query => ({
   removeListener: jest.fn()
 }));
 
+window.scrollTo = jest.fn();
+
 configure({ adapter: new Adapter() });

src/components/DayPicker/__tests__/Day.spec.js

@@ -14,7 +14,13 @@ jest.mock('../helpers', () => ({
   getShouldSelectAsStartDate: jest.fn(),
   getEndDateFromStartDate: jest.fn(),
   DAY_CELL_HEIGHT_DESKTOP: 90,
-  DAY_CELL_HEIGHT_MOBILE: 94
+  DAY_CELL_HEIGHT_MOBILE: 94,
+  DAY_NAVIGATION_MAPPING: {
+    39: 1,
+    37: -1,
+    40: 7,
+    38: -7
+  }
 }));
 
 const DummyIcon = () => <div>Icon</div>;
@@ -29,7 +35,7 @@ describe('Day', () => {
     month: 'January',
     year: 2018,
     onDayClick: noop,
-    onDayNavigate: noop
+    focusDateElement: noop
   };
 
   const props = {
@@ -198,13 +204,13 @@ describe('Day', () => {
 
   describe('handleKeyDown()', () => {
     const onDayClickMock = jest.fn();
-    const onDayNavigateMock = jest.fn();
+    const focusDateElementMock = jest.fn();
     const preventDefaultMock = jest.fn();
     const stopPropagationMock = jest.fn();
 
     afterEach(() => {
       onDayClickMock.mockReset();
-      onDayNavigateMock.mockReset();
+      focusDateElementMock.mockReset();
       preventDefaultMock.mockReset();
       stopPropagationMock.mockReset();
     });
@@ -237,14 +243,107 @@ describe('Day', () => {
       expect(stopPropagationMock.mock.calls.length).toBe(1);
     });
 
-    it('calls this.props.onDayNavigate with correct args', () => {
+    it('calls focusDateElement when key is the UP key', () => {
       component = shallow(
-        <Day {...defaultProps} {...props} onDayNavigate={onDayNavigateMock} />
+        <Day
+          {...defaultProps}
+          {...props}
+          focusDateElement={focusDateElementMock}
+        />
+      );
+      component.instance().handleKeyDown({
+        keyCode: 38,
+        preventDefault: preventDefaultMock,
+        stopPropagation: stopPropagationMock
+      });
+      expect(focusDateElementMock.mock.calls.length).toBe(1);
+      expect(focusDateElementMock.mock.calls[0][0]).toEqual(
+        new Date(2019, 3, 13, 0, 0, 0)
       );
-      component.instance().handleKeyDown({ keyCode: 555 });
-      expect(onDayNavigateMock.mock.calls.length).toBe(1);
-      expect(onDayNavigateMock.mock.calls[0][0]).toBe(date.getTime());
-      expect(onDayNavigateMock.mock.calls[0][1]).toBe(555);
+      expect(preventDefaultMock.mock.calls.length).toBe(1);
+      expect(stopPropagationMock.mock.calls.length).toBe(1);
+    });
+
+    it('calls focusDateElement when key is the DOWN key', () => {
+      component = shallow(
+        <Day
+          {...defaultProps}
+          {...props}
+          focusDateElement={focusDateElementMock}
+        />
+      );
+      component.instance().handleKeyDown({
+        keyCode: 40,
+        preventDefault: preventDefaultMock,
+        stopPropagation: stopPropagationMock
+      });
+      expect(focusDateElementMock.mock.calls.length).toBe(1);
+      expect(focusDateElementMock.mock.calls[0][0]).toEqual(
+        new Date(2019, 3, 27, 0, 0, 0)
+      );
+      expect(preventDefaultMock.mock.calls.length).toBe(1);
+      expect(stopPropagationMock.mock.calls.length).toBe(1);
+    });
+
+    it('calls focusDateElement when key is the LEFT key', () => {
+      component = shallow(
+        <Day
+          {...defaultProps}
+          {...props}
+          focusDateElement={focusDateElementMock}
+        />
+      );
+      component.instance().handleKeyDown({
+        keyCode: 37,
+        preventDefault: preventDefaultMock,
+        stopPropagation: stopPropagationMock
+      });
+      expect(focusDateElementMock.mock.calls.length).toBe(1);
+      expect(focusDateElementMock.mock.calls[0][0]).toEqual(
+        new Date(2019, 3, 19, 0, 0, 0)
+      );
+      expect(preventDefaultMock.mock.calls.length).toBe(1);
+      expect(stopPropagationMock.mock.calls.length).toBe(1);
+    });
+
+    it('calls focusDateElement when key is the RIGHT key', () => {
+      component = shallow(
+        <Day
+          {...defaultProps}
+          {...props}
+          focusDateElement={focusDateElementMock}
+        />
+      );
+      component.instance().handleKeyDown({
+        keyCode: 39,
+        preventDefault: preventDefaultMock,
+        stopPropagation: stopPropagationMock
+      });
+      expect(focusDateElementMock.mock.calls.length).toBe(1);
+      expect(focusDateElementMock.mock.calls[0][0]).toEqual(
+        new Date(2019, 3, 21, 0, 0, 0)
+      );
+      expect(preventDefaultMock.mock.calls.length).toBe(1);
+      expect(stopPropagationMock.mock.calls.length).toBe(1);
+    });
+
+    it('does nothing when key code is something else', () => {
+      component = shallow(
+        <Day
+          {...defaultProps}
+          {...props}
+          focusDateElement={focusDateElementMock}
+        />
+      );
+      component.instance().handleKeyDown({
+        keyCode: 555,
+        preventDefault: preventDefaultMock,
+        stopPropagation: stopPropagationMock
+      });
+      expect(focusDateElementMock.mock.calls.length).toBe(0);
+      expect(onDayClickMock.mock.calls.length).toBe(0);
+      expect(preventDefaultMock.mock.calls.length).toBe(0);
+      expect(stopPropagationMock.mock.calls.length).toBe(0);
     });
   });
 

src/components/DayPicker/__tests__/DayPicker.spec.js

@@ -93,18 +93,6 @@ describe('DayPicker', () => {
     });
   });
 
-  describe('renderMonth()', () => {
-    it('renders correctly', () => {
-      component = shallow(<DayPicker {...props} />);
-
-      const renderedMonth = shallow(
-        component.instance().renderMonth({ index: 1, style: {} }, true)
-      );
-
-      expect(renderedMonth).toMatchSnapshot();
-    });
-  });
-
   describe('renderButtonDates()', () => {
     it('does not render if start date is not selected', () => {
       component = shallow(

src/components/DisclaimerMessages/__tests__/DisclaimerMessages.spec.js → src/components/DayPicker/__tests__/DisclaimerMessages.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import DisclaimerMessages from '..';
+import DisclaimerMessages from '../components/DisclaimerMessages';
 
 describe('DisclaimerMessages', () => {
   it('Disclaimer Message renders correctly', () => {

src/components/DayPicker/__tests__/Header.spec.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Header from '../components/Header';
+import noop from '../../../utils/noop';
 
 const start = new Date(2019, 3, 21, 0, 0, 0, 0);
 const end = new Date(2019, 3, 24, 0, 0, 0, 0);
@@ -16,6 +17,7 @@ describe('Header', () => {
         firstDayOfWeek={1}
         rowStyles={{}}
         dayLabels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
+        onKeyDown={noop}
       />
     );
 
@@ -41,6 +43,7 @@ describe('Header', () => {
         endPlaceholder="return when?"
         Icon={CalendarIcon}
         isDateRange={false}
+        onKeyDown={noop}
       />
     );
 

src/components/DayPicker/__tests__/Month.spec.js

@@ -9,9 +9,14 @@ describe('Month', () => {
   let component;
 
   const requiredProps = {
-    month: new Date(2019, 3, 20, 0, 0, 0),
+    months: [new Date(2019, 3, 20, 0, 0, 0)],
+    monthIndex: 0,
+    disabledBefore: new Date(2019, 3, 2, 0, 0, 0),
+    disabledAfter: new Date(2019, 3, 26, 0, 0, 0),
+    today: new Date(2019, 3, 15, 0, 0, 0).getTime(),
+    firstDayOfWeek: 1,
     onDayClick: noop,
-    onDayNavigate: noop,
+    focusDateElement: noop,
     days: [
       {
         date: new Date(2019, 3, 20, 0, 0, 0),