refactor: replace data-cy with data-testid

Author: joshunrau

apps/web/src/components/LoginForm/LoginForm.tsx

@@ -25,7 +25,7 @@ export const LoginForm = ({ onSubmit }: LoginFormProps) => {
           variant: 'password'
         }
       }}
-      data-cy="login-form"
+      data-testid="login-form"
       submitBtnLabel={t('login')}
       validationSchema={z.object({
         username: z.string().min(1),

apps/web/src/components/SelectInstrument.tsx

@@ -14,13 +14,13 @@ export const SelectInstrument = ({ onSelect, options }: SelectInstrumentProps) =
         onSelect(id);
       }}
     >
-      <Select.Trigger className="min-w-72" data-cy="select-instrument-dropdown-trigger">
+      <Select.Trigger className="min-w-72" data-testid="select-instrument-dropdown-trigger">
         <Select.Value placeholder={t('datahub.visualization.selectInstrument')} />
       </Select.Trigger>
       <Select.Content>
         <Select.Group>
           {Object.entries(options).map(([id, label]) => (
-            <Select.Item data-cy="select-instrument-dropdown-item" key={id} value={id}>
+            <Select.Item data-testid="select-instrument-dropdown-item" key={id} value={id}>
               {label}
             </Select.Item>
           ))}

apps/web/src/components/Sidebar/Sidebar.tsx

@@ -86,7 +86,7 @@ export const Sidebar = () => {
             <h5 className="text-sm font-medium">{t('common.sessionInProgress')}</h5>
             <hr className="my-1.5 h-[1px] border-none bg-slate-700" />
             {isSubjectWithPersonalInfo(currentSession.subject) ? (
-              <div data-cy="current-session-info">
+              <div data-testid="current-session-info">
                 <p>{`${t('core.fullName')}: ${currentSession.subject.firstName} ${currentSession.subject.lastName}`}</p>
                 <p>
                   {`${t('core.identificationData.dateOfBirth.label')}: ${toBasicISOString(currentSession.subject.dateOfBirth)}`}{' '}
@@ -96,7 +96,7 @@ export const Sidebar = () => {
                 </p>
               </div>
             ) : (
-              <div data-cy="current-session-info">
+              <div data-testid="current-session-info">
                 <p>ID: {removeSubjectIdScope(currentSession.subject.id)}</p>
               </div>
             )}

apps/web/src/components/StartSessionForm/StartSessionForm.tsx

@@ -155,7 +155,7 @@ export const StartSessionForm = ({
           }
         }
       ]}
-      data-cy="start-session-form"
+      data-testid="start-session-form"
       initialValues={initialValues}
       readOnly={readOnly}
       submitBtnLabel={t('core.submit')}

apps/web/src/components/TimeDropdown.tsx

@@ -22,18 +22,18 @@ export const TimeDropdown = ({ disabled, setMinTime }: TimeDropdownProps) => {
         }
       }}
     >
-      <Select.Trigger className="min-w-32" data-cy="time-dropdown-trigger" disabled={disabled}>
+      <Select.Trigger className="min-w-32" data-testid="time-dropdown-trigger" disabled={disabled}>
         <Select.Value placeholder={t('visualization.timeframe')} />
       </Select.Trigger>
       <Select.Content>
         <Select.Group>
-          <Select.Item data-cy="time-dropdown-item" value="all">
+          <Select.Item data-testid="time-dropdown-item" value="all">
             {t('visualization.timeframeOptions.all')}
           </Select.Item>
-          <Select.Item data-cy="time-dropdown-item" value="pastMonth">
+          <Select.Item data-testid="time-dropdown-item" value="pastMonth">
             {t('visualization.timeframeOptions.month')}
           </Select.Item>
-          <Select.Item data-cy="time-dropdown-item" value="pastYear">
+          <Select.Item data-testid="time-dropdown-item" value="pastYear">
             {t('visualization.timeframeOptions.year')}
           </Select.Item>
         </Select.Group>

apps/web/src/routes/_app/datahub/$subjectId/graph.tsx

