chore: Update date range input selectors in Cypress tests

OHIF · May 27, 2024 · 00c73b6 · 00c73b6
1 parent 68e6655
commit 00c73b6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/platform/app/cypress/support/aliases.js b/platform/app/cypress/support/aliases.js
@@ -61,8 +61,8 @@ export function initStudyListAliasesOnDesktop() {
 
   // We can't use data attributes (e.g. data--cy) for these since
   // they are using third party libraries (i.e. react-dates, react-select)
-  cy.get('#date-range-studyDate-start-date').as('studyListStartDate');
-  cy.get('#date-range-studyDate-end-date').as('studyListEndDate');
+  cy.get('[data-cy="input-date-range-start"').as('studyListStartDate');
+  cy.get('[data-cy="input-date-range-end"').as('studyListEndDate');
   cy.get('#input-modalities').as('modalities');
 }
 

diff --git a/platform/ui-next/src/components/DateRange/DateRange.tsx b/platform/ui-next/src/components/DateRange/DateRange.tsx
@@ -93,6 +93,7 @@ export function DatePickerWithRange({
                 'border-inputfield-main focus:border-inputfield-focus h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-sm font-normal hover:bg-black hover:text-white',
                 !start && 'text-muted-foreground'
               )}
+              data-cy="input-date-range-start"
             />
           </div>
         </Popover.PopoverTrigger>
@@ -129,6 +130,7 @@ export function DatePickerWithRange({
                 'border-inputfield-main focus:border-inputfield-focus h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-sm font-normal hover:bg-black hover:text-white',
                 !end && 'text-muted-foreground'
               )}
+              data-cy="input-date-range-end"
             />
           </div>
         </Popover.PopoverTrigger>

diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.tsx b/platform/ui/src/components/InputDateRange/InputDateRange.tsx
@@ -26,11 +26,11 @@ const InputDateRange = ({
       isSortable={isSortable}
       sortDirection={sortDirection}
       onLabelClick={onClickHandler}
-      className='xl:min-w-[284px]'
+      className="xl:min-w-[284px]"
     >
       <div className="relative xl:max-w-[246px]">
         <DatePickerWithRange
-          className='mt-2'
+          className="mt-2"
           id={id}
           startDate={startDate}
           endDate={endDate}