Self review cleanup

KoolADE85 · KoolADE85 · commit 4d464993d357 · 2025-11-07T10:26:55.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 - Modernized `dcc.Tabs`
+- Modernized `dcc.DatePickerSingle` and `dcc.DatePickerRange`
 
 ## Changed
 - `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
@@ -50,7 +51,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3347](https://github.com/plotly/dash/pull/3347) Added 'api_endpoint' to `callback` to expose api endpoints at the provided path for use to be executed directly without dash.
 - [#3445](https://github.com/plotly/dash/pull/3445) Added API to reverse direction of slider component.
 - [#3460](https://github.com/plotly/dash/pull/3460) Add `/health` endpoint for server monitoring and health checks.
-- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
+- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies.
 
 ## Fixed
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
@@ -4,7 +4,6 @@ import Clipboard from './components/Clipboard.react';
 import ConfirmDialog from './components/ConfirmDialog.react';
 import ConfirmDialogProvider from './components/ConfirmDialogProvider.react';
 import DatePickerRange from './components/DatePickerRange';
-// import DatePickerRange from './components/DatePickerRange.react';
 import DatePickerSingle from './components/DatePickerSingle';
 import Download from './components/Download.react';
 import Dropdown from './components/Dropdown';
diff --git a/components/dash-core-components/tests/unit/calendar/Calendar.test.tsx b/components/dash-core-components/tests/unit/calendar/Calendar.test.tsx
@@ -213,10 +213,10 @@ describe('Calendar', () => {
             expectedFocusedDay: '23',
         },
         {
-            description: 'first day when selected date is not visible',
+            description: 'selected date even when not initially visible',
             visibleMonth: new Date(2020, 0, 1),
             selectedDate: new Date(2025, 9, 17),
-            expectedFocusedDay: '1',
+            expectedFocusedDay: '17', // Calendar switches to October 2025
         },
         {
             description: 'first day when no date is selected',
@@ -227,14 +227,22 @@ describe('Calendar', () => {
     ])(
         'focuses $description',
         ({visibleMonth, selectedDate, expectedFocusedDay}) => {
+            const ref = React.createRef<any>();
             render(
                 <Calendar
+                    ref={ref}
                     onSelectionChange={mockOnSelectionChange}
                     initialVisibleDate={visibleMonth}
                     selectionStart={selectedDate}
                 />
             );
 
+            // Imperatively focus the appropriate date
+            const dateToFocus = selectedDate || visibleMonth;
+            act(() => {
+                ref.current?.focusDate(dateToFocus);
+            });
+
             const focusedElement = document.activeElement;
             expect(focusedElement?.tagName).toBe('TD');
             expect(focusedElement?.textContent).toBe(expectedFocusedDay);
diff --git a/components/dash-core-components/tests/unit/calendar/CalendarDay.test.tsx b/components/dash-core-components/tests/unit/calendar/CalendarDay.test.tsx
@@ -13,11 +13,7 @@ describe('CalendarDay', () => {
                 </tbody>
             </table>
         );
-        const td = container.querySelector('td');
-        if (!td) {
-            throw new Error('td element not rendered');
-        }
-        return td;
+        return container.querySelector('td')!;
     };
 
     it('renders with correct label and inside/outside classes', () => {
@@ -26,32 +22,22 @@ describe('CalendarDay', () => {
             isOutside: false,
             showOutsideDays: true,
         });
-        expect(insideDay.textContent).toBe('15');
-        expect(
-            insideDay.classList.contains('dash-datepicker-calendar-date-inside')
-        ).toBe(true);
-        expect(
-            insideDay.classList.contains(
-                'dash-datepicker-calendar-date-outside'
-            )
-        ).toBe(false);
+        expect(insideDay).toHaveTextContent('15');
+        expect(insideDay).toHaveClass('dash-datepicker-calendar-date-inside');
+        expect(insideDay).not.toHaveClass(
+            'dash-datepicker-calendar-date-outside'
+        );
 
         const outsideDay = renderDay({
             date: new Date(2024, 11, 31),
             isOutside: true,
             showOutsideDays: true,
         });
-        expect(outsideDay.textContent).toBe('31');
-        expect(
-            outsideDay.classList.contains(
-                'dash-datepicker-calendar-date-outside'
-            )
-        ).toBe(true);
-        expect(
-            outsideDay.classList.contains(
-                'dash-datepicker-calendar-date-inside'
-            )
-        ).toBe(false);
+        expect(outsideDay).toHaveTextContent('31');
+        expect(outsideDay).toHaveClass('dash-datepicker-calendar-date-outside');
+        expect(outsideDay).not.toHaveClass(
+            'dash-datepicker-calendar-date-inside'
+        );
     });
 
     it('marks disabled day with correct attributes', () => {
@@ -62,11 +48,9 @@ describe('CalendarDay', () => {
             isDisabled: true,
         });
 
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-disabled')
-        ).toBe(true);
-        expect(td.getAttribute('aria-disabled')).toBe('true');
-        expect(td.getAttribute('tabIndex')).toBeNull();
+        expect(td).toHaveClass('dash-datepicker-calendar-date-disabled');
+        expect(td).toHaveAttribute('aria-disabled', 'true');
+        expect(td).not.toHaveAttribute('tabIndex');
     });
 
     it('hides label for outside days when showOutsideDays is false', () => {
@@ -76,10 +60,8 @@ describe('CalendarDay', () => {
             showOutsideDays: false,
         });
 
-        expect(td.textContent).toBe('');
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-outside')
-        ).toBe(true);
+        expect(td).toHaveTextContent('');
+        expect(td).toHaveClass('dash-datepicker-calendar-date-outside');
     });
 
     it('focuses element when isFocused is true', () => {
diff --git a/components/dash-core-components/tests/unit/calendar/CalendarDayPadding.test.tsx b/components/dash-core-components/tests/unit/calendar/CalendarDayPadding.test.tsx
@@ -14,19 +14,11 @@ describe('CalendarDayPadding', () => {
             </table>
         );
         const td = container.querySelector('td');
-        if (!td) {
-            throw new Error('td element not rendered');
-        }
 
-        expect(td.classList.contains('dash-datepicker-calendar-padding')).toBe(
-            true
-        );
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-inside')
-        ).toBe(false);
-        expect(
-            td.classList.contains('dash-datepicker-calendar-date-outside')
-        ).toBe(false);
-        expect(td.textContent).toBe('');
+        expect(td).toBeInTheDocument();
+        expect(td).toHaveClass('dash-datepicker-calendar-padding');
+        expect(td).not.toHaveClass('dash-datepicker-calendar-date-inside');
+        expect(td).not.toHaveClass('dash-datepicker-calendar-date-outside');
+        expect(td).toHaveTextContent('');
     });
 });
diff --git a/components/dash-core-components/tests/unit/calendar/CalendarMonth.test.tsx b/components/dash-core-components/tests/unit/calendar/CalendarMonth.test.tsx
@@ -102,13 +102,9 @@ describe('CalendarMonth', () => {
             td => td.textContent?.trim() || ''
         );
 
-        // Behavior 1: When showOutsideDays=true, all cells should be labeled (no empty labels)
-        // Find cells that are in the actual calendar rows (not ghost rows)
         const labeledCells = cellTexts.filter(text => text !== '');
 
-        // Behavior 2: Days before January 1 should be labeled (December days)
-        // First 2 cells should be December days (30, 31)
-        // January 1, 2025 is Wednesday, which is 2 days after Monday
+        // First 2 cells should be December days (30, 31), then January 1
         expect(cellTexts[0]).toBe('30');
         expect(cellTexts[1]).toBe('31');
 
diff --git a/components/dash-core-components/tests/unit/calendar/DatePickerSingle.test.tsx b/components/dash-core-components/tests/unit/calendar/DatePickerSingle.test.tsx
diff --git a/components/dash-core-components/tests/unit/calendar/createMonthGrid.test.ts b/components/dash-core-components/tests/unit/calendar/createMonthGrid.test.ts
@@ -28,47 +28,38 @@ const expectConsecutiveDatesUntilPadding = (dates: (Date | null)[]) => {
 describe('createMonthGrid', () => {
     describe('with showOutsideDays=true (default)', () => {
         it('creates grid with exactly 6 rows and 7 columns', () => {
-            const grid = createMonthGrid(2025, 0, 0, true); // January 2025, Sunday first
+            const grid = createMonthGrid(2025, 0, 0, true);
 
-            // Should always have exactly 6 rows (weeks) for consistent calendar height
             expect(grid.length).toBe(6);
-
             grid.forEach(week => {
                 expect(week.length).toBe(7);
             });
         });
 
         it('has consecutive dates until padding, then all null', () => {
-            const grid = createMonthGrid(2025, 0, 0, true); // January 2025
+            const grid = createMonthGrid(2025, 0, 0, true);
             expectConsecutiveDatesUntilPadding(grid.flat());
         });
 
         it('adjusts for different first day of week', () => {
-            const sundayFirst = createMonthGrid(2025, 0, 0, true); // Sunday = 0
-            const mondayFirst = createMonthGrid(2025, 0, 1, true); // Monday = 1
+            const sundayFirst = createMonthGrid(2025, 0, 0, true);
+            const mondayFirst = createMonthGrid(2025, 0, 1, true);
 
-            // Grids should have different starting dates
             expect(sundayFirst[0][0]).not.toBeNull();
             expect(mondayFirst[0][0]).not.toBeNull();
             expect(sundayFirst[0][0]).not.toEqual(mondayFirst[0][0]);
 
             // January 2025 starts on Wednesday
-            // Sunday-first shows: Sun, Mon, Tue (3 days from prev month)
-            // Monday-first shows: Mon, Tue (2 days from prev month)
-            // So Monday-first should start later
+            // Sunday-first shows 3 days from prev month, Monday-first shows 2
             expect(mondayFirst[0][0]!.getTime()).toBeGreaterThan(
                 sundayFirst[0][0]!.getTime()
             );
         });
 
         it('handles months starting on different weekdays', () => {
-            // January 2025 starts on Wednesday
-            const jan2025 = createMonthGrid(2025, 0, 0, true); // Sunday first
+            const jan2025 = createMonthGrid(2025, 0, 0, true); // Jan starts on Wednesday
+            const feb2025 = createMonthGrid(2025, 1, 0, true); // Feb starts on Saturday
 
-            // February 2025 starts on Saturday
-            const feb2025 = createMonthGrid(2025, 1, 0, true); // Sunday first
-
-            // Both should always have exactly 6 rows
             expect(jan2025.length).toBe(6);
             expect(feb2025.length).toBe(6);
         });
diff --git a/components/dash-core-components/tests/unit/calendar/helpers.test.ts b/components/dash-core-components/tests/unit/calendar/helpers.test.ts
