From 0549ef9d4c86d53b0eeb453dadc7c78854bba5ee Mon Sep 17 00:00:00 2001
From: Uzaeir Khan <uzair.khan@dataport.de>
Date: Thu, 17 Oct 2024 11:24:58 +0200
Subject: [PATCH] BC-7936 initial commit

---
 static/scripts/calendar.js                 | 54 +++++++++++++++++++---
 views/calendar/calendar.hbs                |  4 +-
 views/calendar/forms/form-create-event.hbs | 11 +++--
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/static/scripts/calendar.js b/static/scripts/calendar.js
index 0e13017177..8e1d5813b3 100644
--- a/static/scripts/calendar.js
+++ b/static/scripts/calendar.js
@@ -49,6 +49,25 @@ const getCalendarLanguage = (langAttribute) => {
 	}
 };
 
+// Add data-testid attributes to navigation buttons in calendar page
+const addDatatestidsToCalendarNavigation = () => {
+	const buttonData = [
+		{ selector: '.fc-right .fc-prev-button', testId: 'right-prev-button' },
+		{ selector: '.fc-right .fc-next-button', testId: 'right-next-button' },
+		{ selector: '.fc-right .fc-today-button', testId: 'right-today-button' },
+		{ selector: '.fc-right .fc-timeGridDay-button', testId: 'right-day-view-button' },
+		{ selector: '.fc-right .fc-timeGridWeek-button', testId: 'right-week-view-button' },
+		{ selector: '.fc-right .fc-dayGridMonth-button', testId: 'right-month-view-button' },
+	];
+
+	buttonData.forEach(({ selector, testId }) => {
+		const button = document.querySelector(selector);
+		if (button) {
+			button.setAttribute('data-testid', testId);
+		}
+	});
+};
+
 $(document).ready(() => {
 	const $createEventModal = $('.create-event-modal');
 	const $editEventModal = $('.edit-event-modal');
@@ -119,7 +138,12 @@ $(document).ready(() => {
 	const getLangAttribute = () => document.querySelector('html').getAttribute('lang');
 
 	const calendar = new Calendar(getCalendarElement(), {
-		plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, momentTimezonePlugin],
+		plugins: [
+			dayGridPlugin,
+			timeGridPlugin,
+			interactionPlugin,
+			momentTimezonePlugin,
+		],
 		defaultView: getView() || 'dayGridMonth',
 		editable: false,
 		timeZone: getCalendarTimezone(),
@@ -143,8 +167,12 @@ $(document).ready(() => {
 				return false;
 			}
 			// personal event
-			const startDate = toMoment(event.start, calendar).format($t('format.dateTimeToPicker'));
-			const endDate = toMoment(event.end || event.start, calendar).format($t('format.dateTimeToPicker'));
+			const startDate = toMoment(event.start, calendar).format(
+				$t('format.dateTimeToPicker'),
+			);
+			const endDate = toMoment(event.end || event.start, calendar).format(
+				$t('format.dateTimeToPicker'),
+			);
 
 			const eventData = event.extendedProps || {};
 
@@ -163,7 +191,8 @@ $(document).ready(() => {
 				action: URI.getSingleEvent(eventData._id),
 			});
 
-			if (!eventData['x-sc-teamId']) { // course or non-course event
+			if (!eventData['x-sc-teamId']) {
+				// course or non-course event
 				transformCourseOrTeamEvent($editEventModal, eventData);
 				$editEventModal.find('.btn-delete').click(() => {
 					$.ajax({
@@ -178,7 +207,8 @@ $(document).ready(() => {
 				$editEventModal.appendTo('body').modal('show');
 			}
 
-			if (eventData['x-sc-teamId']) { // team event
+			if (eventData['x-sc-teamId']) {
+				// team event
 				const teamId = eventData['x-sc-teamId'];
 				window.location.assign(`/teams/${teamId}?activeTab=events`);
 			}
@@ -189,8 +219,12 @@ $(document).ready(() => {
 			const { date } = info;
 
 			// open create event modal
-			const startDate = toMoment(date, calendar).format($t('format.dateTimeToPicker'));
-			const endDate = toMoment(date, calendar).add(1, 'hour').format($t('format.dateTimeToPicker'));
+			const startDate = toMoment(date, calendar).format(
+				$t('format.dateTimeToPicker'),
+			);
+			const endDate = toMoment(date, calendar)
+				.add(1, 'hour')
+				.format($t('format.dateTimeToPicker'));
 
 			populateModalForm($createEventModal, {
 				title: $t('global.headline.addDate'),
@@ -207,6 +241,12 @@ $(document).ready(() => {
 		viewRender(info) {
 			window.location.hash = info.view.name;
 		},
+
+		// viewSkeletonRender to trigger the addition of data-testid to navigation buttons
+		viewSkeletonRender() {
+			// Add custom data-testids for navigation buttons
+			addDatatestidsToCalendarNavigation();
+		},
 	});
 
 	calendar.render();
diff --git a/views/calendar/calendar.hbs b/views/calendar/calendar.hbs
index 351851a624..15e092e1d2 100644
--- a/views/calendar/calendar.hbs
+++ b/views/calendar/calendar.hbs
@@ -27,7 +27,7 @@
                 currentTimezoneOffset=../currentTimezoneOffset
             }}
                 {{#content "fields"}}
-                    {{> "calendar/forms/form-create-event" addCourse="true" addTeam="true" collapseIdCourse="2" collapseIdTeam="3"}}
+                    {{> "calendar/forms/form-create-event" addCourse="true" addTeam="true" collapseIdCourse="2" collapseIdTeam="3" testIdPrefix="create"}}
                 {{/content}}
             {{/embed}}
         {{/userHasPermission}}
@@ -42,7 +42,7 @@
             currentTimezoneOffset=../currentTimezoneOffset
         }}
             {{#content "fields"}}
-                {{> "calendar/forms/form-create-event" addCourse="true" addTeam="true" collapseIdCourse="4" collapseIdTeam="5"}}
+                    {{> "calendar/forms/form-create-event" addCourse="true" addTeam="true" collapseIdCourse="4" collapseIdTeam="5" testIdPrefix="edit"}}
             {{/content}}
             {{#content "additional-actions"}}
                 <button type="button" class="btn btn-primary btn-danger btn-delete" data-testid='calendar-event-btn-delete'>
diff --git a/views/calendar/forms/form-create-event.hbs b/views/calendar/forms/form-create-event.hbs
index 919dc67c76..1e3ce568c6 100644
--- a/views/calendar/forms/form-create-event.hbs
+++ b/views/calendar/forms/form-create-event.hbs
@@ -1,20 +1,21 @@
 <input name="scopeId" type="hidden" data-force-value="true" value="{{userId}}" />
 <div class="form-group">
     <label class="control-label" for="title">{{$t "global.label.title" }}</label>
-    <input data-testid="team_event_name" class="form-control" name="summary" required placeholder="{{$t "calendar.input.egHandballTraining"}}">
+    <input data-testid="{{testIdPrefix}}-event-name" class="form-control" name="summary" required placeholder="{{$t "calendar.input.egHandballTraining"}}">
 </div>
 <div class="form-group">
-    {{> "lib/forms/form-datetime-input" label=($t "global.label.from") id="startDate" class="input-group" }}
-    {{> "lib/forms/form-datetime-input" label=($t "global.label.to") id="endDate" class="input-group" }}
+    {{> "lib/forms/form-datetime-input" label=($t "global.label.from") id="startDate" class="input-group" data-testid="{{testIdPrefix}}-startDate" }}
+    {{> "lib/forms/form-datetime-input" label=($t "global.label.to") id="endDate" class="input-group" data-testid="{{testIdPrefix}}-endDate" }}
 </div>
 <div class="form-group">
     <label class="control-label" for="description">{{$t "global.label.description" }}</label>
-    <textarea class="form-control" name="description" aria-label="{{$t "global.label.description"}}" placeholder="" data-testid="team_event_description" ></textarea>
+    <textarea class="form-control" name="description" aria-label="{{$t "global.label.description"}}" placeholder="" data-testid="{{testIdPrefix}}-event-description"></textarea>
 </div>
 <div class="form-group">
     <label class="control-label" for="location">{{$t "calendar.label.location" }}</label>
-    <input id="location" data-testid="team_event_location" class="form-control" name="location" placeholder="{{$t "calendar.input.egGym"}}">
+    <input id="location" data-testid="{{testIdPrefix}}-event-location" class="form-control" name="location" placeholder="{{$t "calendar.input.egGym"}}">
 </div>
+
 {{#ifConfig "FEATURE_VIDEOCONFERENCE_ENABLED" true}}
     {{#if ../showVideoconferenceOption}}
     <div class="form-group create-videoconference hidden">