@@ -105,7 +105,7 @@ const RouteComponent = () => {
       <div className="mb-2">
         <div className="flex flex-col gap-2 lg:flex-row lg:justify-between">
           <div className="flex flex-col gap-2 lg:flex-row">
-            <div data-cy="instrument-select-dropdown-container">
+            <div data-testid="instrument-select-dropdown-container">
               <SelectInstrument
                 options={instrumentOptions}
                 onSelect={(id) => {
@@ -116,7 +116,7 @@ const RouteComponent = () => {
             </div>
           </div>
           <div className="flex flex-col gap-2 lg:flex-row">
-            <div data-cy="measure-select-dropdown-container">
+            <div data-testid="measure-select-dropdown-container">
               <ListboxDropdown
                 widthFull
                 checkPosition="right"
@@ -129,10 +129,10 @@ const RouteComponent = () => {
                 variant="secondary"
               />
             </div>
-            <div data-cy="time-select-dropdown-container">
+            <div data-testid="time-select-dropdown-container">
               <TimeDropdown disabled={!instrumentId} setMinTime={setMinDate} />
             </div>
-            <div className="relative w-full whitespace-nowrap" data-cy="download-button-container">
+            <div className="relative w-full whitespace-nowrap" data-testid="download-button-container">
               <ActionDropdown
                 widthFull
                 disabled={!instrumentId}

apps/web/src/routes/_app/datahub/$subjectId/route.tsx

@@ -11,7 +11,7 @@ import { PageHeader } from '@/components/PageHeader';
 import { config } from '@/config';
 import { useAppStore } from '@/store';
 
-const TabLink = ({ dataCy, label, pathname }: { dataCy?: string; label: string; pathname: string }) => {
+const TabLink = ({ label, pathname, testId }: { label: string; pathname: string; testId?: string }) => {
   const location = useLocation();
   const isActive = location.pathname === pathname;
   return (
@@ -20,9 +20,9 @@ const TabLink = ({ dataCy, label, pathname }: { dataCy?: string; label: string;
         'grow border-b px-1 py-3 text-center font-medium',
         isActive ? 'border-sky-500 text-slate-900 dark:text-slate-100' : 'border-slate-300 dark:border-slate-700'
       )}
-      data-cy={dataCy}
       data-nav-url={pathname}
       data-spotlight-type="tab-link"
+      data-testid={testId}
       to={pathname}
     >
       {label}
@@ -55,13 +55,13 @@ const RouteComponent = () => {
       <div className="mb-5 flex">
         {config.setup.isGatewayEnabled && (
           <TabLink
-            dataCy="subject-assignment"
             label={t('layout.tabs.assignments')}
             pathname={`${basePathname}/assignments`}
+            testId="subject-assignment"
           />
         )}
-        <TabLink dataCy="subject-table" label={t('layout.tabs.table')} pathname={`${basePathname}/table`} />
-        <TabLink dataCy="subject-graph" label={t('layout.tabs.graph')} pathname={`${basePathname}/graph`} />
+        <TabLink label={t('layout.tabs.table')} pathname={`${basePathname}/table`} testId="subject-table" />
+        <TabLink label={t('layout.tabs.graph')} pathname={`${basePathname}/graph`} testId="subject-graph" />
       </div>
       <React.Suspense fallback={<LoadingFallback />}>
         <Outlet />

apps/web/src/routes/_app/datahub/$subjectId/table.tsx

@@ -57,7 +57,7 @@ const RouteComponent = () => {
           ...fields
         ]}
         data={records}
-        data-cy="subject-table"
+        data-testid="subject-table"
         entriesPerPage={15}
         minRows={15}
       />

apps/web/src/routes/_app/datahub/index.tsx

@@ -51,7 +51,7 @@ const MasterDataTable = ({ data, onSelect }: MasterDataTableProps) => {
         }
       ]}
       data={data}
-      data-cy="master-data-table"
+      data-testid="master-data-table"
       entriesPerPage={15}
       minRows={15}
       onEntryClick={onSelect}

apps/web/src/routes/setup.tsx

@@ -114,7 +114,7 @@ const RouteComponent = () => {
                 title: t('setup.demo.title')
               }
             ]}
-            data-cy="setup-form"
+            data-testid="setup-form"
             initialValues={{
               enableExperimentalFeatures: false
             }}