General: Fix scroll to section when clicking status bar in exercise update view

src/main/webapp/app/forms/form-status-bar/form-status-bar.component.html

@@ -1,8 +1,8 @@
 <div class="form-status-bar-container pt-2 pb-1">
     <hr class="form-status-line" />
     <div class="d-flex justify-content-between">
-        @for (formStatusSection of formStatusSections; track formStatusSection.title) {
-            <div class="d-flex flex-column align-items-center">
+        @for (formStatusSection of formStatusSections; track formStatusSection.title; let index = $index) {
+            <div class="d-flex flex-column align-items-center" id="status-bar-section-item-{{ index }}">
                 <div
                     class="d-flex align-items-center justify-content-center border rounded-circle border-secondary form-status-circle"
                     (click)="scrollToHeadline(formStatusSection.title)"
@@ -13,7 +13,7 @@
                         class="fa-sm"
                     />
                 </div>
-                <a (click)="scrollToHeadline(formStatusSection.title)" class="d-none d-sm-inline link-primary">{{ formStatusSection.title | artemisTranslate }}</a>
+                <a (click)="scrollToHeadline(formStatusSection.title)" class="d-none d-sm-inline link-primary">{{ formStatusSection.title | artemisTranslate }} </a>
             </div>
         }
     </div>

src/main/webapp/app/forms/form-status-bar/form-status-bar.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 export type FormSectionStatus = {
     title: string;
@@ -11,27 +11,21 @@ export type FormSectionStatus = {
     templateUrl: './form-status-bar.component.html',
     styleUrl: './form-status-bar.component.scss',
 })
-export class FormStatusBarComponent implements AfterViewInit {
+export class FormStatusBarComponent {
     @Input()
     formStatusSections: FormSectionStatus[];
 
-    @HostListener('window:resize')
-    onResize() {
-        setTimeout(() => {
-            const headerHeight = (document.querySelector('jhi-navbar') as HTMLElement).offsetHeight;
-            document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
-        });
-    }
-
-    ngAfterViewInit() {
-        this.onResize();
-    }
-
     scrollToHeadline(id: string) {
         const element = document.getElementById(id);
+
         if (element) {
-            element.style.scrollMarginTop = 'calc(2rem + 78px)';
-            element.scrollIntoView();
+            const headerHeight = (document.querySelector('jhi-navbar') as HTMLElement).offsetHeight;
+
+            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            const offset = isSafari ? 8 : 4;
+
+            element.style.scrollMarginTop = `calc(${offset}rem + ${headerHeight}px)`;
+            element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
         }
     }
 }

src/test/javascript/spec/component/forms/form-status-bar.component.spec.ts

@@ -30,10 +30,6 @@ describe('FormStatusBarComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it('should initializes', () => {
-        expect(comp).toBeDefined();
-    });
-
     it('should scroll to correct headline', () => {
         const mockDOMElement = { scrollIntoView: jest.fn(), style: {} };
         const getElementSpy = jest.spyOn(document, 'getElementById').mockReturnValue(mockDOMElement as any as HTMLElement);

src/test/playwright/e2e/exercise/programming/ProgrammingExerciseManagement.spec.ts

@@ -33,6 +33,36 @@ test.describe('Programming Exercise Management', () => {
             await expect(courseManagementExercises.getExerciseTitle(exerciseTitle)).toBeVisible();
             await page.waitForURL(`**/programming-exercises/${exercise.id}**`);
         });
+
+        test('FormStatusBar scrolls to the correct section with headline visible after scroll', async ({
+            login,
+            page,
+            navigationBar,
+            courseManagement,
+            courseManagementExercises,
+            programmingExerciseCreation,
+        }) => {
+            await login(admin, '/');
+            await navigationBar.openCourseManagement();
+            await courseManagement.openExercisesOfCourse(course.id!);
+            await courseManagementExercises.createProgrammingExercise();
+            await page.waitForURL('**/programming-exercises/new**');
+
+            const firstSectionHeadline = 'General';
+            const firstSectionStatusBarId = 0;
+            const fourthSectionHeadline = 'Problem';
+            const fourthSectionStatusBarId = 3;
+
+            // scroll down
+            await programmingExerciseCreation.clickFormStatusBarSection(fourthSectionStatusBarId);
+            await programmingExerciseCreation.checkIsHeadlineLocatorInViewport(firstSectionHeadline, false);
+            await programmingExerciseCreation.checkIsHeadlineLocatorInViewport(fourthSectionHeadline, true);
+
+            // scroll up
+            await programmingExerciseCreation.clickFormStatusBarSection(firstSectionStatusBarId);
+            await programmingExerciseCreation.checkIsHeadlineLocatorInViewport(firstSectionHeadline, true);
+            await programmingExerciseCreation.checkIsHeadlineLocatorInViewport(fourthSectionHeadline, false);
+        });
     });
 
     test.describe('Programming exercise deletion', () => {

src/test/playwright/support/pageobjects/exercises/programming/ProgrammingExerciseCreationPage.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
 import { PROGRAMMING_EXERCISE_BASE, ProgrammingLanguage } from '../../../constants';
 import { Dayjs } from 'dayjs';
 
@@ -73,4 +73,37 @@ export class ProgrammingExerciseCreationPage {
         }
         await expect(this.page.locator('.owl-dt-popup')).not.toBeVisible();
     }
+
+    async clickFormStatusBarSection(sectionId: number) {
+        const searchedSectionId = `#status-bar-section-item-${sectionId}`;
+        const sectionStatusBarLocator: Locator = this.page.locator(searchedSectionId);
+        expect(await sectionStatusBarLocator.isVisible()).toBeTruthy();
+        await sectionStatusBarLocator.click();
+        await this.page.waitForTimeout(1000); // wait for scroll to finish
+    }
+
+    /**
+     * Verifies that the locator is visible in the viewport and not hidden by another element
+     *
+     * {@link toBeHidden} and {@link toBeVisible} do not solve this problem
+     * @param locator
+     */
+    private async verifyLocatorIsVisible(locator: Locator) {
+        const initialPosition = await locator.boundingBox();
+        await locator.click(); // scrolls to the locator if needed (e.g. if hidden by another element)
+        const newPosition = await locator.boundingBox();
+        expect(initialPosition).toEqual(newPosition);
+    }
+
+    async checkIsHeadlineLocatorInViewport(searchedHeadlineDisplayText: string, expected: boolean) {
+        const headlineLocator = this.page.getByRole('heading', { name: searchedHeadlineDisplayText }).first();
+
+        if (expected) {
+            await expect(headlineLocator).toBeInViewport({ ratio: 1 });
+            /** additional check because {@link toBeInViewport} is too inaccurate */
+            await this.verifyLocatorIsVisible(headlineLocator);
+        } else {
+            await expect(headlineLocator).not.toBeInViewport();
+        }
+    }
 }