babymonitor/frontend/test_with_ansi.txt

> 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
<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.02777777777779%; 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.02777777777779%; 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:10:38
   Duration  718ms (transform 173ms, setup 0ms, collect 475ms, tests 155ms, environment 2.78s, prepare 242ms)