backward-compatible test-utils

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -212,14 +212,15 @@ exports[`test-utils selectors 1`] = `
   ],
   "date-range-picker": [
     "awsui_apply-button_mgja0",
+    "awsui_calendar-date_1afkv",
     "awsui_calendar-header_mgja0",
     "awsui_calendar-next-month-btn_mgja0",
     "awsui_calendar-prev-month-btn_mgja0",
+    "awsui_calendar-week_1afkv",
     "awsui_cancel-button_mgja0",
     "awsui_clear-button_mgja0",
     "awsui_custom-range-duration-input_16zmw",
     "awsui_custom-range-unit-select_16zmw",
-    "awsui_day_1mfbn",
     "awsui_disabled-reason-tooltip_1mfbn",
     "awsui_dropdown_mgja0",
     "awsui_end-date-input_mgja0",
@@ -235,7 +236,6 @@ exports[`test-utils selectors 1`] = `
     "awsui_start-date_1mfbn",
     "awsui_start-time-input_mgja0",
     "awsui_validation-error_mgja0",
-    "awsui_week_1mfbn",
   ],
   "drawer": [
     "awsui_drawer_1sxt8",

src/date-range-picker/calendar/grids/monthly-grid.tsx

@@ -21,6 +21,7 @@ import { getCalendarMonthWithSixRows } from '../../../internal/utils/date-time/c
 import { DateRangePickerProps, DayIndex } from '../../interfaces';
 import { GridCell } from './grid-cell';
 
+import testStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
 /**
@@ -101,8 +102,20 @@ export function MonthlyGrid({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [baseDateTime, startOfWeek, dateType]
   );
+  // Week indices are only added for weeks with at least some days belonging to the base date month.
+  const weeksWithIndices = weeks.reduce(
+    (acc, week, index) => {
+      const isWeekBelongsToMonth = week.some(date => isSameMonth(date, baseDate));
+      if (isWeekBelongsToMonth) {
+        acc.push({ week, testIndex: (acc[index - 1]?.testIndex ?? 0) + 1 });
+      } else {
+        acc.push({ week });
+      }
+      return acc;
+    },
+    [] as Array<{ week: Date[]; testIndex?: number }>
+  );
   const weekdays = weeks[0].map(date => date.getDay());
-
   return (
     <table role="grid" aria-labelledby={ariaLabelledby} className={clsx(styles.grid, className)}>
       <thead>
@@ -116,9 +129,14 @@ export function MonthlyGrid({
         </tr>
       </thead>
       <tbody onKeyDown={onGridKeyDownHandler}>
-        {weeks.map((week, weekIndex) => {
+        {weeksWithIndices.map(({ week, testIndex }, weekIndex) => {
+          const isWeekBelongsToMonth = week.some(date => isSameMonth(date, baseDate));
           return (
-            <tr key={weekIndex} className={styles.week}>
+            <tr
+              key={weekIndex}
+              className={clsx(styles.week, isWeekBelongsToMonth && testStyles['calendar-week'])}
+              data-awsui-weekindex={testIndex}
+            >
               {week.map((date, dateIndex) => {
                 const isStartDate = !!selectedStartDate && isSameDay(date, selectedStartDate);
                 const isEndDate = !!selectedEndDate && isSameDay(date, selectedEndDate);
@@ -146,6 +164,7 @@ export function MonthlyGrid({
 
                 const baseClasses = {
                   [styles.day]: true,
+                  [testStyles['calendar-date']]: isDateBelongsToMonth,
                   [styles['grid-cell']]: true,
                   [styles['in-first-row']]: weekIndex === 0,
                   [styles['in-first-column']]: dateIndex === 0,
@@ -196,7 +215,7 @@ export function MonthlyGrid({
                     ref={isFocused ? focusedDateRef : undefined}
                     key={`${weekIndex}:${dateIndex}`}
                     className={clsx(baseClasses, {
-                      [styles['in-current-month']]: isSameMonth(date, baseDate),
+                      [styles['in-current-month']]: true,
                       [styles.enabled]: isEnabled,
                       [styles.selected]: isSelected && isDateBelongsToMonth,
                       [styles['start-date']]: isStartDate,

src/date-range-picker/calendar/grids/styles.scss

@@ -102,7 +102,7 @@
 }
 
 .in-first-column {
-  border-inline-start: 1px solid transparent;
+  border-inline-start: 1px solid calendar.$grid-border;
 
   &.in-current-month {
     border-inline-start: calendar.$grid-border;

src/date-range-picker/test-classes/styles.scss

@@ -0,0 +1,9 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.calendar-week,
+.calendar-date {
+  /* used in test-utils */
+}

src/test-utils/dom/date-range-picker/index.ts

@@ -12,6 +12,7 @@ import SelectWrapper from '../select';
 import gridStyles from '../../../date-range-picker/calendar/grids/styles.selectors.js';
 import relativeRangeStyles from '../../../date-range-picker/relative-range/styles.selectors.js';
 import styles from '../../../date-range-picker/styles.selectors.js';
+import testStyles from '../../../date-range-picker/test-classes/styles.selectors.js';
 
 export class CalendarDateWrapper extends ComponentWrapper {
   findDisabledReason(): ElementWrapper | null {
@@ -122,7 +123,7 @@ export class DrpDropdownWrapper extends ComponentWrapper {
   ): CalendarDateWrapper {
     const gridClassName = grid === 'right' ? styles['second-grid'] : styles['first-grid'];
     return this.findComponent(
-      `.${gridClassName} .${gridStyles.week}:nth-child(${row}) .${gridStyles.day}:nth-child(${column})`,
+      `.${gridClassName} .${testStyles['calendar-week']}[data-awsui-weekindex="${row}"] .${testStyles['calendar-date']}:nth-child(${column})`,
       CalendarDateWrapper
     )!;
   }