Move TimelineHours logic to a presenter and add tests

Author: ethanshar

src/timeline/TimelineHours.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react';
 import {View, Text, TouchableWithoutFeedback, ViewStyle, TextStyle, Dimensions, StyleSheet} from 'react-native';
 import range from 'lodash/range';
 import {HOUR_BLOCK_HEIGHT} from './Packer';
+import {buildTimeString, calcTimeByPosition} from './helpers/presenter';
 
 const {width: dimensionWidth} = Dimensions.get('window');
 
@@ -40,13 +41,9 @@ const TimelineHours = (props: TimelineHoursProps) => {
 
   const handleBackgroundPress = useCallback(event => {
     const yPosition = event.nativeEvent.locationY;
-    const halfHourBlockHeight = HOUR_BLOCK_HEIGHT / 2;
-    let time = yPosition / halfHourBlockHeight / 2;
-    time = Math.round(time * 2) / 2;
+    const {hour, minutes} = calcTimeByPosition(yPosition, HOUR_BLOCK_HEIGHT);
 
-    const hour = Math.floor(time);
-    const minutes = (time - Math.floor(time)) * 60;
-    const timeString = `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+    const timeString = buildTimeString(hour, minutes);
     onBackgroundLongPress?.(timeString, {hour, minutes});
   }, []);
 

src/timeline/__tests__/presenter.spec.js

@@ -0,0 +1,62 @@
+import * as uut from '../helpers/presenter';
+
+describe('timeline presenter', () => {
+  describe('calcTimeByPosition', () => {
+    it('should return hour/minutes by position - basic case 1', () => {
+      const {hour, minutes} = uut.calcTimeByPosition(300, 100);
+      expect(hour).toBe(3);
+      expect(minutes).toBe(0);
+    });
+
+    it('should return hour/minutes by position - basic case 2', () => {
+      const {hour, minutes} = uut.calcTimeByPosition(350, 100);
+      expect(hour).toBe(3);
+      expect(minutes).toBe(30);
+    });
+
+    it('should round time to nearest 30 minutes block', () => {
+      const time1 = uut.calcTimeByPosition(310, 100);
+      expect(time1.hour).toBe(3);
+      expect(time1.minutes).toBe(0);
+
+      const time2 = uut.calcTimeByPosition(280, 100);
+      expect(time2.hour).toBe(3);
+      expect(time2.minutes).toBe(0);
+
+      const time3 = uut.calcTimeByPosition(440, 100);
+      expect(time3.hour).toBe(4);
+      expect(time3.minutes).toBe(30);
+
+      const time4 = uut.calcTimeByPosition(1488, 100);
+      expect(time4.hour).toBe(15);
+      expect(time4.minutes).toBe(0);
+    });
+
+    it('should handle different hour block heights', () => {
+      const time1 = uut.calcTimeByPosition(350, 85);
+      expect(time1.hour).toBe(4);
+      expect(time1.minutes).toBe(0);
+
+      const time2 = uut.calcTimeByPosition(350, 145);
+      expect(time2.hour).toBe(2);
+      expect(time2.minutes).toBe(30);
+    });
+  });
+
+  describe('buildTimeString', () => {
+    it('should construct time string based on given hour/mins', () => {
+      expect(uut.buildTimeString(3, 12)).toBe('03:12:00');
+      expect(uut.buildTimeString(23, 55)).toBe('23:55:00');
+    });
+
+    it('should padding hour/minutes with zeroes', () => {
+      expect(uut.buildTimeString(3, 0)).toBe('03:00:00');
+      expect(uut.buildTimeString(9, 5)).toBe('09:05:00');
+    });
+
+    it('should default undefined hour/min to zeroes', () => {
+      expect(uut.buildTimeString(undefined, 30)).toBe('00:30:00');
+      expect(uut.buildTimeString(9, undefined)).toBe('09:00:00');
+    });
+  });
+});

src/timeline/helpers/presenter.ts

@@ -0,0 +1,13 @@
+export function calcTimeByPosition(yPosition: number, hourBlockHeight: number) {
+  const halfHourBlockHeight = hourBlockHeight / 2;
+  let time = yPosition / halfHourBlockHeight / 2;
+  time = Math.round(time * 2) / 2;
+
+  const hour = Math.floor(time);
+  const minutes = (time - Math.floor(time)) * 60;
+  return {hour, minutes};
+}
+
+export function buildTimeString(hour = 0, minutes = 0) {
+  return `${hour.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:00`;
+}