From 6953e0e64ac3ca680be973e76ee50126b1a8bce1 Mon Sep 17 00:00:00 2001
From: Rob Wood <rwood@thunderbird.net>
Date: Thu, 5 Dec 2024 12:13:16 -0500
Subject: [PATCH] Add data-testid attributes (#784)

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

* Use more consistent names for data-testids
---
 frontend/src/components/CalendarManagement.vue |  3 +++
 frontend/src/components/CalendarMiniMonth.vue  |  4 ++--
 frontend/src/components/NavBar.vue             |  8 +++++---
 frontend/src/components/ScheduleCreation.vue   | 18 +++++++++++++-----
 frontend/src/components/SettingsAccount.vue    | 10 +++++++++-
 frontend/src/components/SettingsGeneral.vue    |  5 +++--
 frontend/src/components/TabBar.vue             |  1 +
 .../bookingView/BookingViewSlotSelection.vue   |  6 ++++--
 frontend/src/elements/UserAvatar.vue           |  1 +
 frontend/src/views/AppointmentsView.vue        | 10 ++++++++--
 frontend/src/views/HomeView.vue                |  3 +++
 frontend/src/views/SettingsView.vue            |  1 +
 12 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/CalendarManagement.vue b/frontend/src/components/CalendarManagement.vue
index 7959a4bb9..9e606eb56 100644
--- a/frontend/src/components/CalendarManagement.vue
+++ b/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="settings-calendar-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="settings-calendar-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="settings-calendar-remove-calendar-btn"
       >
         <icon-x class="size-5 stroke-red-500 stroke-2"/>
       </button>
diff --git a/frontend/src/components/CalendarMiniMonth.vue b/frontend/src/components/CalendarMiniMonth.vue
index 5d6c0f675..f69d31a51 100644
--- a/frontend/src/components/CalendarMiniMonth.vue
+++ b/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="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')">
+      <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>
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 9733de15d..6925fd1e8 100644
--- a/frontend/src/components/NavBar.vue
+++ b/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="'nav-bar-' + item + '-btn'"
         />
       </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-btn"
             />
-            <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-menu">
               {{ 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-menu">
               {{ 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-menu">
               {{ t('label.logOut') }}
             </router-link>
           </div>
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index f5a21a469..dfc4f1421 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -434,6 +434,7 @@ watch(
           no-legend
           @changed="toggleActive"
           :title="t(schedule.active ? 'label.deactivateSchedule' : 'label.activateSchedule')"
+          data-testid="dashboard-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="dashboard-availability-panel-btn"
         >
           <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="dashboard-availability-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="dashboard-scheduling-details-panel-btn"
         >
           <div class="flex flex-col">
             <h2>
@@ -556,6 +557,7 @@ watch(
               name="earliest_booking"
               v-model="scheduleInput.earliest_booking"
               class="w-full"
+              data-testid="dashboard-scheduling-details-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="dashboard-scheduling-details-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="dashboard-scheduling-details-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="dashboard-meeting-details-panel-btn">
           <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="dashboard-meeting-details-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="dashboard-boooking-settings-panel-btn">
           <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="dashboard-booking-settings-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="dashboard-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="dashboard-share-quick-link-btn"
           :tooltip="myLinkTooltip"
           :force-tooltip="myLinkShow"
         >
diff --git a/frontend/src/components/SettingsAccount.vue b/frontend/src/components/SettingsAccount.vue
index bf859878a..240b8b501 100644
--- a/frontend/src/components/SettingsAccount.vue
+++ b/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="settings-account-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="settings-account-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="settings-account-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="settings-account-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="settings-account-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="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="settings-account-save-changes-btn"
         />
       </div>
     </form>
@@ -322,6 +328,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-download"
           @click="downloadData"
           :title="t('label.download')"
+          data-testid="settings-account-download-data-btn"
         />
       </div>
     </div>
@@ -333,6 +340,7 @@ const actuallyDeleteAccount = async () => {
           class="btn-delete"
           @click="deleteAccount"
           :title="t('label.delete')"
+          data-testid="settings-account-delete-btn"
         />
       </div>
     </div>
diff --git a/frontend/src/components/SettingsGeneral.vue b/frontend/src/components/SettingsGeneral.vue
index 79e61fa4d..5c07b6a91 100644
--- a/frontend/src/components/SettingsGeneral.vue
+++ b/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="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">
+        <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,6 +148,7 @@ const updateTimezone = async () => {
           v-model="activeTimezone.primary"
           class="w-full max-w-sm rounded-md"
           @change="updateTimezone"
+          data-testid="settings-general-timezone-select"
         >
           <option v-for="tz in timezones" :key="tz" :value="tz">
             {{ tz }}
diff --git a/frontend/src/components/TabBar.vue b/frontend/src/components/TabBar.vue
index d9f79b7a5..0d6b7cfc9 100644
--- a/frontend/src/components/TabBar.vue
+++ b/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>
diff --git a/frontend/src/components/bookingView/BookingViewSlotSelection.vue b/frontend/src/components/bookingView/BookingViewSlotSelection.vue
index 88461bf07..ec9335902 100644
--- a/frontend/src/components/bookingView/BookingViewSlotSelection.vue
+++ b/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-text">
       {{ appointment.title }}
     </div>
-    <div class="mb-4 font-semibold">
+    <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,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-div"
     >
     </calendar-qalendar>
   </div>
@@ -84,6 +85,7 @@ const selectEvent = (day: string) => {
         :disabled="!selectedEvent"
         @click="emit('openModal')"
         :title="t('label.confirm')"
+        data-testid="booking-view-confirm-selection-button"
       />
     </div>
   </footer>
diff --git a/frontend/src/elements/UserAvatar.vue b/frontend/src/elements/UserAvatar.vue
index 3a3e6ab70..1ac06a0c8 100644
--- a/frontend/src/elements/UserAvatar.vue
+++ b/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) }}
diff --git a/frontend/src/views/AppointmentsView.vue b/frontend/src/views/AppointmentsView.vue
index 4f3ac0295..63c407125 100644
--- a/frontend/src/views/AppointmentsView.vue
+++ b/frontend/src/views/AppointmentsView.vue
@@ -246,7 +246,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 +264,7 @@ provide(paintBackgroundKey, paintBackground);
             id="appointments-search"
             class="w-full rounded pl-10 text-sm"
             :placeholder="t('label.searchAppointments')"
+            data-testid="bookings-search-input"
           />
         </div>
         <div class="flex rounded border border-gray-300 dark:border-gray-500">
@@ -277,6 +278,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 +289,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 +303,7 @@ provide(paintBackgroundKey, paintBackground);
             'cursor-pointer': view === BookingsViewTypes.List,
           }"
           @click="openAdjustments"
+          data-testid="bookings-adjust-table-btn"
         >
           <icon-adjustments class="size-6 fill-transparent stroke-gray-700 stroke-1 dark:stroke-gray-300" />
         </div>
@@ -314,6 +318,7 @@ provide(paintBackgroundKey, paintBackground);
           <div
             v-for="(value, key) in columns"
             :key="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
@@ -335,6 +340,7 @@ provide(paintBackgroundKey, paintBackground);
               hover:bg-gray-100 dark:hover:bg-gray-500
             "
             @click="restoreColumnOrder"
+            data-testid="bookings-adjust-table-restore-menu"
           >
             <div></div>
             <div class="text-sm">{{ t("label.restoreColumnOrder") }}</div>
@@ -342,7 +348,7 @@ provide(paintBackgroundKey, paintBackground);
         </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="bookings-appointments-list-table">
         <thead>
           <tr class="bg-gray-100 dark:bg-gray-600">
             <th class="py-1"></th>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 3f7b70d21..0aeb17944 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -39,6 +39,7 @@ const signUp = () => {
               class="btn-login"
               @click="login"
               :title="$t('label.logIn')"
+              data-testid="home-login-btn"
             />
             <primary-button
               v-else-if="isAuthenticated"
@@ -46,6 +47,7 @@ const signUp = () => {
               class="btn-continue"
               @click="enter"
               :title="$t('label.continue')"
+              data-testid="home-continue-btn"
             />
           </div>
           <div class="my-4">
@@ -55,6 +57,7 @@ const signUp = () => {
               class="btn-login"
               @click="signUp"
               :title="$t('label.signUpForBeta')"
+              data-testid="home-sign-up-beta-btn"
             />
           </div>
         </div>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 4e0b64ec7..4bb24aea2 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -94,6 +94,7 @@ onMounted(() => {
         "
         :class="{ '!bg-teal-500 !text-white': view === activeView }"
         @click="show(key)"
+        :data-testid="'settings-' + key + '-settings-btn'"
       >
         <span>{{ t('label.' + key) }}</span>
         <icon-chevron-right