add data-testids + move ariaLabel on room tiles

hpi-schul-cloud · Sep 17, 2024 · b437ee7 · b437ee7
1 parent 83e5c13
commit b437ee7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/modules/feature/room/RoomGrid.vue b/src/modules/feature/room/RoomGrid.vue
@@ -18,8 +18,18 @@
 	</template>
 	<template v-else>
 		<v-row>
-			<v-col v-for="room in rooms" :key="room.id" cols="6" md="4" lg="3">
-				<RoomTile :room="room" class="px-5 mb-5" />
+			<v-col
+				v-for="(room, index) in rooms"
+				:key="room.id"
+				cols="6"
+				md="4"
+				lg="3"
+			>
+				<RoomTile
+					:room="room"
+					class="px-5 mb-5"
+					:data-testid="`room-tile-${index}`"
+				/>
 			</v-col>
 		</v-row>
 	</template>

diff --git a/src/modules/feature/room/RoomTile.vue b/src/modules/feature/room/RoomTile.vue
@@ -1,18 +1,14 @@
 <template>
-	<div>
-		<RouterLink :to="roomPath" class="room-link">
-			<div
-				class="room-avatar"
-				:class="avatarColor"
-				:aria-label="avatarAriaLabel"
-			>
-				<span class="text-h3 text-white" data-testid="room-short-title">
-					{{ room.shortTitle }}
-				</span>
-			</div>
-			<div class="room-title mb-2 mt-2">{{ room.title }}</div>
-		</RouterLink>
-	</div>
+	<RouterLink :to="roomPath" class="room-link" :aria-label="avatarAriaLabel">
+		<div class="room-avatar" :class="avatarColor">
+			<span class="text-h3 text-white" data-testid="room-short-title">
+				{{ room.shortTitle }}
+			</span>
+		</div>
+		<div class="room-title mb-2 mt-2" data-testid="room-title">
+			{{ room.title }}
+		</div>
+	</RouterLink>
 </template>
 
 <script setup lang="ts">