fix(timeline): fixed issue with Nov DST (#1259)

* fix(timeline): fixed issue with Nov DST * docs: changeset * Remove console logs Co-authored-by: Mark Anthony Cianfrani <[email protected]> * remove console logs Co-authored-by: Mark Anthony Cianfrani <[email protected]> --------- Co-authored-by: Mark Anthony Cianfrani <[email protected]>
RocketCommunicationsInc · Nov 3, 2023 · e97e46b · e97e46b
1 parent 4aa2337
commit e97e46b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/.changeset/funny-hotels-hear.md b/.changeset/funny-hotels-hear.md
@@ -0,0 +1,8 @@
+---
+"@astrouxds/astro-web-components": patch
+"angular-workspace": patch
+"@astrouxds/angular": patch
+"@astrouxds/react": patch
+---
+
+Fixed an issue where timeline would display events incorrectly when the events spanned over daylight savings time
diff --git a/packages/web-components/src/components/rux-timeline/helpers.ts b/packages/web-components/src/components/rux-timeline/helpers.ts
@@ -4,7 +4,6 @@ import {
     addDays,
     addMinutes,
     subMinutes,
-    differenceInDays,
 } from 'date-fns'
 import { formatInTimeZone } from 'date-fns-tz'
 
@@ -50,7 +49,9 @@ export function dateRange(
     }
 
     if (interval === 'day') {
-        const days = differenceInDays(endDate, startDate)
+        //differenceInHours used here to avoid DST issues
+        //https://github.com/date-fns/date-fns/blob/main/src/differenceInDays/index.ts#L17C2-L17C2
+        const days = Math.floor(differenceInHours(endDate, startDate) / 24) | 0
 
         const output = [...Array(days).keys()].map((i) => {
             const time = agnosticAddDays(startDate, i)
@@ -64,6 +65,7 @@ export function dateRange(
 
     if (interval === 'hour') {
         let days = differenceInHours(endDate, startDate)
+
         days = days / intervalValue
 
         const output = [...Array(days).keys()].map((i) => {

diff --git a/packages/web-components/src/components/rux-timeline/test/timeline.spec.ts b/packages/web-components/src/components/rux-timeline/test/timeline.spec.ts
@@ -2,18 +2,18 @@ import { test, expect } from '../../../../tests/utils/_astro-fixtures'
 // import { test } from "stencil-playwright";
 // import { expect } from "@playwright/test";
 test.describe('Timeline DST', () => {
-    test('it should handle DST in UTC', async ({ page }) => {
+    test('it should handle DST start in UTC', async ({ page }) => {
         const template = `
-            <rux-timeline 
-                timezone="UTC" 
-                start="2023-03-11T00:00:00.000Z" 
-                end="2023-03-15T00:00:00.000Z" 
-                interval="day" 
+            <rux-timeline
+                timezone="UTC"
+                start="2023-03-11T00:00:00.000Z"
+                end="2023-03-15T00:00:00.000Z"
+                interval="day"
             >
                 <rux-track slot="ruler">
                     <rux-ruler></rux-ruler>
                 </rux-track>
-            </rux-timeline>  
+            </rux-timeline>
         `
         await page.setContent(template)
         const rulerEl = await page.locator('rux-ruler')
@@ -28,6 +28,32 @@ test.describe('Timeline DST', () => {
         })
         expect(days).toEqual(['03/11', '03/12', '03/13', '03/14'])
     })
+    test('it should handle DST end in UTC', async ({ page }) => {
+        const template = `
+          <rux-timeline
+              timezone="UTC"
+              start="2023-11-04T00:00:00.000Z"
+              end="2023-11-08T00:00:00.000Z"
+              interval="day"
+          >
+              <rux-track slot="ruler">
+                  <rux-ruler></rux-ruler>
+              </rux-track>
+          </rux-timeline>
+      `
+        await page.setContent(template)
+        const rulerEl = await page.locator('rux-ruler')
+
+        const days = await rulerEl.evaluate((el) => {
+            const rulerSpans = el.shadowRoot?.querySelectorAll('span')
+            if (rulerSpans) {
+                return [...rulerSpans].map((e) => e.innerHTML)
+            } else {
+                return []
+            }
+        })
+        expect(days).toEqual(['11/04', '11/05', '11/06', '11/07'])
+    })
 })
 test.describe('Timeline', () => {
     test.beforeEach(async ({ page }) => {