From 7fe5a685f1fb18db3e9a85cc14ebb6a14a6551dc Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Thu, 26 Mar 2026 17:45:02 +0100
Subject: [PATCH] first attempt at semantically tagging DOM elements for
 automated testing in stv. cypress is able to navigate from verband tree ->
 student list -> student details -> tabs and assert various states. WIP
 writing the test itself more robust and developing more testcases;

---
 public/js/components/Stv/Studentenverwaltung.js |  6 +++---
 .../Stv/Studentenverwaltung/Details.js          | 15 +++++++++++++--
 .../Studentenverwaltung/Details/MultiStatus.js  |  2 +-
 .../Details/Prestudent/MultiStatus.js           | 12 +++++++++++-
 .../components/Stv/Studentenverwaltung/List.js  |  7 ++++++-
 .../Stv/Studentenverwaltung/Verband.js          | 17 ++++++++++++++---
 6 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/public/js/components/Stv/Studentenverwaltung.js b/public/js/components/Stv/Studentenverwaltung.js
index 66ff7f891..02c845311 100644
--- a/public/js/components/Stv/Studentenverwaltung.js
+++ b/public/js/components/Stv/Studentenverwaltung.js
@@ -508,7 +508,7 @@ export default {
 		this.handlePersonUrl();
 	},
 	template: /* html */`
-		<div class="stv" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
+		<div class="stv" :class="{ 'sidebar-collapsed': sidebarCollapsed }" data-cy="studentenverwaltung">
 		<header class="navbar navbar-expand-lg navbar-dark bg-dark flex-md-nowrap p-0 shadow">
 			<div class="col-md-4 col-lg-3 col-xl-2 d-flex align-items-center">
 				<button
@@ -632,14 +632,14 @@ export default {
 						</app-menu>
 					</div>
 				</aside>
-				<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100">
+				<nav id="sidebarMenu" class="bg-light offcanvas offcanvas-start col-md p-md-0 h-100" data-cy="stv-sidebar">
 					<div class="offcanvas-header justify-content-end px-1 d-md-none">
 						<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" :aria-label="$p.t('ui/schliessen')"></button>
 					</div>
 					<stv-verband :preselectedKey="studiengangKz ? '' + studiengangKz : null" :endpoint="verbandEndpoint" @select-verband="onSelectVerband" class="col" style="height:0%"></stv-verband>
 					<stv-studiensemester v-model:studiensemester-kurzbz="studiensemesterKurzbz" @update:studiensemester-kurzbz="studiensemesterChanged"></stv-studiensemester>
 				</nav>
-				<main class="col-md-8 ms-sm-auto col-lg-9 col-xl-10">
+				<main class="col-md-8 ms-sm-auto col-lg-9 col-xl-10" data-cy="stv-main">
 					<vertical-split>
 						<template #top>
 							<stv-list ref="stvList" v-model:selected="selected" :studiengang-kz="studiengangKz" :studiensemester-kurzbz="studiensemesterKurzbz" @filterActive="handleCustomFilter"></stv-list>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details.js b/public/js/components/Stv/Studentenverwaltung/Details.js
index e59492cf5..806292642 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details.js
@@ -86,7 +86,7 @@ export default {
 		this.loadConfig();
 	},
 	template: `
-	<div class="stv-details h-100 d-flex flex-column">
+	<div class="stv-details h-100 d-flex flex-column" data-cy="stv-details">
 		<div v-if="!students?.length" class="justify-content-center d-flex h-100 align-items-center">
 			{{$p.t('ui', 'chooseStudent')}}
 		</div>
