[#12658] Instructor Home Page: Dropdown buttons on mobile (#12662)

* fixed changes & made responsive drop down for the indtructor home page * resolved the issues that are causing test cases that are failing * resolved the Component testing issues that is causing test cases fail. * resolved the E2E testing issues. * resolved the E2E testing issues. * resolved the E2E testing issues. * resolved the E2E testing issues. * resolved the E2E testing issues. * resolved the E2E testing issues. * modified & made small adjustments in the code as required --------- Co-authored-by: Jason Qiu <jason_qiu@hotmail.com> Co-authored-by: Dominic Lim <46486515+domlimm@users.noreply.github.com>
TEAMMATES · Dec 24, 2023 · 1915ade · 1915ade
1 parent 08a6195
commit 1915ade
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorHomePage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorHomePage.java
@@ -119,14 +119,14 @@ public void deleteSession(int courseTabIndex, int sessionIndex) {
     public void archiveCourse(int courseTabIndex) {
         WebElement courseTab = getCourseTab(courseTabIndex);
         click(courseTab.findElement(By.className("btn-course")));
-        clickAndConfirm(courseTab.findElement(By.className("btn-archive-course")));
+        clickAndConfirm(browser.driver.findElement(By.cssSelector("body > div > div > .btn-archive-course")));
         waitUntilAnimationFinish();
     }
 
     public void deleteCourse(int courseTabIndex) {
         WebElement courseTab = getCourseTab(courseTabIndex);
         click(courseTab.findElement(By.className("btn-course")));
-        clickAndConfirm(courseTab.findElement(By.className("btn-delete-course")));
+        clickAndConfirm(browser.driver.findElement(By.cssSelector("body > div > div > .btn-delete-course")));
         waitUntilAnimationFinish();
     }
 

diff --git a/...instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap b/...instructor/instructor-home-page/__snapshots__/instructor-home-page.component.spec.ts.snap
@@ -419,6 +419,7 @@ exports[`InstructorHomePageComponent should snap with one course with one feedba
             >
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -451,6 +452,7 @@ exports[`InstructorHomePageComponent should snap with one course with one feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -476,6 +478,7 @@ exports[`InstructorHomePageComponent should snap with one course with one feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -501,6 +504,7 @@ exports[`InstructorHomePageComponent should snap with one course with one feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1017,6 +1021,7 @@ exports[`InstructorHomePageComponent should snap with one course with two feedba
             >
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1042,6 +1047,7 @@ exports[`InstructorHomePageComponent should snap with one course with two feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1067,6 +1073,7 @@ exports[`InstructorHomePageComponent should snap with one course with two feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1092,6 +1099,7 @@ exports[`InstructorHomePageComponent should snap with one course with two feedba
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1772,6 +1780,7 @@ exports[`InstructorHomePageComponent should snap with one course with unexpanded
             >
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1804,6 +1813,7 @@ exports[`InstructorHomePageComponent should snap with one course with unexpanded
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1829,6 +1839,7 @@ exports[`InstructorHomePageComponent should snap with one course with unexpanded
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -1854,6 +1865,7 @@ exports[`InstructorHomePageComponent should snap with one course with unexpanded
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2041,6 +2053,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate
             >
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2073,6 +2086,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2098,6 +2112,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2123,6 +2138,7 @@ exports[`InstructorHomePageComponent should snap with one course with unpopulate
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2334,6 +2350,7 @@ exports[`InstructorHomePageComponent should snap with one course without feedbac
             >
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2366,6 +2383,7 @@ exports[`InstructorHomePageComponent should snap with one course without feedbac
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2391,6 +2409,7 @@ exports[`InstructorHomePageComponent should snap with one course without feedbac
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button
@@ -2416,6 +2435,7 @@ exports[`InstructorHomePageComponent should snap with one course without feedbac
               </span>
               <span
                 class="dropdown"
+                container="body"
                 ngbdropdown=""
               >
                 <button

diff --git a/src/web/app/pages-instructor/instructor-home-page/instructor-home-page.component.html b/src/web/app/pages-instructor/instructor-home-page/instructor-home-page.component.html
@@ -44,7 +44,7 @@ <h1>Home</h1>
           <b class="course-details text-break">[{{ courseTabModel.course.courseId }}]: {{
             courseTabModel.course.courseName }}</b>
           <div class="card-header-btn-toolbar flex-lg-shrink-0" *ngIf="courseTabModel.isAjaxSuccess">
-            <span ngbDropdown>
+            <span ngbDropdown container="body">
               <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Students </button>
               <div ngbDropdownMenu (click)="$event.stopPropagation()">
                 <ng-container *ngIf="courseTabModel.instructorPrivilege.canModifyStudent">
@@ -57,23 +57,23 @@ <h1>Home</h1>
                 </a>
               </div>
             </span>
-            <span ngbDropdown>
+            <span ngbDropdown container="body">
               <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Instructors </button>
               <div ngbDropdownMenu (click)="$event.stopPropagation()">
                 <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/courses/edit"
                   [queryParams]="{courseid: courseTabModel.course.courseId}"> View / Edit
                 </a>
               </div>
             </span>
-            <span ngbDropdown>
+            <span ngbDropdown container="body">
               <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle> Sessions </button>
               <div ngbDropdownMenu (click)="$event.stopPropagation()">
                 <a class="btn btn-light btn-sm dropdown-item" tmRouterLink="/web/instructor/sessions"
                   [queryParams]="{courseid: courseTabModel.course.courseId}"> Add
                 </a>
               </div>
             </span>
-            <span ngbDropdown>
+            <span ngbDropdown container="body">
               <button type="button" class="btn-course btn btn-primary btn-sm" ngbDropdownToggle> Course </button>
               <div ngbDropdownMenu (click)="$event.stopPropagation()">
                 <a class="btn-archive-course btn btn-light btn-sm dropdown-item"

diff --git a/src/web/app/pages-instructor/instructor-home-page/instructor-home-page.component.spec.ts b/src/web/app/pages-instructor/instructor-home-page/instructor-home-page.component.spec.ts
@@ -205,7 +205,7 @@ describe('InstructorHomePageComponent', () => {
 
     const courseButton: any = fixture.debugElement.nativeElement.querySelector('.btn-course');
     courseButton.click();
-    const archiveButton: any = fixture.debugElement.nativeElement.querySelector('.btn-archive-course');
+    const archiveButton: any = document.querySelector('body > div > div > .btn-archive-course');
     archiveButton.click();
 
     expect(component.courseTabModels.length).toEqual(1);
@@ -233,8 +233,8 @@ describe('InstructorHomePageComponent', () => {
 
     const courseButton: any = fixture.debugElement.nativeElement.querySelector('.btn-course');
     courseButton.click();
-    const archiveButton: any = fixture.debugElement.nativeElement.querySelector('.btn-delete-course');
-    archiveButton.click();
+    const deleteButton: any = document.querySelector('body > div > div > .btn-delete-course');
+    deleteButton.click();
 
     expect(component.courseTabModels.length).toEqual(1);
     expect(component.courseTabModels[0].course.courseId).toEqual('CS3281');