651 lines
20 KiB
Plaintext
651 lines
20 KiB
Plaintext
|
||
> 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)
|
||
|