refactor: migrate storybook mocking to sb.mock()

.storybook/preview.tsx

@@ -3,10 +3,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import { Suspense, useEffect } from 'react'
 import { BrowserRouter } from 'react-router'
+import { sb } from 'storybook/test'
 import { ThemeProvider, useTheme } from 'src/layout/ThemeContext'
 import i18n from 'src/locale/allTranslations'
 import 'src/index.scss'
 
+sb.mock(import('../src/api/groupByService.ts'))
+sb.mock(import('../src/api/gtfsService.ts'))
+sb.mock(import('../src/hooks/useFormQuerys.ts'))
+sb.mock(import('../src/api/agencyList.ts'))
+sb.mock(import('../src/pages/velocityHeatmap/useVelocityAggregationData.ts'))
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/pages/components/map-related/MapLayers/BusToolTip.stories.tsx

@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { getRoutesByLineRef } from 'src/api/gtfsService'
 import Widget from 'src/shared/Widget'
-import {
-  busToolTipMockedRoute,
-  busToolTipMockedSiriRides,
-} from '../../../../../.storybook/mockData'
 import { BusToolTip, BusToolTipProps } from './BusToolTip'
 
 const meta = {
@@ -26,37 +23,19 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const routeHandler = http.get(
-  (info) => new URL(info.request.url).pathname === '/gtfs_routes/list',
-  ({ request }) => {
-    const { searchParams } = new URL(request.url)
-    const matchesLineRef = searchParams.get('line_refs') === '2974'
-    const matchesOperatorRef = searchParams.get('operator_refs') === '3'
-
-    if (!matchesLineRef || !matchesOperatorRef) {
-      return HttpResponse.json()
-    }
-
-    return HttpResponse.json(busToolTipMockedRoute)
-  },
-)
-
-const ridesHandler = http.get(
-  (info) => new URL(info.request.url).pathname === '/siri_rides/list',
-  ({ request }) => {
-    const { searchParams } = new URL(request.url)
-
-    const matchesLineRef = searchParams.get('siri_route__line_refs') === '2974'
-    const matchesRouteRef = searchParams.get('siri_route_ids') === '973'
-    const matchesVehicleRef = searchParams.get('vehicle_refs') === '23321002'
-
-    if (!matchesLineRef || !matchesRouteRef || !matchesVehicleRef) {
-      return HttpResponse.json()
-    }
-
-    return HttpResponse.json(busToolTipMockedSiriRides)
-  },
-)
+const mockedRoute = {
+  id: 3753789,
+  date: new Date('2023-11-01'),
+  lineRef: 2974,
+  operatorRef: 3,
+  routeShortName: '1',
+  routeLongName: 'שדרות מנחם בגין/כביש 7-גדרה<->שדרות מנחם בגין/כביש 7-גדרה-3#',
+  routeMkt: '33001',
+  routeDirection: '3',
+  routeAlternative: '#',
+  agencyName: 'אגד',
+  routeType: '3',
+}
 
 const defaultArgs: BusToolTipProps = {
   position: {
@@ -94,19 +73,15 @@ const defaultArgs: BusToolTipProps = {
 }
 
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [routeHandler, ridesHandler],
-    },
+  beforeEach: () => {
+    mocked(getRoutesByLineRef).mockResolvedValue([mockedRoute])
   },
   args: defaultArgs,
 }
 
 export const WithComplaint: Story = {
-  parameters: {
-    msw: {
-      handlers: [routeHandler, ridesHandler],
-    },
+  beforeEach: () => {
+    mocked(getRoutesByLineRef).mockResolvedValue([mockedRoute])
   },
   args: defaultArgs,
   play: async ({ canvasElement, userEvent }) => {

src/pages/components/map-related/MapLayers/ComplaintModal.stories.tsx

@@ -1,8 +1,8 @@
 import type { GtfsRoutePydanticModel } from '@hasadna/open-bus-api-client'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
 import { useState } from 'react'
-import { busToolTipMockedSiriRides } from '../../../../../.storybook/mockData'
+import { mocked } from 'storybook/test'
+import { useBusOperatorQuery, useCitiesQuery } from 'src/hooks/useFormQuerys'
 import type { BusToolTipProps } from './BusToolTip'
 import ComplaintModal from './ComplaintModal'
 
@@ -63,32 +63,6 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const siriRidesHandler = http.get(
-  (info) => new URL(info.request.url).pathname === '/siri_rides/list',
-  ({ request }) => {
-    const { searchParams } = new URL(request.url)
-    const matchesRouteId = searchParams.get('siri_route_ids') === '973'
-    const matchesLineRef = searchParams.get('siri_route__line_refs') === '2974'
-    const matchesVehicleRef = searchParams.get('vehicle_refs') === '23321002'
-
-    if (!matchesRouteId || !matchesLineRef || !matchesVehicleRef) {
-      return HttpResponse.json([])
-    }
-
-    return HttpResponse.json(busToolTipMockedSiriRides)
-  },
-)
-
-const operatorsHandler = http.get(
-  (info) => new URL(info.request.url).pathname === '/gov/operators',
-  () => HttpResponse.json({ success: true, data: [{ dataText: 'אגד', dataCode: 3 }] }),
-)
-
-const citiesHandler = http.get(
-  (info) => new URL(info.request.url).pathname === '/gov/cities',
-  () => HttpResponse.json({ success: true, data: [{ dataText: 'גדרה', dataCode: 2550 }] }),
-)
-
 const defaultArgs: BusToolTipProps & { route: GtfsRoutePydanticModel } = {
   position: {
     loc: [31.799982, 34.786926],
@@ -138,10 +112,19 @@ const defaultArgs: BusToolTipProps & { route: GtfsRoutePydanticModel } = {
 }
 
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [siriRidesHandler, operatorsHandler, citiesHandler],
-    },
+  beforeEach: () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- partial UseQueryResult mock
+    mocked(useBusOperatorQuery).mockReturnValue({
+      data: [{ dataText: 'אגד', dataCode: 3 }],
+      isLoading: false,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument -- partial UseQueryResult mock
+    mocked(useCitiesQuery).mockReturnValue({
+      data: [{ dataText: 'גדרה', dataCode: 2550 }],
+      isLoading: false,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any)
   },
   args: {
     position: defaultArgs.position,

src/pages/components/map-related/MapWithLocationsAndPath.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { getAgencyList } from 'src/api/agencyList'
 import { plannedRouteStops, positionGroups } from './mapStorybookData'
 import { MapWithLocationsAndPath } from './MapWithLocationsAndPath'
 
@@ -42,18 +43,12 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
 export const WhitData: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get(
-          (info) => new URL(info.request.url).pathname === '/gtfs_agencies/list',
-          async () => {
-            const { agencies } = await import('../../../../.storybook/mockData')
-            return HttpResponse.json(agencies)
-          },
-        ),
-      ],
-    },
+  beforeEach: () => {
+    mocked(getAgencyList).mockResolvedValue([
+      { date: new Date('2024-02-11'), operatorRef: 3, agencyName: 'אגד' },
+      { date: new Date('2024-02-11'), operatorRef: 5, agencyName: 'דן' },
+      { date: new Date('2024-02-11'), operatorRef: 18, agencyName: 'קווים' },
+    ])
   },
   args: {
     plannedRouteStops: plannedRouteStops,

src/pages/dashboard/AllLineschart/AllLinesChart.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { useGroupBy } from 'src/api/groupByService'
 import dayjs from 'src/dayjs'
 import { getPastDate } from '../../../../.storybook/main'
 import AllLinesChart from './AllLinesChart'
@@ -38,19 +39,34 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const URL =
-  'https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2024-02-05&date_to=2024-02-12&group_by=operator_ref&exclude_hour_from=23&exclude_hour_to=2'
-
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get(URL, async () => {
-          const { allLineMock } = await import('../../../../.storybook/mockData')
-          return HttpResponse.json(allLineMock)
-        }),
+  beforeEach: () => {
+    mocked(useGroupBy).mockReturnValue([
+      [
+        {
+          totalRoutes: 20235,
+          totalPlannedRides: 47824,
+          totalActualRides: 46939,
+          operatorRef: {
+            date: new Date('2024-02-11'),
+            operatorRef: 3,
+            agencyName: 'אגד',
+          },
+        },
+        {
+          totalRoutes: 6686,
+          totalPlannedRides: 24970,
+          totalActualRides: 24833,
+          operatorRef: {
+            date: new Date('2024-02-11'),
+            operatorRef: 5,
+            agencyName: 'דן',
+          },
+        },
       ],
-    },
+      false,
+      null,
+    ])
   },
   args: {
     startDate: dayjs(getPastDate()).subtract(7, 'day'),

src/pages/dashboard/ArrivalByTimeChart/DayTimeChart.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { useGroupBy } from 'src/api/groupByService'
 import dayjs from 'src/dayjs'
 import { getPastDate } from '../../../../.storybook/main'
 import DayTimeChart from './DayTimeChart'
@@ -45,19 +46,25 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const URL =
-  'https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2024-02-05&date_to=2024-02-12&group_by=operator_ref,gtfs_route_date&exclude_hour_from=23&exclude_hour_to=2'
-
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get(URL, async () => {
-          const { arrivalByTimeChart } = await import('../../../../.storybook/mockData')
-          return HttpResponse.json(arrivalByTimeChart)
-        }),
+  beforeEach: () => {
+    mocked(useGroupBy).mockReturnValue([
+      [
+        {
+          gtfsRouteDate: new Date('2024-02-11'),
+          totalRoutes: 20235,
+          totalPlannedRides: 47824,
+          totalActualRides: 46939,
+          operatorRef: {
+            date: new Date('2024-02-11'),
+            operatorRef: 3,
+            agencyName: 'אגד',
+          },
+        },
       ],
-    },
+      false,
+      null,
+    ])
   },
   args: {
     startDate: dayjs(getPastDate()).subtract(7, 'day'),

src/pages/dashboard/WorstLinesChart/WorstLinesChart.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { useGroupBy } from 'src/api/groupByService'
 import dayjs from 'src/dayjs'
 import { getPastDate } from '../../../../.storybook/main'
 import WorstLinesChart from './WorstLinesChart'
@@ -42,19 +43,27 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const URL =
-  'https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2024-02-05&date_to=2024-02-12&group_by=operator_ref,line_ref&exclude_hour_from=23&exclude_hour_to=2'
-
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get(URL, async () => {
-          const { worstLinesChart } = await import('../../../../.storybook/mockData')
-          return HttpResponse.json(worstLinesChart)
-        }),
+  beforeEach: () => {
+    mocked(useGroupBy).mockReturnValue([
+      [
+        {
+          lineRef: 2974,
+          routeShortName: "['1']",
+          routeLongName: 'שדרות מנחם בגין/כביש 7-גדרה<->שדרות מנחם בגין/כביש 7-גדרה-3#',
+          totalRoutes: 20,
+          totalPlannedRides: 100,
+          totalActualRides: 40,
+          operatorRef: {
+            date: new Date('2024-02-11'),
+            operatorRef: 3,
+            agencyName: 'אגד',
+          },
+        },
       ],
-    },
+      false,
+      null,
+    ])
   },
   args: {
     startDate: dayjs(getPastDate()).subtract(7, 'day'),

src/pages/operator/OperatorGaps.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { http, HttpResponse } from 'msw'
+import { mocked } from 'storybook/test'
+import { useGroupBy } from 'src/api/groupByService'
 import dayjs from 'src/dayjs'
 import { getPastDate } from '../../../.storybook/main'
 import { OperatorGaps } from './OperatorGaps'
@@ -28,19 +29,24 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const URL =
-  'https://open-bus-stride-api.hasadna.org.il/gtfs_rides_agg/group_by?date_from=2024-02-11&date_to=2024-02-12&group_by=operator_ref&exclude_hour_from=23&exclude_hour_to=2'
-
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers: [
-        http.get(URL, async () => {
-          const { operatorGaps } = await import('../../../.storybook/mockData')
-          return HttpResponse.json(operatorGaps)
-        }),
+  beforeEach: () => {
+    mocked(useGroupBy).mockReturnValue([
+      [
+        {
+          totalRoutes: 20235,
+          totalPlannedRides: 47824,
+          totalActualRides: 46939,
+          operatorRef: {
+            date: new Date('2024-02-11'),
+            operatorRef: 3,
+            agencyName: 'Egged',
+          },
+        },
       ],
-    },
+      false,
+      null,
+    ])
   },
   args: {
     operatorId: '3',