Get touch handler tests working

src/lib/DatePicker.js

@@ -60,7 +60,7 @@ const DateCell = styled.div`
   }
 `
 
-const DateLabel = Subtitle.extend`
+const DateLabel = styled(Subtitle)`
   height: 30px;
   @media (max-width: 699px) {
     font-size: 12px;
@@ -79,7 +79,7 @@ const TimeLabelCell = styled.div`
   align-items: center;
 `
 
-const TimeText = Text.extend`
+const TimeText = styled(Text)`
   margin: 0;
   @media (max-width: 699px) {
     font-size: 10px;
@@ -117,6 +117,9 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   cellToDate: Map<HTMLElement, Date>
   documentMouseUpHandler: () => void
   endSelection: () => void
+  handleTouchMoveEvent: (SyntheticTouchEvent<*>) => void
+  handleTouchEndEvent: () => void
+  handleSelectionStartEvent: Date => void
 
   static defaultProps = {
     numDays: 7,
@@ -128,7 +131,8 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     selectedColor: colors.blue,
     unselectedColor: colors.paleBlue,
     hoveredColor: colors.lightBlue,
-    selection: []
+    selection: [],
+    onChange: () => {}
   }
 
   constructor(props: PropsType) {
@@ -153,6 +157,9 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     }
 
     this.endSelection = this.endSelection.bind(this)
+    this.handleTouchMoveEvent = this.handleTouchMoveEvent.bind(this)
+    this.handleTouchEndEvent = this.handleTouchEndEvent.bind(this)
+    this.handleSelectionStartEvent = this.handleSelectionStartEvent.bind(this)
   }
 
   componentDidMount() {
@@ -249,7 +256,7 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   }
 
   // Isomorphic (mouse and touch) handler since starting a selection works the same way for both classes of user input
-  handleSelectionStartEvent = (startTime: Date) => {
+  handleSelectionStartEvent(startTime: Date) {
     if (startTime) {
       // Check if the startTime cell is selected/unselected to determine if this drag-select should
       // add values or remove values
@@ -275,14 +282,14 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     }
   }
 
-  handleTouchMoveEvent = (event: SyntheticTouchEvent<*>) => {
+  handleTouchMoveEvent(event: SyntheticTouchEvent<*>) {
     const cellTime = this.getTimeFromTouchEvent(event)
     if (cellTime) {
       this.updateAvailabilityDraft(cellTime)
     }
   }
 
-  handleTouchEndEvent = () => {
+  handleTouchEndEvent() {
     this.endSelection()
   }
 

test/lib/DatePicker.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import renderer from 'react-test-renderer'
 import { shallow } from 'enzyme'
 import moment from 'moment'
-import DatePicker, { GridCell } from '../../src/lib/DatePicker'
+import DatePicker from '../../src/lib/DatePicker'
 
 const startDate = new Date('2018-01-01T00:00:00.000')
 
@@ -16,11 +16,9 @@ const getTestSchedule = () => [
     .add(13, 'h')
 ]
 
-// beforeAll(() => {
-//   Object.defineProperty(global, 'document', {
-//     elementFromPoint: jest.fn()
-//   })
-// })
+beforeAll(() => {
+  document.elementFromPoint = jest.fn()
+})
 
 test('Component renders correctly', () => {
   const component = renderer.create(
@@ -53,17 +51,15 @@ test('getTimeFromTouchEvent', () => {
   const component = shallow(<DatePicker />)
   const mainSpy = jest.spyOn(component.instance(), 'getTimeFromTouchEvent')
   const mockCellTime = new Date()
-  const mockTargetElement = {}
   const mockEvent = {
     touches: [{ clientX: 1, clientY: 2 }]
   }
-  document.elementFromPoint = jest.fn().mockReturnValue(mockTargetElement)
   const cellToDateSpy = jest.spyOn(component.instance().cellToDate, 'get').mockReturnValue(mockCellTime)
 
   component.instance().getTimeFromTouchEvent(mockEvent)
 
   expect(document.elementFromPoint).toHaveBeenCalledWith(mockEvent.touches[0].clientX, mockEvent.touches[0].clientY)
-  expect(cellToDateSpy).toHaveBeenCalledWith(mockTargetElement)
+  expect(cellToDateSpy).toHaveBeenCalled()
   expect(mainSpy).toHaveReturnedWith(mockCellTime)
 
   mainSpy.mockRestore()
@@ -86,14 +82,14 @@ test('endSelection', () => {
   setStateSpy.mockRestore()
 })
 
-test('handlers get called', () => {
+test('mouse handlers get called', () => {
   const component = shallow(<DatePicker />)
   const anInstance = component.find('.rgdp__grid-cell').first()
 
   const spies = {
+    handleSelectionStart: jest.spyOn(component.instance(), 'handleSelectionStartEvent'),
     handleMouseEnter: jest.spyOn(component.instance(), 'handleMouseEnterEvent'),
-    handleMouseUp: jest.spyOn(component.instance(), 'handleMouseUpEvent'),
-    handleSelectionStart: jest.spyOn(component.instance(), 'handleSelectionStartEvent')
+    handleMouseUp: jest.spyOn(component.instance(), 'handleMouseUpEvent')
   }
 
   anInstance.prop('onMouseDown')()
@@ -105,4 +101,37 @@ test('handlers get called', () => {
 
   anInstance.prop('onMouseUp')()
   expect(spies.handleMouseUp).toHaveBeenCalled()
+
+  Object.keys(spies).forEach(spyName => {
+    spies[spyName].mockRestore()
+  })
+})
+
+test('touch handlers get called', () => {
+  const spies = {
+    onTouchStart: jest.spyOn(DatePicker.prototype, 'handleSelectionStartEvent'),
+    onTouchMove: jest.spyOn(DatePicker.prototype, 'handleTouchMoveEvent'),
+    onTouchEnd: jest.spyOn(DatePicker.prototype, 'handleTouchEndEvent')
+  }
+
+  const component = shallow(<DatePicker />)
+  const anInstance = component.find('.rgdp__grid-cell').first()
+
+  const mockEvent = {
+    touches: [{ clientX: 1, clientY: 2 }, { clientX: 100, clientY: 200 }]
+  }
+
+  anInstance.prop('onTouchStart')()
+  expect(spies.onTouchStart).toHaveBeenCalled()
+  spies.onTouchStart.mockReset()
+
+  anInstance.prop('onTouchMove')(mockEvent)
+  expect(spies.onTouchMove).toHaveBeenCalled()
+
+  anInstance.prop('onTouchEnd')()
+  expect(spies.onTouchEnd).toHaveBeenCalled()
+
+  Object.keys(spies).forEach(spyName => {
+    spies[spyName].mockRestore()
+  })
 })