@@ -108,6 +108,7 @@ export default {
 			<fhc-tabs
 				v-if="students.length == 1"
 				ref="tabs" 
+				data-cy="stv-details-tabs"
 				:useprimevue="true"
 				:modelValue="students[0]"
 				:config="config"
@@ -116,7 +117,17 @@ export default {
 				@changed="reload"
 				>
 				</fhc-tabs>
-			<fhc-tabs v-else ref="tabs" :useprimevue="true" :modelValue="students" :config="config" :default="$route.params.tab" style="flex: 1 1 0%; height: 0%" @changed="reload"></fhc-tabs>
+			<fhc-tabs 
+				v-else 
+				ref="tabs"
+				data-cy="stv-details-tabs" 
+				:useprimevue="true" 
+				:modelValue="students" 
+				:config="config" 
+				:default="$route.params.tab" 
+				style="flex: 1 1 0%; height: 0%" 
+				@changed="reload">	
+			</fhc-tabs>
 		</div>
 		<div v-else>
 			Loading...
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/MultiStatus.js b/public/js/components/Stv/Studentenverwaltung/Details/MultiStatus.js
index 91c9593a4..67d081242 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/MultiStatus.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/MultiStatus.js
@@ -13,7 +13,7 @@ export default {
 		}
 	},
 	template: `
-	<div class="stv-details-multistatus h-100">
+	<div class="stv-details-multistatus h-100" data-cy="stv-tab-multistatus">
 		<tbl-multi-status :model-value="modelValue" :config="config"></tbl-multi-status>
 	</div>
 	`
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
index 97e35edbe..0d4090167 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent/MultiStatus.js
@@ -152,6 +152,7 @@ export default{
 								button.className = 'btn btn-outline-secondary btn-action';
 								button.innerHTML = '<i class="fa fa-forward"></i>';
 								button.title = this.$p.t('ui', 'btn_statusVorruecken');
+								button.setAttribute('data-cy', 'status-btn-advance');
 								button.addEventListener('click', () =>
 									this.actionAdvanceStatus(data.status_kurzbz, data.studiensemester_kurzbz, data.ausbildungssemester)
 								);
@@ -164,6 +165,7 @@ export default{
 							button.className = 'btn btn-outline-secondary btn-action';
 							button.innerHTML = '<i class="fa fa-check"></i>';
 							button.title = this.$p.t('ui', 'btn_confirmStatus');
+							button.setAttribute('data-cy', 'status-btn-confirm');
 							button.addEventListener('click', () =>
 								this.actionConfirmStatus(data.status_kurzbz, data.studiensemester_kurzbz, data.ausbildungssemester)
 							);
@@ -175,6 +177,7 @@ export default{
 							button.className = 'btn btn-outline-secondary btn-action';
 							button.innerHTML = '<i class="fa fa-edit"></i>';
 							button.title = this.$p.t('ui', 'btn_editStatus');
+							button.setAttribute('data-cy', 'status-btn-edit');
 							button.addEventListener('click', () =>
 								this.actionEditStatus(data.status_kurzbz, data.studiensemester_kurzbz, data.ausbildungssemester)
 							);
@@ -186,6 +189,7 @@ export default{
 							button.className = 'btn btn-outline-secondary btn-action';
 							button.innerHTML = '<i class="fa fa-xmark"></i>';
 							button.title = this.$p.t('ui', 'btn_deleteStatus');
+							button.setAttribute('data-cy', 'status-btn-delete');
 							button.addEventListener('click', () =>
 								this.actionDeleteStatus(data.status_kurzbz, data.studiensemester_kurzbz, data.ausbildungssemester)
 							);
@@ -204,6 +208,11 @@ export default{
 					{
 						row.getElement().classList.add('text-black','text-opacity-50','fst-italic');
 					}
+					// data-cy: unique per status entry for Cypress assertions
+					const stdsem = rowData.studiensemester_kurzbz ?? 'unknown';
+					const status = rowData.status_kurzbz ?? 'unknown';
+					const sem    = rowData.ausbildungssemester ?? '0';
+					row.getElement().setAttribute('data-cy', `status-row-${stdsem}-${status}-${sem}`);
 				},
 				layout: 'fitDataStretchFrozen',
 				layoutColumnsOnNewData: false,
@@ -393,7 +402,7 @@ export default{
 			.catch(this.$fhcAlert.handleSystemError);
 	},
 	template: `
-	<div class="stv-multistatus h-100 pt-3">			
+	<div class="stv-multistatus h-100 pt-3" data-cy="stv-multistatus">			
 		<status-modal
 			ref="test"
 			:meldestichtag="new Date(dataMeldestichtag)"
@@ -405,6 +414,7 @@ export default{
 		<core-filter-cmpt
 			v-if="!this.modelValue.length"
 			ref="table"
+			data-cy="stv-multistatus-table"
 			:tabulator-options="tabulatorOptions"
 			:tabulator-events="tabulatorEvents"
 			table-only
diff --git a/public/js/components/Stv/Studentenverwaltung/List.js b/public/js/components/Stv/Studentenverwaltung/List.js
index 1aa2c6b70..f331dbaf4 100644
--- a/public/js/components/Stv/Studentenverwaltung/List.js
+++ b/public/js/components/Stv/Studentenverwaltung/List.js
@@ -142,6 +142,10 @@ export default {
 						row.getElement().classList.add('text-black','text-opacity-50','fst-italic');
 					}
 					row.getElement().draggable = true
+					// data-cy for Cypress e2e: prefer prestudent_id, fall back to uid or person_id
+					const d = row.getData();
+					const id = d.prestudent_id ?? d.uid ?? d.person_id ?? 'unknown';
+					row.getElement().setAttribute('data-cy', 'student-row-' + id);
 				},
 
 				ajaxRequestFunc: (url, config, params) => {
@@ -600,11 +604,12 @@ export default {
 	// TODO(chris): focusin, focusout, keydown and tabindex should be in the filter component
 	// TODO(chris): filter component column chooser has no accessibilty features
 	template: `
-	<div class="stv-list h-100 pt-3">
+	<div class="stv-list h-100 pt-3" data-cy="stv-list">
 		<div
 			class="tabulator-container d-flex flex-column h-100"
 			:class="{'has-filter': filter.length}"
 			tabindex="0"
+			data-cy="stv-list-table-container"
 			@focusin="onFocus"
 			@keydown="onKeydown"
 			v-draggable:copyLink.capture="selectedDragObject"
diff --git a/public/js/components/Stv/Studentenverwaltung/Verband.js b/public/js/components/Stv/Studentenverwaltung/Verband.js
index ade488961..107f00a75 100644
--- a/public/js/components/Stv/Studentenverwaltung/Verband.js
+++ b/public/js/components/Stv/Studentenverwaltung/Verband.js
@@ -61,6 +61,15 @@ export default {
 		},
 		noSemReloadNodes() {
 			return this.nodes.reduce(this.mapNodesToNoSemReloadNodes, []);
+		},
+		colPt() {
+			return {
+				rowToggler: ( options ) => {
+					return {
+						'data-cy': `tree-toggle-${options?.parent?.props?.node?.key ?? 'unknown'}`
+					}
+				}
+			}
 		}
 	},
 	watch: {
@@ -319,7 +328,7 @@ export default {
 			.catch(this.$fhcAlert.handleSystemError);
 	},
 	template: /* html */`
-	<div class="overflow-auto" tabindex="-1">
+	<div class="overflow-auto" tabindex="-1" data-cy="stv-verband-tree">
 		<pv-treetable
 			ref="tree"
 			class="stv-verband p-treetable-sm"
@@ -339,6 +348,7 @@ export default {
 				field="name"
 				expander
 				class="text-break"
+				:pt="colPt"
 			>
 				<template #header>
 					<div class="text-right">
@@ -349,6 +359,7 @@ export default {
 								v-model="filters['global']"
 								class="form-control ps-5"
 								placeholder="Search"
+								data-cy="verband-search"
 							>
 						</div>
 					</div>
@@ -358,7 +369,7 @@ export default {
 						v-if="['semester', 'verband', 'gruppe', 'gruppe_kurzbz'].some(key => node.data.hasOwnProperty(key))"
 						:data-tree-item-key="node.key"
 						:title="node.data.studiengang_kz"
-						:data-cy="'student-collection-'+node.data.studiengang_kz"
+						:data-cy="'student-collection-'+node.key"
 						v-drag-click="() => toggleTreeNode(node)"
 						v-drop:link-strict.student-collection="(evt, students) => dropStudents(node, students)"
 					>
@@ -368,7 +379,7 @@ export default {
 						v-else
 						:data-tree-item-key="node.key"
 						:title="node.data.studiengang_kz"
-						:data-cy="'stg-node-'+node.data.studiengang_kz"
+						:data-cy="'stg-node-label-'+node.key"
 						v-drag-click="() => toggleTreeNode(node)"
 					>
 						{{ node.data.name }}