General: Allow instructors to navigate from course management to stud…

…ent view (#7597)
ls1intum · Nov 17, 2023 · 3d8bc19 · 3d8bc19
1 parent b14ef9f
commit 3d8bc19
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/src/main/webapp/app/overview/header-course.component.html b/src/main/webapp/app/overview/header-course.component.html
@@ -14,10 +14,24 @@ <h6 id="course-header-description" class="fw-normal">{{ courseDescription }}</h6
                     </div>
                 </div>
 
-                <div class="d-flex align-items-center justify-content-center manage-button-container" *ngIf="shouldShowGoToCourseManagementButton()">
-                    <button class="btn btn-secondary manage-button" (click)="redirectToCourseManagement()">
+                <div
+                    class="d-flex align-items-center justify-content-center manage-button-container"
+                    id="manage-button"
+                    *ngIf="!this.router.url.startsWith('/course-management') && this.course.isAtLeastTutor"
+                >
+                    <a class="btn btn-secondary manage-button" [routerLink]="['/course-management', this.course.id]">
                         {{ 'artemisApp.courseOverview.manage' | artemisTranslate }}
-                    </button>
+                    </a>
+                </div>
+
+                <div
+                    class="d-flex align-items-center justify-content-center manage-button-container"
+                    id="student-view-button"
+                    *ngIf="this.router.url.startsWith('/course-management')"
+                >
+                    <a class="btn btn-secondary manage-button" [routerLink]="['/courses', this.course.id]">
+                        {{ 'artemisApp.courseOverview.studentView' | artemisTranslate }}
+                    </a>
                 </div>
             </div>
         </div>

diff --git a/src/main/webapp/app/overview/header-course.component.ts b/src/main/webapp/app/overview/header-course.component.ts
@@ -21,7 +21,7 @@ export class HeaderCourseComponent implements OnChanges {
     public longDescriptionShown = false;
 
     faArrowDown = faArrowDown;
-    constructor(private router: Router) {}
+    constructor(protected router: Router) {}
 
     ngOnChanges() {
         this.adjustCourseDescription();
@@ -54,13 +54,4 @@ export class HeaderCourseComponent implements OnChanges {
             }
         }
     }
-
-    shouldShowGoToCourseManagementButton() {
-        const courseManagementPage = this.router.url.startsWith('/course-management');
-        return !courseManagementPage && this.course.isAtLeastTutor;
-    }
-
-    redirectToCourseManagement() {
-        this.router.navigate(['course-management', this.course.id]);
-    }
 }
diff --git a/src/main/webapp/i18n/de/student-dashboard.json b/src/main/webapp/i18n/de/student-dashboard.json
@@ -28,6 +28,7 @@
             "showMore": "Mehr anzeigen",
             "showLess": "Weniger anzeigen",
             "manage": "Verwalten",
+            "studentView": "Studentenansicht",
             "menu": {
                 "exercises": "Aufgaben",
                 "statistics": "Statistiken",

diff --git a/src/main/webapp/i18n/en/student-dashboard.json b/src/main/webapp/i18n/en/student-dashboard.json
@@ -28,6 +28,7 @@
             "showMore": "Show more",
             "showLess": "Show less",
             "manage": "Manage",
+            "studentView": "Student view",
             "menu": {
                 "exercises": "Exercises",
                 "statistics": "Statistics",

diff --git a/src/test/javascript/spec/component/course/header-course.component.spec.ts b/src/test/javascript/spec/component/course/header-course.component.spec.ts
@@ -1,11 +1,15 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HeaderCourseComponent } from 'app/overview/header-course.component';
 import { ArtemisTestModule } from '../../test.module';
 import { Course } from 'app/entities/course.model';
-import { MockProvider } from 'ng-mocks';
+import { MockPipe, MockProvider } from 'ng-mocks';
 import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
+import { MockRouterLinkDirective } from '../../helpers/mocks/directive/mock-router-link.directive';
 
 describe('Header Course Component', () => {
+    let fixture: ComponentFixture<HeaderCourseComponent>;
     let component: HeaderCourseComponent;
 
     const courseWithLongDescription: Course = {
@@ -24,12 +28,14 @@ describe('Header Course Component', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [HeaderCourseComponent, MockProvider(Router)],
-            imports: [ArtemisTestModule],
+            imports: [ArtemisTestModule, CommonModule, MockPipe(ArtemisTranslatePipe), MockRouterLinkDirective],
+            declarations: [HeaderCourseComponent],
+            providers: [MockProvider(Router)],
         })
             .compileComponents()
             .then(() => {
-                component = TestBed.createComponent(HeaderCourseComponent).componentInstance;
+                fixture = TestBed.createComponent(HeaderCourseComponent);
+                component = fixture.componentInstance;
             });
         window['innerWidth'] = 1920;
     });
@@ -84,19 +90,26 @@ describe('Header Course Component', () => {
         const urlSpy = jest.spyOn(router, 'url', 'get');
         urlSpy.mockReturnValue('/some-url');
 
-        const showManageLectureButton = component.shouldShowGoToCourseManagementButton();
-        expect(showManageLectureButton).toBeTrue();
+        fixture.detectChanges();
+
+        const manageButton = fixture.nativeElement.querySelector('#manage-button');
+        expect(manageButton).toBeTruthy();
     });
 
-    it('should not display manage button in course management', () => {
+    it('should not display manage button but go to student view button in course management', () => {
         component.course = courseWithShortDescription;
         component.course!.isAtLeastTutor = true;
         const router = TestBed.inject(Router);
         const urlSpy = jest.spyOn(router, 'url', 'get');
         urlSpy.mockReturnValue('/course-management/some-path');
 
-        const showManageLectureButton = component.shouldShowGoToCourseManagementButton();
-        expect(showManageLectureButton).toBeFalse();
+        fixture.detectChanges();
+
+        const manageButton = fixture.nativeElement.querySelector('#manage-button');
+        expect(manageButton).toBeNull();
+
+        const showStudentViewButton = fixture.nativeElement.querySelector('#student-view-button');
+        expect(showStudentViewButton).toBeTruthy();
     });
 
     it('should not display manage button to student', () => {
@@ -106,16 +119,20 @@ describe('Header Course Component', () => {
         const urlSpy = jest.spyOn(router, 'url', 'get');
         urlSpy.mockReturnValue('/some-url');
 
-        const showManageLectureButton = component.shouldShowGoToCourseManagementButton();
-        expect(showManageLectureButton).toBeFalse();
+        fixture.detectChanges();
+
+        const manageButton = fixture.nativeElement.querySelector('#manage-button');
+        expect(manageButton).toBeNull();
     });
 
-    it('should redirect to course management', () => {
+    it('should not display student view button in student view', () => {
         component.course = courseWithShortDescription;
+        component.course!.isAtLeastTutor = false;
         const router = TestBed.inject(Router);
-        const navigateSpy = jest.spyOn(router, 'navigate');
+        const urlSpy = jest.spyOn(router, 'url', 'get');
+        urlSpy.mockReturnValue('/courses');
 
-        component.redirectToCourseManagement();
-        expect(navigateSpy).toHaveBeenCalledWith(['course-management', 234]);
+        const showManageLectureButton = fixture.nativeElement.querySelector('#student-view-button');
+        expect(showManageLectureButton).toBeNull();
     });
 });