Use more consistent names for data-testids

frontend/src/components/CalendarManagement.vue

@@ -61,7 +61,7 @@ const filteredCalendars = computed(() => props.calendars.filter((calendar: Calen
           text-xs text-white disabled:scale-100 disabled:opacity-50 disabled:shadow-none
         "
         :title="t('label.connect')"
-        data-testid="connect-calendar-btn"
+        data-testid="settings-calendar-connect-calendar-btn"
       >
         <icon-arrow-right class="size-3 stroke-3"/>
         {{ t('label.connectCalendar') }}
@@ -75,7 +75,7 @@ const filteredCalendars = computed(() => props.calendars.filter((calendar: Calen
           text-xs text-white disabled:scale-100 disabled:opacity-50 disabled:shadow-none
         "
         :title="t('label.edit')"
-        data-testid="edit-calendar-btn"
+        data-testid="settings-calendar-edit-calendar-btn"
       >
         <icon-pencil class="size-3 stroke-3"/>
         {{ t('label.editCalendar') }}
@@ -86,7 +86,7 @@ const filteredCalendars = computed(() => props.calendars.filter((calendar: Calen
         :disabled="loading"
         @click="emit('remove', cal.id)"
         :title="t('label.remove')"
-        data-testid="remove-calendar-btn"
+        data-testid="settings-calendar-remove-calendar-btn"
       >
         <icon-x class="size-5 stroke-red-500 stroke-2"/>
       </button>

frontend/src/components/CalendarMiniMonth.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="select-none">
     <div v-if="nav" class="flex-center mb-2 select-none gap-2">
-      <div @click="dateNav(false)" class="btn-back group cursor-pointer" :title="t('label.goBack')" data-testid="mini-month-back-btn">
+      <div @click="dateNav(false)" class="btn-back group cursor-pointer" :title="t('label.goBack')" data-testid="booking-mini-month-back-btn">
         <icon-chevron-left class="size-6 fill-transparent stroke-slate-400 stroke-2 group-hover:stroke-teal-500" />
       </div>
       <div class="text-lg font-semibold text-teal-500">
         {{ navDate.format('MMMM YYYY')}}
       </div>
-      <div @click="dateNav(true)" class="btn-forward group cursor-pointer" :title="t('label.goForward')" data-testid="mini-month-fw-btn">
+      <div @click="dateNav(true)" class="btn-forward group cursor-pointer" :title="t('label.goForward')" data-testid="booking-mini-month-fw-btn">
         <icon-chevron-right class="size-6 fill-transparent stroke-slate-400 stroke-2 group-hover:stroke-teal-500" />
       </div>
     </div>

frontend/src/components/ScheduleCreation.vue

@@ -434,7 +434,7 @@ watch(
           no-legend
           @changed="toggleActive"
           :title="t(schedule.active ? 'label.deactivateSchedule' : 'label.activateSchedule')"
-          data-testid="set-availability-toggle"
+          data-testid="dashboard-set-availability-toggle"
         />
       </div>
       <alert-box @close="scheduleCreationError = ''" v-if="scheduleCreationError">
@@ -460,7 +460,7 @@ watch(
       <div id="schedule-availability" class="schedule-creation-step" :class="{ 'active': activeStep1 }">
         <div
           @click="state = ScheduleCreationState.Availability"
-          class="btn-step-1 flex cursor-pointer items-center justify-between" data-testid="set-availability"
+          class="btn-step-1 flex cursor-pointer items-center justify-between" data-testid="dashboard-availability-panel-btn"
         >
           <div class="flex flex-col">
             <h2>
@@ -514,7 +514,7 @@ watch(
             </div>
             <div class="flex justify-between">
               <div class="text-gray-600 dark:text-gray-200">{{ user.data.timezone ?? dj.tz.guess() }}</div>
-              <link-button class="edit-link-btn" @click="router.push({ name: 'settings' })" :tooltip="t('label.editInSettings')" data-testid="edit-link-btn">
+              <link-button class="edit-link-btn" @click="router.push({ name: 'settings' })" :tooltip="t('label.editInSettings')" data-testid="dashboard-availability-edit-link-btn">
                 {{ t('label.edit') }}
               </link-button>
             </div>
@@ -526,7 +526,7 @@ watch(
       <div id="schedule-settings" class="schedule-creation-step" :class="{ 'active': activeStep2 }">
         <div
           @click="state = ScheduleCreationState.Settings"
-          class="btn-step-2 flex cursor-pointer items-center justify-between" data-testid="set-scheduling-details"
+          class="btn-step-2 flex cursor-pointer items-center justify-between" data-testid="dashboard-scheduling-details-panel-btn"
         >
           <div class="flex flex-col">
             <h2>
@@ -557,7 +557,7 @@ watch(
               name="earliest_booking"
               v-model="scheduleInput.earliest_booking"
               class="w-full"
-              data-testid="earliest-booking-input"
+              data-testid="dashboard-scheduling-details-earliest-booking-input"
               :options="earliestOptions"
               :disabled="!scheduleInput.active"
             >
@@ -567,7 +567,7 @@ watch(
               name="farthest_booking"
               v-model="scheduleInput.farthest_booking"
               class="w-full"
-              data-testid="farthest-booking-input"
+              data-testid="dashboard-scheduling-details-farthest-booking-input"
               :options="farthestOptions"
               :disabled="!scheduleInput.active"
             >
@@ -577,7 +577,7 @@ watch(
           <select-input
             name="slot_duration"
             v-model="scheduleInput.slot_duration"
-            data-testid="booking-duration-input"
+            data-testid="dashboard-scheduling-details-booking-duration-input"
             :options="durationOptions"
             :disabled="!scheduleInput.active"
             class="w-full"
@@ -604,7 +604,7 @@ watch(
         :class="{ 'active':  activeStep3 }"
         @click="state = ScheduleCreationState.Details"
       >
-        <div class="flex cursor-pointer items-center justify-between" data-testid="set-meeting-details">
+        <div class="flex cursor-pointer items-center justify-between" data-testid="dashboard-meeting-details-panel-btn">
           <div class="flex flex-col">
             <h2>
               {{ t("label.meetingDetails") }}
@@ -662,7 +662,7 @@ watch(
               :disabled="!scheduleInput.active"
               class="place-holder h-24 w-full resize-none rounded-md text-sm"
               :maxlength="charLimit"
-              data-testid="meeting-notes-input"
+              data-testid="dashboard-meeting-details-notes-input"
             ></textarea>
             <div
               class="absolute bottom-3 right-3 text-xs"
@@ -684,7 +684,7 @@ watch(
         :class="{ 'active': activeStep4 }"
         @click="state = ScheduleCreationState.Booking"
       >
-        <div class="flex cursor-pointer items-center justify-between" data-testid="set-boooking-settings">
+        <div class="flex cursor-pointer items-center justify-between" data-testid="dashboard-boooking-settings-panel-btn">
           <div class="flex flex-col">
             <h2>
               {{ t("label.bookingSettings") }}
@@ -719,7 +719,7 @@ watch(
                 class="p-0.5"
                 @click="scheduleInput.active ? refreshSlug() : null"
                 :disabled="!scheduleInput.active"
-                data-testid="quick-link-refresh-btn"
+                data-testid="dashboard-booking-settings-link-refresh-btn"
               >
                 <refresh-icon />
               </link-button>
@@ -793,7 +793,7 @@ watch(
         class="btn-save w-full"
         @click="saveSchedule(!existing)"
         :disabled="!scheduleInput.active || savingInProgress"
-        data-testid="save-changes-btn"
+        data-testid="dashboard-save-changes-btn"
       >
         {{ t('label.save') }}
       </primary-button>
@@ -811,7 +811,7 @@ watch(
           v-if="user.myLink && existing"
           class="btn-copy"
           @click="copyLink"
-          data-testid="share-my-link-btn"
+          data-testid="dashboard-share-quick-link-btn"
           :tooltip="myLinkTooltip"
           :force-tooltip="myLinkShow"
         >

frontend/src/components/SettingsAccount.vue

@@ -228,7 +228,7 @@ const actuallyDeleteAccount = async () => {
             class="w-full rounded-md"
             :class="{ '!border-red-500': errorUsername }"
             :required="true"
-            data-testid="user-name-input"
+            data-testid="settings-account-user-name-input"
           />
           <div v-if="errorUsername" class="text-sm text-red-500">
             {{ errorUsername }}
@@ -246,7 +246,7 @@ const actuallyDeleteAccount = async () => {
             </span>
         </span>
         </div>
-        <select v-model="activePreferredEmail" class="w-full rounded-md" data-testid="email-select">
+        <select v-model="activePreferredEmail" class="w-full rounded-md" data-testid="settings-account-email-select">
           <option v-for="email in availableEmails" :key="email" :value="email">{{ email }}</option>
         </select>
       </label>
@@ -258,7 +258,7 @@ const actuallyDeleteAccount = async () => {
             type="text"
             class="w-full rounded-md"
             :class="{ '!border-red-500': errorDisplayName }"
-            data-testid="display-name-input"
+            data-testid="settings-account-display-name-input"
           />
           <div v-if="errorDisplayName" class="text-sm text-red-500">
             {{ errorDisplayName }}
@@ -274,7 +274,7 @@ const actuallyDeleteAccount = async () => {
               type="text"
               class="mr-2 w-full rounded-md pr-7"
               readonly
-              data-testid="mylink-input"
+              data-testid="settings-account-mylink-input"
             />
             <a
               :href="user.myLink"
@@ -290,7 +290,7 @@ const actuallyDeleteAccount = async () => {
             :tooltip="t('label.copyLink')"
             :copy="user.myLink"
             :title="t('label.copy')"
-            data-testid="copy-link-btn"
+            data-testid="settings-account-copy-link-btn"
           />
         </div>
       </label>
@@ -300,14 +300,14 @@ const actuallyDeleteAccount = async () => {
           class="btn-refresh !text-teal-500"
           @click="refreshLink"
           :title="t('label.refresh')"
-          data-testid="refresh-link-btn"
+          data-testid="settings-account-refresh-link-btn"
         />
         <secondary-button
           :label="t('label.saveChanges')"
           class="btn-save !text-teal-500"
           @click="updateUserCheckForConfirmation"
           :title="t('label.save')"
-          data-testid="save-changes-btn"
+          data-testid="settings-account-save-changes-btn"
         />
       </div>
     </form>
@@ -328,7 +328,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-download"
           @click="downloadData"
           :title="t('label.download')"
-          data-testid="download-data-btn"
+          data-testid="settings-account-download-data-btn"
         />
       </div>
     </div>
@@ -340,7 +340,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-delete"
           @click="deleteAccount"
           :title="t('label.delete')"
-          data-testid="delete-account-btn"
+          data-testid="settings-account-delete-btn"
         />
       </div>
     </div>

frontend/src/components/SettingsGeneral.vue

@@ -92,7 +92,7 @@ const updateTimezone = async () => {
       <div class="text-lg">{{ t('label.language') }}</div>
       <label class="mt-4 flex items-center pl-4">
         <div class="w-full max-w-2xs">{{ t('label.language') }}</div>
-        <select v-model="locale" class="w-full max-w-sm rounded-md" data-testid="locale-select">
+        <select v-model="locale" class="w-full max-w-sm rounded-md" data-testid="settings-general-locale-select">
           <option v-for="l in availableLocales" :key="l" :value="l">
             {{ l.toUpperCase() + ' &mdash; ' + t('locales.' + l) }}
           </option>
@@ -103,7 +103,7 @@ const updateTimezone = async () => {
       <div class="text-lg">{{ t('label.appearance') }}</div>
       <label class="mt-4 flex items-center pl-4">
         <div class="w-full max-w-2xs">{{ t('label.theme') }}</div>
-        <select v-model="theme" class="w-full max-w-sm rounded-md" data-testid="theme-select">
+        <select v-model="theme" class="w-full max-w-sm rounded-md" data-testid="settings-general-theme-select">
           <option v-for="value in Object.values(ColorSchemes)" :key="value" :value="value">
             {{ t('label.' + value) }}
           </option>
@@ -148,7 +148,7 @@ const updateTimezone = async () => {
           v-model="activeTimezone.primary"
           class="w-full max-w-sm rounded-md"
           @change="updateTimezone"
-          data-testid="timezone-select"
+          data-testid="settings-general-timezone-select"
         >
           <option v-for="tz in timezones" :key="tz" :value="tz">
             {{ tz }}

frontend/src/components/TabBar.vue

@@ -37,6 +37,7 @@ const activate = (key: string) => {
             'hover:bg-gray-100 dark:hover:bg-gray-700': item != active && !disabled,
           }"
           @click="!disabled ? activate(key) : null"
+          :data-testid="'booking-' + key + '-btn'"
         >
           {{ t('label.' + key) }}
         </li>

frontend/src/components/bookingView/BookingViewSlotSelection.vue

@@ -48,10 +48,10 @@ const selectEvent = (day: string) => {
 
 <template>
   <div v-if="appointment">
-    <div class="mb-4 text-3xl text-gray-700 dark:text-gray-400" data-testid="booking-view-title">
+    <div class="mb-4 text-3xl text-gray-700 dark:text-gray-400" data-testid="booking-view-title-text">
       {{ appointment.title }}
     </div>
-    <div class="mb-4 font-semibold" data-testid="booking-view-inviting-you">
+    <div class="mb-4 font-semibold" data-testid="booking-view-inviting-you-text">
       {{ t('text.nameIsInvitingYou', { name: appointment.owner_name }) }}
     </div>
     <div v-if="appointment.details" class="mb-6 text-gray-700 dark:text-gray-400">
@@ -70,7 +70,7 @@ const selectEvent = (day: string) => {
       :is-booking-route="true"
       :fixed-duration="activeSchedules[0]?.slot_duration"
       @event-selected="selectEvent"
-      data-testid="booking-view-calendar"
+      data-testid="booking-view-calendar-div"
     >
     </calendar-qalendar>
   </div>
@@ -85,7 +85,7 @@ const selectEvent = (day: string) => {
         :disabled="!selectedEvent"
         @click="emit('openModal')"
         :title="t('label.confirm')"
-        data-testid="confirm-selection-button"
+        data-testid="booking-view-confirm-selection-button"
       />
     </div>
   </footer>

frontend/src/views/AppointmentsView.vue

@@ -237,7 +237,6 @@ provide(paintBackgroundKey, paintBackground);
         :active="tabActive"
         @update="updateTab"
         class="text-xl"
-        data-testid="booking-tab-bar"
       />
     </div>
   </div>
@@ -265,7 +264,7 @@ provide(paintBackgroundKey, paintBackground);
             id="appointments-search"
             class="w-full rounded pl-10 text-sm"
             :placeholder="t('label.searchAppointments')"
-            data-testid="search-bookings-input"
+            data-testid="bookings-search-input"
           />
         </div>
         <div class="flex rounded border border-gray-300 dark:border-gray-500">
@@ -304,7 +303,7 @@ provide(paintBackgroundKey, paintBackground);
             'cursor-pointer': view === BookingsViewTypes.List,
           }"
           @click="openAdjustments"
-          data-testid="adjust-table-btn"
+          data-testid="bookings-adjust-table-btn"
         >
           <icon-adjustments class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-300" />
         </div>
@@ -319,7 +318,7 @@ provide(paintBackgroundKey, paintBackground);
           <div
             v-for="(value, key) in columns"
             :key="key"
-            :data-testid=key
+            :data-testid="'bookings-adjust-table-' + key + '-menu'"
             class="
               grid cursor-pointer grid-cols-context rounded py-1 pl-1 pr-3
               hover:bg-gray-100 dark:hover:bg-gray-500
@@ -341,15 +340,15 @@ provide(paintBackgroundKey, paintBackground);
               hover:bg-gray-100 dark:hover:bg-gray-500
             "
             @click="restoreColumnOrder"
-            data-testid="restore-column-order"
+            data-testid="bookings-adjust-table-restore-menu"
           >
             <div></div>
             <div class="text-sm">{{ t("label.restoreColumnOrder") }}</div>
           </div>
         </div>
       </div>
       <!-- appointments list -->
-      <table v-show="view === BookingsViewTypes.List" class="mt-4 w-full" data-testid="appointments-list-table">
+      <table v-show="view === BookingsViewTypes.List" class="mt-4 w-full" data-testid="bookings-appointments-list-table">
         <thead>
           <tr class="bg-gray-100 dark:bg-gray-600">
             <th class="py-1"></th>

frontend/src/views/HomeView.vue

@@ -39,14 +39,15 @@ const signUp = () => {
               class="btn-login"
               @click="login"
               :title="$t('label.logIn')"
-              data-testid="login-button"
+              data-testid="home-login-btn"
             />
             <primary-button
               v-else-if="isAuthenticated"
               :label="$t('label.continue')"
               class="btn-continue"
               @click="enter"
               :title="$t('label.continue')"
+              data-testid="home-continue-btn"
             />
           </div>
           <div class="my-4">
@@ -56,6 +57,7 @@ const signUp = () => {
               class="btn-login"
               @click="signUp"
               :title="$t('label.signUpForBeta')"
+              data-testid="home-sign-up-beta-btn"
             />
           </div>
         </div>

frontend/src/views/SettingsView.vue

@@ -94,7 +94,7 @@ onMounted(() => {
         "
         :class="{ '!bg-teal-500 !text-white': view === activeView }"
         @click="show(key)"
-        :data-testid=key
+        :data-testid="'settings-' + key + '-settings-btn'"
       >
         <span>{{ t('label.' + key) }}</span>
         <icon-chevron-right