780: Add data-testid attributes to some UI elements for future E2E tests

frontend/src/components/CalendarManagement.vue

@@ -61,6 +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"
       >
         <icon-arrow-right class="size-3 stroke-3"/>
         {{ t('label.connectCalendar') }}
@@ -74,6 +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"
       >
         <icon-pencil class="size-3 stroke-3"/>
         {{ t('label.editCalendar') }}
@@ -84,6 +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"
       >
         <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')">
+      <div @click="dateNav(false)" class="btn-back group cursor-pointer" :title="t('label.goBack')" data-testid="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')">
+      <div @click="dateNav(true)" class="btn-forward group cursor-pointer" :title="t('label.goForward')" data-testid="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/NavBar.vue

@@ -67,6 +67,7 @@ const isNavEntryActive = (item: string) => {
           :active="isNavEntryActive(item)"
           :label="t(`label.${item}`)"
           :link-name="item"
+          :data-testid=item
         />
       </div>
       <drop-down class="self-center">
@@ -85,15 +86,16 @@ const isNavEntryActive = (item: string) => {
               :copy="user.myLink"
               :title="t('label.copy')"
               class="btn-copy flex-row-reverse justify-between border-none !text-base !font-normal !text-inherit hover:bg-inherit hover:shadow-none"
+              data-testid="user-nav-share-link"
             />
-            <router-link :to="{ name: 'report-bug' }" class="flex items-center justify-between gap-1 p-2">
+            <router-link :to="{ name: 'report-bug' }" class="flex items-center justify-between gap-1 p-2" data-testid="user-nav-report-bug">
               {{ t('navBar.reportBug') }} <icon-external-link class="size-4"/>
             </router-link>
-            <router-link :to="{ name: 'contact' }" class="p-2">
+            <router-link :to="{ name: 'contact' }" class="p-2" data-testid="user-nav-contact">
               {{ t('label.contact') }}
             </router-link>
             <hr class="border-teal-500" />
-            <router-link :to="{ name: 'logout' }" class="p-2">
+            <router-link :to="{ name: 'logout' }" class="p-2" data-testid="user-nav-logout">
               {{ t('label.logOut') }}
             </router-link>
           </div>

frontend/src/components/ScheduleCreation.vue

@@ -434,6 +434,7 @@ watch(
           no-legend
           @changed="toggleActive"
           :title="t(schedule.active ? 'label.deactivateSchedule' : 'label.activateSchedule')"
+          data-testid="set-availability-toggle"
         />
       </div>
       <alert-box @close="scheduleCreationError = ''" v-if="scheduleCreationError">
@@ -459,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"
+          class="btn-step-1 flex cursor-pointer items-center justify-between" data-testid="set-availability"
         >
           <div class="flex flex-col">
             <h2>
@@ -513,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')">
+              <link-button class="edit-link-btn" @click="router.push({ name: 'settings' })" :tooltip="t('label.editInSettings')" data-testid="edit-link-btn">
                 {{ t('label.edit') }}
               </link-button>
             </div>
@@ -525,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"
+          class="btn-step-2 flex cursor-pointer items-center justify-between" data-testid="set-scheduling-details"
         >
           <div class="flex flex-col">
             <h2>
@@ -556,6 +557,7 @@ watch(
               name="earliest_booking"
               v-model="scheduleInput.earliest_booking"
               class="w-full"
+              data-testid="earliest-booking-input"
               :options="earliestOptions"
               :disabled="!scheduleInput.active"
             >
@@ -565,6 +567,7 @@ watch(
               name="farthest_booking"
               v-model="scheduleInput.farthest_booking"
               class="w-full"
+              data-testid="farthest-booking-input"
               :options="farthestOptions"
               :disabled="!scheduleInput.active"
             >
@@ -574,6 +577,7 @@ watch(
           <select-input
             name="slot_duration"
             v-model="scheduleInput.slot_duration"
+            data-testid="booking-duration-input"
             :options="durationOptions"
             :disabled="!scheduleInput.active"
             class="w-full"
@@ -600,7 +604,7 @@ watch(
         :class="{ 'active':  activeStep3 }"
         @click="state = ScheduleCreationState.Details"
       >
-        <div class="flex cursor-pointer items-center justify-between">
+        <div class="flex cursor-pointer items-center justify-between" data-testid="set-meeting-details">
           <div class="flex flex-col">
             <h2>
               {{ t("label.meetingDetails") }}
@@ -658,6 +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"
             ></textarea>
             <div
               class="absolute bottom-3 right-3 text-xs"
@@ -679,7 +684,7 @@ watch(
         :class="{ 'active': activeStep4 }"
         @click="state = ScheduleCreationState.Booking"
       >
-        <div class="flex cursor-pointer items-center justify-between">
+        <div class="flex cursor-pointer items-center justify-between" data-testid="set-boooking-settings">
           <div class="flex flex-col">
             <h2>
               {{ t("label.bookingSettings") }}
@@ -714,6 +719,7 @@ watch(
                 class="p-0.5"
                 @click="scheduleInput.active ? refreshSlug() : null"
                 :disabled="!scheduleInput.active"
+                data-testid="quick-link-refresh-btn"
               >
                 <refresh-icon />
               </link-button>
@@ -787,6 +793,7 @@ watch(
         class="btn-save w-full"
         @click="saveSchedule(!existing)"
         :disabled="!scheduleInput.active || savingInProgress"
+        data-testid="save-changes-btn"
       >
         {{ t('label.save') }}
       </primary-button>
@@ -804,6 +811,7 @@ watch(
           v-if="user.myLink && existing"
           class="btn-copy"
           @click="copyLink"
+          data-testid="share-my-link-btn"
           :tooltip="myLinkTooltip"
           :force-tooltip="myLinkShow"
         >

frontend/src/components/SettingsAccount.vue

@@ -228,6 +228,7 @@ const actuallyDeleteAccount = async () => {
             class="w-full rounded-md"
             :class="{ '!border-red-500': errorUsername }"
             :required="true"
+            data-testid="user-name-input"
           />
           <div v-if="errorUsername" class="text-sm text-red-500">
             {{ errorUsername }}
@@ -245,7 +246,7 @@ const actuallyDeleteAccount = async () => {
             </span>
         </span>
         </div>
-        <select v-model="activePreferredEmail" class="w-full rounded-md">
+        <select v-model="activePreferredEmail" class="w-full rounded-md" data-testid="email-select">
           <option v-for="email in availableEmails" :key="email" :value="email">{{ email }}</option>
         </select>
       </label>
@@ -257,6 +258,7 @@ const actuallyDeleteAccount = async () => {
             type="text"
             class="w-full rounded-md"
             :class="{ '!border-red-500': errorDisplayName }"
+            data-testid="display-name-input"
           />
           <div v-if="errorDisplayName" class="text-sm text-red-500">
             {{ errorDisplayName }}
@@ -272,6 +274,7 @@ const actuallyDeleteAccount = async () => {
               type="text"
               class="mr-2 w-full rounded-md pr-7"
               readonly
+              data-testid="mylink-input"
             />
             <a
               :href="user.myLink"
@@ -287,6 +290,7 @@ const actuallyDeleteAccount = async () => {
             :tooltip="t('label.copyLink')"
             :copy="user.myLink"
             :title="t('label.copy')"
+            data-testid="copy-link-btn"
           />
         </div>
       </label>
@@ -296,12 +300,14 @@ const actuallyDeleteAccount = async () => {
           class="btn-refresh !text-teal-500"
           @click="refreshLink"
           :title="t('label.refresh')"
+          data-testid="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"
         />
       </div>
     </form>
@@ -322,6 +328,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-download"
           @click="downloadData"
           :title="t('label.download')"
+          data-testid="download-data-btn"
         />
       </div>
     </div>
@@ -333,6 +340,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-delete"
           @click="deleteAccount"
           :title="t('label.delete')"
+          data-testid="delete-account-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">
+        <select v-model="locale" class="w-full max-w-sm rounded-md" data-testid="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">
+        <select v-model="theme" class="w-full max-w-sm rounded-md" data-testid="theme-select">
           <option v-for="value in Object.values(ColorSchemes)" :key="value" :value="value">
             {{ t('label.' + value) }}
           </option>
@@ -148,6 +148,7 @@ const updateTimezone = async () => {
           v-model="activeTimezone.primary"
           class="w-full max-w-sm rounded-md"
           @change="updateTimezone"
+          data-testid="timezone-select"
         >
           <option v-for="tz in timezones" :key="tz" :value="tz">
             {{ tz }}

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

frontend/src/elements/UserAvatar.vue

@@ -9,6 +9,7 @@ const user = useUserStore();
 <div
   class="flex-center mr-4 size-12 self-center rounded-full bg-white text-lg font-normal text-white"
   :class="{'!bg-teal-500': user.data.avatarUrl === null}"
+  data-testid="user-menu-avatar"
 >
   <span v-if="user.data.avatarUrl === null">
     {{ initials(user.data.name) }}

frontend/src/views/AppointmentsView.vue

@@ -237,6 +237,7 @@ provide(paintBackgroundKey, paintBackground);
         :active="tabActive"
         @update="updateTab"
         class="text-xl"
+        data-testid="booking-tab-bar"
       />
     </div>
   </div>
@@ -246,7 +247,7 @@ provide(paintBackgroundKey, paintBackground);
     <div class="w-full lg:w-4/5">
       <!-- filter bar -->
       <div class="relative flex select-none gap-5">
-        <select v-model="filter" class="rounded border text-sm">
+        <select v-model="filter" class="rounded border text-sm" data-testid="bookings-filter-select">
           <option v-for="(value, key) in enumToObject(BookingsTableFilterOptions)" :key="key" :value="value">
             {{ t("label." + key) }}
           </option>
@@ -264,6 +265,7 @@ provide(paintBackgroundKey, paintBackground);
             id="appointments-search"
             class="w-full rounded pl-10 text-sm"
             :placeholder="t('label.searchAppointments')"
+            data-testid="search-bookings-input"
           />
         </div>
         <div class="flex rounded border border-gray-300 dark:border-gray-500">
@@ -277,6 +279,7 @@ provide(paintBackgroundKey, paintBackground);
               'hover:bg-gray-100 dark:hover:bg-gray-500': view !== BookingsViewTypes.List,
             }"
             @click="view = BookingsViewTypes.List"
+            data-testid="bookings-list-view-btn"
           >
             <icon-list class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-300" />
           </div>
@@ -287,6 +290,7 @@ provide(paintBackgroundKey, paintBackground);
               'hover:bg-gray-100 dark:hover:bg-gray-500': view !== BookingsViewTypes.Grid,
             }"
             @click="view = BookingsViewTypes.Grid"
+            data-testid="bookings-grid-view-btn"
           >
             <icon-layout-grid class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-300" />
           </div>
@@ -300,6 +304,7 @@ provide(paintBackgroundKey, paintBackground);
             'cursor-pointer': view === BookingsViewTypes.List,
           }"
           @click="openAdjustments"
+          data-testid="adjust-table-btn"
         >
           <icon-adjustments class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-300" />
         </div>
@@ -314,6 +319,7 @@ provide(paintBackgroundKey, paintBackground);
           <div
             v-for="(value, key) in columns"
             :key="key"
+            :data-testid=key
             class="
               grid cursor-pointer grid-cols-context rounded py-1 pl-1 pr-3
               hover:bg-gray-100 dark:hover:bg-gray-500
@@ -335,14 +341,15 @@ provide(paintBackgroundKey, paintBackground);
               hover:bg-gray-100 dark:hover:bg-gray-500
             "
             @click="restoreColumnOrder"
+            data-testid="restore-column-order"
           >
             <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">
+      <table v-show="view === BookingsViewTypes.List" class="mt-4 w-full" data-testid="appointments-list-table">
         <thead>
           <tr class="bg-gray-100 dark:bg-gray-600">
             <th class="py-1"></th>

frontend/src/views/HomeView.vue

@@ -39,6 +39,7 @@ const signUp = () => {
               class="btn-login"
               @click="login"
               :title="$t('label.logIn')"
+              data-testid="login-button"
             />
             <primary-button
               v-else-if="isAuthenticated"