- {/* Time Rows */}
- {timeSteps.map((step) => (
-
- ))}
+ {/* Red Marker Line */}
- {/* Red Marker Line */}
baby-sleep-tracker-frontend@0.1.0 test
+> vitest run --reporter=dot
+
+
+ RUN v2.1.9 /Users/jhag/projects/babymonitor/frontend
+
+ ✓ tests/simple.test.ts (1 test) 1ms
+ ✓ tests/unit/chartHelpers.test.ts (9 tests) 2ms
+ ✓ tests/unit/time.test.ts (16 tests) 3ms
+ ✓ tests/unit/StatusBanner.test.tsx (5 tests) 19ms
+ ✓ tests/unit/TimeAdjuster.test.tsx (3 tests) 24ms
+ ❯ src/components/stats/SleepTimetable.test.tsx (4 tests | 3 failed) 42ms
+ × SleepTimetable > renders loading state 17ms
+ → Invalid Chai property: toBeInTheDocument
+ × SleepTimetable > renders empty state when no data is available 1ms
+ → Invalid Chai property: toBeInTheDocument
+ × SleepTimetable > renders the grid correctly with hourly rows and biennial labels 19ms
+ → Unable to find an element with the text: SUN. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+Ignored nodes: comments, script, style
+[36m[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0mSleep Timetable[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m [0m
+ [36m
[39m
+ [0mSun[0m
+ [36m
[39m
+ [36m
[39m
+ [0mMon[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m00:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m02:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m04:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m06:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m08:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m10:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m12:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m14:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m16:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m18:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m20:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m22:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+[36m[39m
+ ✓ tests/unit/SleepButton.test.tsx (3 tests) 62ms
+
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders loading state
+Error: Invalid Chai property: toBeInTheDocument
+ ❯ src/components/stats/SleepTimetable.test.tsx:21:53
+ 19| (useStats as any).mockReturnValue({ timetable: null, isLoading: tr…
+ 20| render(
);
+ 21| expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocumen…
+ | ^
+ 22| });
+ 23|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders empty state when no data is available
+Error: Invalid Chai property: toBeInTheDocument
+ ❯ src/components/stats/SleepTimetable.test.tsx:27:50
+ 25| (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLo…
+ 26| render(
);
+ 27| expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+ | ^
+ 28| });
+ 29|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders the grid correctly with hourly rows and biennial labels
+TestingLibraryElementError: Unable to find an element with the text: SUN. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+Ignored nodes: comments, script, style
+[36m[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0mSleep Timetable[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m [0m
+ [36m
[39m
+ [0mSun[0m
+ [36m
[39m
+ [36m
[39m
+ [0mMon[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m00:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m02:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m04:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m06:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m08:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m10:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m12:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m14:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m16:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m18:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m20:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [0m22:00[0m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+ [36m
[39m
+[36m[39m
+ ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
+ ❯ src/components/stats/SleepTimetable.test.tsx:48:19
+ 46|
+ 47| // Check for day headers
+ 48| expect(screen.getByText('SUN')).toBeInTheDocument(); // 2025-04-20…
+ | ^
+ 49| expect(screen.getByText('MON')).toBeInTheDocument(); // 2025-04-21…
+ 50|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯
+
+ Test Files 1 failed | 6 passed (7)
+ Tests 3 failed | 38 passed (41)
+ Start at 20:10:38
+ Duration 718ms (transform 173ms, setup 0ms, collect 475ms, tests 155ms, environment 2.78s, prepare 242ms)
+
diff --git a/frontend/test_without_ansi.txt b/frontend/test_without_ansi.txt
new file mode 100644
index 0000000..52f0c0b
--- /dev/null
+++ b/frontend/test_without_ansi.txt
@@ -0,0 +1,650 @@
+
+> baby-sleep-tracker-frontend@0.1.0 test
+> vitest run --reporter=dot
+
+
+ RUN v2.1.9 /Users/jhag/projects/babymonitor/frontend
+
+ ✓ tests/simple.test.ts (1 test) 1ms
+ ✓ tests/unit/chartHelpers.test.ts (9 tests) 2ms
+ ✓ tests/unit/time.test.ts (16 tests) 2ms
+ ✓ tests/unit/StatusBanner.test.tsx (5 tests) 20ms
+ ✓ tests/unit/TimeAdjuster.test.tsx (3 tests) 24ms
+ ❯ src/components/stats/SleepTimetable.test.tsx (4 tests | 3 failed) 41ms
+ × SleepTimetable > renders loading state 15ms
+ → Invalid Chai property: toBeInTheDocument
+ × SleepTimetable > renders empty state when no data is available 1ms
+ → Invalid Chai property: toBeInTheDocument
+ × SleepTimetable > renders the grid correctly with hourly rows and biennial labels 20ms
+ → Unable to find an element with the text: SUN. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+Ignored nodes: comments, script, style
+
+
+
+
+ Sleep Timetable
+
+
+
+
+
+
+ Sun
+
+
+ Mon
+
+
+
+
+
+ 00:00
+
+
+
+
+
+
+
+ 02:00
+
+
+
+
+
+
+
+ 04:00
+
+
+
+
+
+
+
+ 06:00
+
+
+
+
+
+
+
+ 08:00
+
+
+
+
+
+
+
+ 10:00
+
+
+
+
+
+
+
+ 12:00
+
+
+
+
+
+
+
+ 14:00
+
+
+
+
+
+
+
+ 16:00
+
+
+
+
+
+
+
+ 18:00
+
+
+
+
+
+
+
+ 20:00
+
+
+
+
+
+
+
+ 22:00
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ✓ tests/unit/SleepButton.test.tsx (3 tests) 62ms
+
+⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders loading state
+Error: Invalid Chai property: toBeInTheDocument
+ ❯ src/components/stats/SleepTimetable.test.tsx:21:53
+ 19| (useStats as any).mockReturnValue({ timetable: null, isLoading: tr…
+ 20| render(
);
+ 21| expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocumen…
+ | ^
+ 22| });
+ 23|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders empty state when no data is available
+Error: Invalid Chai property: toBeInTheDocument
+ ❯ src/components/stats/SleepTimetable.test.tsx:27:50
+ 25| (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLo…
+ 26| render(
);
+ 27| expect(screen.getByText(/No data available/i)).toBeInTheDocument();
+ | ^
+ 28| });
+ 29|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯
+
+ FAIL src/components/stats/SleepTimetable.test.tsx > SleepTimetable > renders the grid correctly with hourly rows and biennial labels
+TestingLibraryElementError: Unable to find an element with the text: SUN. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+Ignored nodes: comments, script, style
+
+
+
+
+ Sleep Timetable
+
+
+
+
+
+
+ Sun
+
+
+ Mon
+
+
+
+
+
+ 00:00
+
+
+
+
+
+
+
+ 02:00
+
+
+
+
+
+
+
+ 04:00
+
+
+
+
+
+
+
+ 06:00
+
+
+
+
+
+
+
+ 08:00
+
+
+
+
+
+
+
+ 10:00
+
+
+
+
+
+
+
+ 12:00
+
+
+
+
+
+
+
+ 14:00
+
+
+
+
+
+
+
+ 16:00
+
+
+
+
+
+
+
+ 18:00
+
+
+
+
+
+
+
+ 20:00
+
+
+
+
+
+
+
+ 22:00
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
+ ❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
+ ❯ src/components/stats/SleepTimetable.test.tsx:48:19
+ 46|
+ 47| // Check for day headers
+ 48| expect(screen.getByText('SUN')).toBeInTheDocument(); // 2025-04-20…
+ | ^
+ 49| expect(screen.getByText('MON')).toBeInTheDocument(); // 2025-04-21…
+ 50|
+
+⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯
+
+ Test Files 1 failed | 6 passed (7)
+ Tests 3 failed | 38 passed (41)
+ Start at 20:12:08
+ Duration 722ms (transform 112ms, setup 0ms, collect 483ms, tests 153ms, environment 2.74s, prepare 226ms)
+
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 671ca54..b020741 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -9,7 +9,7 @@
"paths": {
"@/*": ["src/*"]
},
- "types": ["vite/client"]
+ "types": ["vite/client", "vitest/globals"]
},
"include": ["src"]
}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 3cdef26..51acb8d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -5,12 +5,6 @@ import path from 'path'
export default defineConfig({
plugins: [react(), tailwindcss()],
- test: {
- globals: true,
- environment: 'jsdom',
- include: ['src/**/*.{test,spec}.{ts,tsx}', 'tests/**/*.{test,spec}.{ts,tsx}'],
- exclude: ['**/tests/e2e/**', '**/node_modules/**'],
- },
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
@@ -24,4 +18,4 @@ export default defineConfig({
},
},
},
-})
+})
\ No newline at end of file
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..7dc9679
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+ viteConfig,
+ defineConfig({
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: ['./vitest.setup.ts'],
+ include: ['src/**/*.{test,spec}.{ts,tsx}', 'tests/**/*.{test,spec}.{ts,tsx}'],
+ exclude: ['**/tests/e2e/**', '**/node_modules/**'],
+ reporters: ['dot'],
+ },
+ })
+)
\ No newline at end of file
diff --git a/frontend/vitest.setup.ts b/frontend/vitest.setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/frontend/vitest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';