Add migration script and work on tests
This commit is contained in:
@@ -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
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 overflow-x-auto"
|
||||
>
|
||||
<h3
|
||||
class="text-lg font-semibold mb-4 text-gray-800"
|
||||
>
|
||||
Sleep Timetable
|
||||
</h3>
|
||||
<div
|
||||
class="min-w-[600px] flex flex-col gap-px"
|
||||
>
|
||||
<div
|
||||
class="grid"
|
||||
style="grid-template-columns: 4rem repeat(2, minmax(40px, 1fr));"
|
||||
>
|
||||
<div
|
||||
class="h-8"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-8"
|
||||
>
|
||||
Sun
|
||||
</div>
|
||||
<div
|
||||
class="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-8"
|
||||
>
|
||||
Mon
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative"
|
||||
>
|
||||
<div
|
||||
class="grid"
|
||||
style="grid-template-columns: 4rem repeat(2, minmax(40px, 1fr));"
|
||||
>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
00:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
02:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
04:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
06:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
08:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
10:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
12:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
14:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
16:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
18:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
20:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
22:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="absolute left-[4rem] right-0 h-0.5 bg-red-500 pointer-events-none z-10"
|
||||
style="top: 84.16666666666667%; transform: translateY(-50%);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
✓ 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(<Timetable {...defaultProps} />);
|
||||
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(<Timetable {...defaultProps} />);
|
||||
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
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 overflow-x-auto"
|
||||
>
|
||||
<h3
|
||||
class="text-lg font-semibold mb-4 text-gray-800"
|
||||
>
|
||||
Sleep Timetable
|
||||
</h3>
|
||||
<div
|
||||
class="min-w-[600px] flex flex-col gap-px"
|
||||
>
|
||||
<div
|
||||
class="grid"
|
||||
style="grid-template-columns: 4rem repeat(2, minmax(40px, 1fr));"
|
||||
>
|
||||
<div
|
||||
class="h-8"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-8"
|
||||
>
|
||||
Sun
|
||||
</div>
|
||||
<div
|
||||
class="text-center text-[10px] font-medium text-gray-500 uppercase flex items-center justify-center h-8"
|
||||
>
|
||||
Mon
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative"
|
||||
>
|
||||
<div
|
||||
class="grid"
|
||||
style="grid-template-columns: 4rem repeat(2, minmax(40px, 1fr));"
|
||||
>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
00:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
02:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
04:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-green-500"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
06:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
08:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
10:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
12:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
14:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
16:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
18:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
20:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
>
|
||||
22:00
|
||||
</div>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="text-[10px] text-gray-400 flex items-center justify-end pr-2 h-8"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="h-8 w-full bg-gray-50"
|
||||
/>
|
||||
<div
|
||||
class="absolute left-[4rem] right-0 h-0.5 bg-red-500 pointer-events-none z-10"
|
||||
style="top: 84.16666666666667%; transform: translateY(-50%);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
❯ 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)
|
||||
|
||||
Reference in New Issue
Block a user