added a bunch of testids to simplify playwright e2e tests

Author: fcamblor

mobile/src/components/events/AvailableEventsList.vue

@@ -4,7 +4,7 @@
                scrollable
                @ion-change="(event) => categoryUpdated(event.detail.value)">
     <ion-segment-button v-for="(categorizedEvents, index) in perCategoryEventsRef" :key="index"
-                        :value="categorizedEvents.category">
+                        :value="categorizedEvents.category" :data-testid="categorizedEvents.testId">
       <ion-label>{{ categorizedEvents.label }} <span class="count">{{categorizedEvents.eventsCount}}</span></ion-label>
     </ion-segment-button>
   </ion-segment>
@@ -57,6 +57,7 @@ const { LL } = typesafeI18n()
 
 type CategoryEvents = {
   category: "future"|"past",
+  testId: string,
   label: string,
   eventsCount: number,
   sections: Array<{
@@ -76,6 +77,7 @@ const perCategoryEventsRef = computed(() => {
 
   const categories: CategoryEvents[] = [{
     category: 'future',
+    testId: 'future-events-tab',
     label: LL.value.Future_events(),
     eventsCount: ongoingEvents.length + futureEvents.length,
     sections: [{
@@ -87,6 +89,7 @@ const perCategoryEventsRef = computed(() => {
     }]
   }, {
     category: 'past',
+    testId: 'past-events-tab',
     label: LL.value.Past_events(),
     eventsCount: pastEvents.length,
     sections: [{

mobile/src/components/events/CurrentEventHeader.vue

@@ -2,7 +2,7 @@
   <ion-header class="ion-no-border">
     <ion-toolbar :style="{ '--background': headingBackground }">
       <div class="viewsHeader">
-        <ion-button class="viewsHeader-back" @click="backButtonClicked" shape="round" :aria-label="LL.Back_List_Events()">
+        <ion-button class="viewsHeader-back" @click="backButtonClicked" shape="round" :aria-label="LL.Back_List_Events()" data-testid="back-to-events-list">
           <ion-icon src="/assets/icons/solid/checkbox-list.svg"></ion-icon>
         </ion-button>
 <!-- TODO: Fix router navigation from preferences/schedule prior to re-enabling this one -->

mobile/src/components/events/EventTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-tabs ref="$tabs" v-if="confDescriptor" v-themed-event-styles="confDescriptor">
     <ion-router-outlet></ion-router-outlet>
-    <ion-tab-bar slot="bottom" ref="$tabBarRef">
+    <ion-tab-bar slot="bottom" ref="$tabBarRef" data-testid="event-tabs">
       <ion-tab-button v-for="(tab, index) in tabs" :key="index"
                       :tab="tab.id" :href="tab.url">
         <ion-icon aria-hidden="true" :src="$tabBarRef?.tabState.activeTab === tab.id ? tab.selectedIcon : tab.icon" />

mobile/src/components/schedule/DaySelector.vue

@@ -13,7 +13,7 @@
           past: today.localeCompare(day.localDate) === 1,
           today: today.localeCompare(day.localDate) === 0,
           future: today.localeCompare(day.localDate) === -1,
-        }" :aria-label="LL.View_day() + ' ' + day.formatted.day + ' ' + day.formatted.month">
+        }" :aria-label="LL.View_day() + ' ' + day.formatted.day + ' ' + day.formatted.month" :data-testid="`day#${index+1}`">
           <span v-if="today.localeCompare(day.localDate) === 0"
                 class="todayIndicator">
           </span>

mobile/src/views/TalkDetailsPage.vue

@@ -4,7 +4,7 @@
       <ion-header class="stickyHeader" v-if="talkNotes" :class="{ 'is-favorited': talkNotes.isFavorite, 'to-watch-later': talkNotes.watchLater }">
         <ion-toolbar>
           <ion-button class="stickyHeader-close" shape="round" slot="start" size="small" fill="outline" @click="closeAndNavigateBack()"
-          :aria-label="LL.Close_talk_details()">
+              :aria-label="LL.Close_talk_details()" data-testid="close-talk-details">
             <ion-icon src="/assets/icons/solid/close.svg"></ion-icon>
           </ion-button>
           <ion-title class="stickyHeader-title" slot="start" >{{ LL.Talk_details() }}</ion-title>