fix: stabilize timeline HAR and timestamp tests (#1562)

Author: AvivAbachi

src/pages/historicTimeline/index.tsx

@@ -36,7 +36,7 @@ const TimelinePage = () => {
   const { operatorId, lineNumber, timestamp, routeKey } = search
   const [stopKey, setStopKey] = useState<string | undefined>()
 
-  const time = useMemo(() => dayjs(search.timestamp), [timestamp])
+  const time = useMemo(() => dayjs(search.timestamp).startOf('minute'), [timestamp])
 
   const routesQuery = useQuery({
     queryFn: async () => {
@@ -119,7 +119,7 @@ const TimelinePage = () => {
               const newTimestamp = ts
                 .hour(currentTime.hour())
                 .minute(currentTime.minute())
-                .second(currentTime.second())
+                .startOf('minute')
                 .valueOf()
               setSearch((current) => ({ ...current, timestamp: newTimestamp }))
             }}
@@ -135,7 +135,7 @@ const TimelinePage = () => {
               const newTimestamp = currentDate
                 .hour(ts.hour())
                 .minute(ts.minute())
-                .second(ts.second())
+                .startOf('minute')
                 .valueOf()
               setSearch((current) => ({ ...current, timestamp: newTimestamp }))
             }}

src/test_pages/TimelinePage.ts

@@ -29,8 +29,13 @@ class TimelinePage extends BasePage {
     return this.page.locator('#operator-select')
   }
 
-  public get timelineGraph() {
-    return this.page.locator('h4')
+  public get timelineHourLabels() {
+    return this.page.getByText(/^\d{2}:\d{2}:\d{2}$/)
+  }
+
+  public async WaitForLoadingCompletion() {
+    await this.page.locator('.MuiCircularProgress-svg').waitFor({ state: 'hidden' })
+    await this.page.waitForLoadState('networkidle')
   }
 
   public get operatorsList() {

tests/HAR/timeline.har

@@ -8,13 +8,10 @@
  * After running, commit the updated HAR files in tests/HAR/.
  */
 import { Page, test } from '@playwright/test'
+import { getPastDate } from './utils'
 
 test.describe.configure({ mode: 'serial' })
 
-function getPastDate() {
-  return new Date('2024-02-12T15:00:00+00:00')
-}
-
 async function setupRecording(page: Page, harFile: string) {
   await page.clock.setSystemTime(getPastDate())
   await page.emulateMedia({ reducedMotion: 'reduce' })
@@ -60,33 +57,18 @@ test.describe('Record HAR files', () => {
     await page.getByPlaceholder('לדוגמה: 17א').fill('1')
     await page.waitForLoadState('networkidle')
 
-    // Open route dropdown and wait for options to load
-    await openDropdownAndWait(page, '#route-select')
-
-    // Select route to trigger stops fetch
-    const routeWithStops =
-      'בית ספר אלונים/הבנים-פרדס חנה כרכור ⟵ יד לבנים/דרך הבנים-פרדס חנה כרכור  '
-    const routeExists = await page.getByRole('option', { name: routeWithStops }).count()
-    if (routeExists > 0) {
-      await page.getByRole('option', { name: routeWithStops }).click()
-      await page.waitForLoadState('networkidle')
-      await openDropdownAndWait(page, '#stop-select')
-      await page.keyboard.press('Escape')
-    } else {
-      await page.keyboard.press('Escape')
-    }
-
     // Select route used for timeline hits test
     await openDropdownAndWait(page, '#route-select')
     const routeWithHits = 'שדרות מנחם בגין/כביש 7-גדרה ⟵ שדרות מנחם בגין/כביש 7-גדרה'
     const hitsRouteExists = await page.getByRole('option', { name: routeWithHits }).count()
     if (hitsRouteExists > 0) {
-      await page.getByRole('option', { name: routeWithHits }).click()
+      await page.getByRole('option', { name: routeWithHits, exact: true }).click()
       await page.waitForLoadState('networkidle')
       await openDropdownAndWait(page, '#stop-select')
       const stopOption = page.getByRole('option', { name: 'חיים הרצוג/שדרות מנחם בגין (גדרה)' })
       if ((await stopOption.count()) > 0) {
         await stopOption.click()
+        await page.locator('.MuiCircularProgress-svg').waitFor({ state: 'hidden' })
         await page.waitForLoadState('networkidle')
       } else {
         await page.keyboard.press('Escape')
@@ -106,8 +88,8 @@ test.describe('Record HAR files', () => {
     if ((await danBaDarom.count()) > 0) {
       await danBaDarom.click()
       await page.getByPlaceholder('לדוגמה: 17א').fill('9999')
-      await page.waitForTimeout(3000)
       await page.waitForLoadState('networkidle')
+      await page.getByText('הקו לא נמצא').waitFor({ state: 'visible' })
     } else {
       await page.keyboard.press('Escape')
     }

tests/recordHAR.spec.ts

@@ -1,6 +1,9 @@
 import { expect, test } from 'src/test_pages/TimelinePage'
 import { harOptions, setupTest, verifyDateFromParameter, visitPage } from './utils'
 
+const ROUTE = 'שדרות מנחם בגין/כביש 7-גדרה ⟵ שדרות מנחם בגין/כביש 7-גדרה'
+const STATION = 'חיים הרצוג/שדרות מנחם בגין (גדרה)'
+
 test.describe('Timeline Page Tests', () => {
   test.beforeEach(async ({ page, advancedRouteFromHAR }) => {
     await setupTest(page)
@@ -50,19 +53,15 @@ test.describe('Timeline Page Tests', () => {
     await timelinePage.selectOperator('אגד')
     await timelinePage.lineNumberField.fill('1')
     await expect(timelinePage.routeSelect).toBeEnabled()
-    await timelinePage.selectRoute(
-      'בית ספר אלונים/הבנים-פרדס חנה כרכור ⟵ יד לבנים/דרך הבנים-פרדס חנה כרכור  ',
-    )
+    await timelinePage.selectRoute(ROUTE)
     await expect(timelinePage.stationSelect).toBeEnabled()
   })
 
   test('Should load stations list', async ({ timelinePage }) => {
     await timelinePage.selectOperator('אגד')
     await timelinePage.lineNumberField.fill('1')
     await expect(timelinePage.routeSelect).toBeEnabled()
-    await timelinePage.selectRoute(
-      'בית ספר אלונים/הבנים-פרדס חנה כרכור ⟵ יד לבנים/דרך הבנים-פרדס חנה כרכור  ',
-    )
+    await timelinePage.selectRoute(ROUTE)
     await expect(timelinePage.stationSelect).toBeEnabled()
     await timelinePage.stationSelect.click()
     const options = await timelinePage.getDropdownOptions()
@@ -75,10 +74,12 @@ test.describe('Timeline Page Tests', () => {
     await timelinePage.selectOperator('אגד')
     await timelinePage.lineNumberField.fill('1')
     await expect(timelinePage.routeSelect).toBeEnabled()
-    await timelinePage.selectRoute('שדרות מנחם בגין/כביש 7-גדרה ⟵ שדרות מנחם בגין/כביש 7-גדרה')
+    await timelinePage.selectRoute(ROUTE)
     await expect(timelinePage.stationSelect).toBeEnabled()
-    await timelinePage.selectStation('חיים הרצוג/שדרות מנחם בגין (גדרה)')
-    await expect(timelinePage.timelineGraph).toBeEnabled()
+    await timelinePage.selectStation(STATION)
+    await timelinePage.WaitForLoadingCompletion()
+    await expect(timelinePage.timelineHourLabels).toContainText(['17:00:59'])
+    expect(await timelinePage.timelineHourLabels.count()).toBe(49)
   })
 
   test('Verify date_from parameter', async ({ page }) => {