revert: "feat(daypicker): Open daypicker at top of calendar. Fix keyb…

…oard navigation a11y. Improve performance of calendar by using a class inside react-window list (#119)" This reverts commit 262abc8.
qantasairways · Aug 20, 2019 · 78f9776 · 78f9776
1 parent 705018a
commit 78f9776
Show file tree

Hide file tree

Showing 21 changed files with 1,015 additions and 1,622 deletions.
diff --git a/setupTests.js b/setupTests.js
@@ -14,6 +14,4 @@ window.matchMedia = jest.fn().mockImplementation(query => ({
   removeListener: jest.fn()
 }));
 
-window.scrollTo = jest.fn();
-
 configure({ adapter: new Adapter() });
diff --git a/src/components/DayPicker/__tests__/Day.spec.js b/src/components/DayPicker/__tests__/Day.spec.js
@@ -14,13 +14,7 @@ jest.mock('../helpers', () => ({
   getShouldSelectAsStartDate: jest.fn(),
   getEndDateFromStartDate: jest.fn(),
   DAY_CELL_HEIGHT_DESKTOP: 90,
-  DAY_CELL_HEIGHT_MOBILE: 94,
-  DAY_NAVIGATION_MAPPING: {
-    39: 1,
-    37: -1,
-    40: 7,
-    38: -7
-  }
+  DAY_CELL_HEIGHT_MOBILE: 94
 }));
 
 const DummyIcon = () => <div>Icon</div>;
@@ -35,7 +29,7 @@ describe('Day', () => {
     month: 'January',
     year: 2018,
     onDayClick: noop,
-    focusDateElement: noop
+    onDayNavigate: noop
   };
 
   const props = {
@@ -204,13 +198,13 @@ describe('Day', () => {
 
   describe('handleKeyDown()', () => {
     const onDayClickMock = jest.fn();
-    const focusDateElementMock = jest.fn();
+    const onDayNavigateMock = jest.fn();
     const preventDefaultMock = jest.fn();
     const stopPropagationMock = jest.fn();
 
     afterEach(() => {
       onDayClickMock.mockReset();
-      focusDateElementMock.mockReset();
+      onDayNavigateMock.mockReset();
       preventDefaultMock.mockReset();
       stopPropagationMock.mockReset();
     });
@@ -243,107 +237,14 @@ describe('Day', () => {
       expect(stopPropagationMock.mock.calls.length).toBe(1);
     });
 
-    it('calls focusDateElement when key is the UP key', () => {
+    it('calls this.props.onDayNavigate with correct args', () => {
       component = shallow(
-        <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)
+        <Day {...defaultProps} {...props} onDayNavigate={onDayNavigateMock} />
       );
-      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);
+      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);
     });
   });
 

diff --git a/src/components/DayPicker/__tests__/DayPicker.spec.js b/src/components/DayPicker/__tests__/DayPicker.spec.js
@@ -93,6 +93,18 @@ 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(

diff --git a/src/components/DayPicker/__tests__/Header.spec.js b/src/components/DayPicker/__tests__/Header.spec.js
@@ -1,7 +1,6 @@
 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);
@@ -17,7 +16,6 @@ describe('Header', () => {
         firstDayOfWeek={1}
         rowStyles={{}}
         dayLabels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
-        onKeyDown={noop}
       />
     );
 
@@ -43,7 +41,6 @@ describe('Header', () => {
         endPlaceholder="return when?"
         Icon={CalendarIcon}
         isDateRange={false}
-        onKeyDown={noop}
       />
     );
 

diff --git a/src/components/DayPicker/__tests__/Month.spec.js b/src/components/DayPicker/__tests__/Month.spec.js
@@ -9,14 +9,9 @@ describe('Month', () => {
   let component;
 
   const requiredProps = {
-    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,
+    month: new Date(2019, 3, 20, 0, 0, 0),
     onDayClick: noop,
-    focusDateElement: noop,
+    onDayNavigate: noop,
     days: [
       {
         date: new Date(2019, 3, 20, 0, 0, 0),

diff --git a/src/components/DayPicker/__tests__/__snapshots__/Day.spec.js.snap b/src/components/DayPicker/__tests__/__snapshots__/Day.spec.js.snap