test: add first unit test

package.json

@@ -47,6 +47,7 @@
     "serve": "vite preview",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
+    "test:unit": "vitest",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
@@ -65,6 +66,9 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.37.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/geolib": "^2.0.23",
     "@types/leaflet": "^1.7.11",
     "@types/lodash.debounce": "^4.0.7",
@@ -79,8 +83,10 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
+    "jsdom": "^22.1.0",
     "openapi-typescript-codegen": "^0.23.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "vitest": "^0.34.6"
   },
   "packageManager": "[email protected]"
 }

setupTests.ts

@@ -0,0 +1,9 @@
+import { expect, afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import * as matchers from '@testing-library/jest-dom/matchers'
+// runs a cleanup after each test case (e.g. clearing jsdom)
+
+expect.extend(matchers)
+afterEach(() => {
+  cleanup()
+})

src/pages/components/utils/index.test.ts

@@ -0,0 +1,41 @@
+//import { describe, it, expect } from 'vitest';
+
+import { HourlyData, sortByMode } from '.'
+
+describe('sortByMode', () => {
+  it('when mode param is "hour" - should be sorted properly', () => {
+    const gapsResponse = [
+      {
+        planned_hour: '01:00',
+        planned_rides: 1,
+        actual_rides: 0,
+      },
+      {
+        planned_hour: '02:00',
+        planned_rides: 1,
+        actual_rides: 1,
+      },
+    ] as HourlyData[]
+    const res = sortByMode(gapsResponse, 'hour')
+    expect(res[0].planned_hour).toBe('01:00')
+    expect(res[0].planned_rides).toBe(1)
+  })
+
+  it('when mode param is severity - should be sorted properly', () => {
+    const gapsResponse = [
+      {
+        planned_hour: '01:00',
+        planned_rides: 1,
+        actual_rides: 1,
+      },
+      {
+        planned_hour: '02:00',
+        planned_rides: 1,
+        actual_rides: 0,
+      },
+    ] as HourlyData[]
+    const res = sortByMode(gapsResponse, 'severity')
+     /* record with less actual rides should come first */
+    expect(res[0].actual_rides).toBe(0)
+  })
+})

src/pages/useGapsList.ts

@@ -46,6 +46,8 @@ export const useGapsList = (
       try {
         const gapsList: GapsList = await getGapsAsync(fromDate, toDate, operatorRef, lineRef)
         const result = processData(gapsList)
+        console.log(result[0])
+        console.log('mode: ', sortingMode)
         setHourlyData(sortByMode(result, sortingMode))
       } catch (error) {
         console.error('Error fetching data:', error)

tsconfig.json

@@ -19,7 +19,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client", "vite-plugin-svgr/client","node"]
+    "types": ["vite/client", "vitest/globals", "vite-plugin-svgr/client","node"]
   },
   "include": ["src"]
 }

vite.config.ts

@@ -12,4 +12,14 @@ export default defineConfig({
   server: {
     port: 3000,
   },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './setupTests.ts',
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/*.spec.*' /* do not include playwright files */
+    ]
+  }
 })