BC-7936 Refactor calendar test to handle multiple selectors for form …

…fields. (#3530)
hpi-schul-cloud · Oct 22, 2024 · f057394 · f057394
1 parent 192c24f
commit f057394
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/static/scripts/calendar.js b/static/scripts/calendar.js
@@ -49,6 +49,27 @@ const getCalendarLanguage = (langAttribute) => {
 	}
 };
 
+// Add data-testid attributes to navigation buttons in calendar page
+// as the calendar module used (https://fullcalendar.io, version 4.4.2)
+// does not natively support configuring data-testids for buttons.
+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.dataset.testid = testId;
+		}
+	});
+};
+
 $(document).ready(() => {
 	const $createEventModal = $('.create-event-modal');
 	const $editEventModal = $('.edit-event-modal');
@@ -207,6 +228,10 @@ $(document).ready(() => {
 		viewRender(info) {
 			window.location.hash = info.view.name;
 		},
+
+		viewSkeletonRender() {
+			addDataTestIdsToCalendarNavigation();
+		},
 	});
 
 	calendar.render();

diff --git a/views/calendar/calendar.hbs b/views/calendar/calendar.hbs
@@ -13,7 +13,7 @@
 
     {{#content "page"}}
         <div class="route-calendar">
-            <div class="fullcalendar" id="calendar"></div>
+            <div class="fullcalendar" id="calendar" data-testid="calendar"></div>
         </div>
         {{#userHasPermission "CALENDAR_CREATE"}}
             {{#embed
@@ -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
@@ -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" dataTestId=(concat testIdPrefix "-startDate") }}
+    {{> "lib/forms/form-datetime-input" label=($t "global.label.to") id="endDate" class="input-group" dataTestId=(concat 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">