Merge pull request #1726 from wix/infra/Timeline_tests

Add unit tests for the Packer util

Author: ethanshar

src/timeline/EventBlock.tsx

@@ -3,6 +3,7 @@ import {View, Text, TextStyle, TouchableOpacity, ViewStyle} from 'react-native';
 import XDate from 'xdate';
 
 export interface Event {
+  id?: string;
   start: string;
   end: string;
   title: string;

src/timeline/Packer.ts

@@ -2,16 +2,17 @@
 import XDate from 'xdate';
 import {Event, PackedEvent} from './EventBlock';
 
-export const HALF_HOUR_BLOCK_HEIGHT = 100;
+export const HOUR_BLOCK_HEIGHT = 100;
+const EVENT_BLOCK_RIGHT_MARGIN = 10;
 
 function buildEvent(column: any, left: number, width: number, dayStart: number) {
   const startTime = new XDate(column.start);
   const endTime = column.end ? new XDate(column.end) : new XDate(startTime).addHours(1);
 
   const dayStartTime = new XDate(startTime).clearTime();
 
-  column.top = (dayStartTime.diffHours(startTime) - dayStart) * HALF_HOUR_BLOCK_HEIGHT;
-  column.height = startTime.diffHours(endTime) * HALF_HOUR_BLOCK_HEIGHT;
+  column.top = (dayStartTime.diffHours(startTime) - dayStart) * HOUR_BLOCK_HEIGHT;
+  column.height = startTime.diffHours(endTime) * HOUR_BLOCK_HEIGHT;
   column.width = width;
   column.left = left;
   return column;
@@ -46,7 +47,7 @@ function pack(columns: any, width: number, calculatedEvents: Event[], dayStart:
     for (let j = 0; j < col.length; j++) {
       const colSpan = expand(col[j], i, columns);
       const L = (i / colLength) * width;
-      const W = (width * colSpan) / colLength - 10;
+      const W = (width * colSpan) / colLength - EVENT_BLOCK_RIGHT_MARGIN;
 
       calculatedEvents.push(buildEvent(col[j], L, W, dayStart));
     }

src/timeline/Timeline.tsx

@@ -5,7 +5,7 @@ import map from 'lodash/map';
 
 import {Theme} from '../types';
 import styleConstructor from './style';
-import populateEvents, {HALF_HOUR_BLOCK_HEIGHT} from './Packer';
+import populateEvents, {HOUR_BLOCK_HEIGHT} from './Packer';
 import TimelineHours from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
 
@@ -39,7 +39,7 @@ const Timeline = (props: TimelineProps) => {
   } = props;
 
   const scrollView = useRef<ScrollView>();
-  const calendarHeight = useRef((end - start) * HALF_HOUR_BLOCK_HEIGHT);
+  const calendarHeight = useRef((end - start) * HOUR_BLOCK_HEIGHT);
   const styles = useRef(styleConstructor(theme || props.styles, calendarHeight.current));
 
   const packedEvents = useMemo(() => {

src/timeline/TimelineHours.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {View, Text, ViewStyle, TextStyle, Dimensions} from 'react-native';
 import range from 'lodash/range';
-import {HALF_HOUR_BLOCK_HEIGHT} from './Packer';
+import {HOUR_BLOCK_HEIGHT} from './Packer';
 
 const {width: dimensionWidth} = Dimensions.get('window');
 
@@ -15,7 +15,7 @@ interface TimelineHoursProps {
 const TimelineHours = (props: TimelineHoursProps) => {
   const {format24h, start = 0, end = 24, styles} = props;
   // const offset = this.calendarHeight / (end - start);
-  const offset = HALF_HOUR_BLOCK_HEIGHT;
+  const offset = HOUR_BLOCK_HEIGHT;
   const EVENT_DIFF = 20;
 
   const hours = useMemo(() => {

src/timeline/__tests__/Packer.spec.js

@@ -0,0 +1,79 @@
+import uut from '../Packer';
+
+describe('Timeline Packer utils', () => {
+  const events = [
+    {
+      id: 'event_1',
+      start: '2017-09-06 01:30:00',
+      end: '2017-09-06 02:30:00',
+      title: 'Event 1'
+    },
+    {
+      id: 'event_2',
+      start: '2017-09-06 02:15:00',
+      end: '2017-09-06 02:45:00',
+      title: 'Event 2'
+    },
+    {
+      id: 'event_3',
+      start: '2017-09-06 01:55:00',
+      end: '2017-09-06 03:00:00',
+      title: 'Event 3'
+    }
+  ];
+  it('should sort events by start and end times', () => {
+    const packedEvents = uut(events, 300, 0);
+    expect(packedEvents[0].id).toBe('event_1');
+    expect(packedEvents[1].id).toBe('event_3');
+    expect(packedEvents[2].id).toBe('event_2');
+  });
+
+  describe('should set events block size', () => {
+    it('should set event block height based on their duration', () => {
+      const packedEvents = uut(events, 300, 0);
+      expect(packedEvents[0].height).toBe(100); // event 1
+      expect(packedEvents[1].height).toBeCloseTo(108.333); // event 3
+      expect(packedEvents[2].height).toBe(50); // event 2
+    });
+
+    it('should set event block width based on overlaps of 3 events', () => {
+      const packedEvents = uut(events, 300, 0);
+      expect(packedEvents[0].width).toBe(90); // event 1
+      expect(packedEvents[1].width).toBe(90); // event 3
+      expect(packedEvents[2].width).toBe(90); // event 2
+    });
+
+    it('should set event block width based on overlaps of 2 events', () => {
+      const packedEvents = uut([events[0], events[1]], 300, 0);
+      expect(packedEvents[0].width).toBe(140); // event 1
+      expect(packedEvents[1].width).toBe(140); // event 2
+    });
+
+    it('should set event block width when there is not overlaps', () => {
+      const packedEvents = uut([events[0]], 300, 0);
+      expect(packedEvents[0].width).toBe(290); // event 1
+    });
+  });
+
+  describe('should set events block position', () => {
+    it('should set top position base on the event start time', () => {
+      const packedEvents = uut(events, 300, 0);
+      expect(packedEvents[0].top).toBe(150); // event 1
+      expect(packedEvents[1].top).toBeCloseTo(191.666); // event 3
+      expect(packedEvents[2].top).toBe(225); // event 2
+    });
+
+    it('should set left position base when the 3 events overlap', () => {
+      const packedEvents = uut(events, 300, 0);
+      expect(packedEvents[0].left).toBe(0); // event 1
+      expect(packedEvents[1].left).toBe(100); // event 3
+      expect(packedEvents[2].left).toBe(200); // event 2
+    });
+
+    it('should set left position base when the 2 events overlap', () => {
+      const packedEvents = uut([events[0], events[1]], 300, 0);
+      expect(packedEvents[0].left).toBe(0); // event 1
+      expect(packedEvents[1].left).toBe(150); // event 3
+    });
+  });
+});