Teacher dashboard UI tests - part 1

apps/src/templates/sectionProgressV2/MoreDetailsDialog.jsx

@@ -39,7 +39,12 @@ export default function MoreDetailsDialog({onClose}) {
       initialFocus={false}
     >
       <Heading3>{i18n.progressTrackingIconKey()}</Heading3>
-      <button type="button" onClick={onClose} className={styles.xCloseButton}>
+      <button
+        id="ui-close-dialog"
+        type="button"
+        onClick={onClose}
+        className={styles.xCloseButton}
+      >
         <i id="x-close" className="fa-solid fa-xmark" />
       </button>
       <hr />

apps/src/templates/sectionProgressV2/ProgressTableV2.jsx

@@ -168,7 +168,7 @@ function ProgressTableV2({
   }, [isSkeleton, getRenderedColumn, unitData, tableRef]);
 
   return (
-    <div className={styles.progressTableV2}>
+    <div className={styles.progressTableV2} id="ui-test-progress-table-v2">
       <StudentColumn
         sortedStudents={sortedStudents}
         unitName={unitData?.title}

apps/src/templates/sectionProgressV2/SectionProgressSelector.jsx

@@ -65,7 +65,12 @@ function SectionProgressSelector({
 
   const toggleV1OrV2Link = () => (
     <div className={styles.toggleViews}>
-      <Link type="primary" size="s" onClick={onShowProgressTableV2Change}>
+      <Link
+        type="primary"
+        size="s"
+        onClick={onShowProgressTableV2Change}
+        id="ui-test-toggle-progress-view"
+      >
         {displayV2
           ? i18n.switchToOldProgressView()
           : i18n.switchToNewProgressView()}

dashboard/test/ui/features/teacher_tools/teacher_dashboard/teacher_dashboard.feature

@@ -20,6 +20,7 @@ Feature: Using the teacher dashboard
 
   Scenario: Viewing a student
     Given I create an authorized teacher-associated student named "Sally"
+    Given I am assigned to unit "allthethings"
     And I complete the level on "http://studio.code.org/s/allthethings/lessons/2/levels/1"
     And I complete the free response on "http://studio.code.org/s/allthethings/lessons/27/levels/1"
     And I submit the assessment on "http://studio.code.org/s/allthethings/lessons/33/levels/1"
@@ -30,9 +31,17 @@ Feature: Using the teacher dashboard
     And I wait until element "a:contains('Untitled Section')" is visible
     And I save the section id from row 0 of the section table
     Then I navigate to teacher dashboard for the section I saved
+    Then I append "/?enableExperiments=section_progress_v2" to the URL
     And I wait until element "#uitest-course-dropdown" is visible
     And I select the "All the Things! *" option in dropdown "uitest-course-dropdown"
 
+    # Toggle to V2 progress view
+    Then I click selector "#ui-test-toggle-progress-view"
+    And I wait until element "h6:contains(Icon Key)" is visible
+    And I wait until element "#ui-test-progress-table-v2" is visible
+    Then I click selector "#ui-test-toggle-progress-view"
+    And I wait until element "#uitest-course-dropdown" is visible
+
     # Stats tab
     And I click selector "#uitest-teacher-dashboard-nav a:contains(Stats)" once I see it
     And I wait until element "#uitest-stats-table" is visible
@@ -242,4 +251,4 @@ Feature: Using the teacher dashboard
     And I enter the section code into "input.ui-test-join-section"
     And I click selector "button.ui-test-join-section"
     Then I wait until element ".announcement-notification" is visible
-    And element ".announcement-notification" contains text matching "You are already an instructor for section"
+    And element ".announcement-notification" contains text matching "You are already an instructor for section"

dashboard/test/ui/features/teacher_tools/teacher_dashboard/teacher_dashboard_progress_v2.feature

@@ -0,0 +1,34 @@
+@no_mobile
+Feature: Using the V2 teacher dashboard
+
+Scenario: Teacher can open and close Icon Key and details
+  Given I create an authorized teacher-associated student named "Sally"
+  Given I am assigned to unit "allthethings"
+  And I complete the level on "http://studio.code.org/s/allthethings/lessons/2/levels/1"
+
+  When I sign in as "Teacher_Sally" and go home
+  And I get levelbuilder access
+  When I click selector "a:contains(Untitled Section)" once I see it to load a new page
+  And I wait until element "#uitest-teacher-dashboard-nav" is visible
+  And check that the URL contains "/teacher_dashboard/sections/"
+  And I wait until element "#uitest-course-dropdown" is visible
+  Then I append "/?enableExperiments=section_progress_v2" to the URL
+
+  # toggle to V2 progress view
+  Then I click selector "#ui-test-toggle-progress-view"
+  And I wait until element "h6:contains(Icon Key)" is visible
+  And I wait until element "#ui-test-progress-table-v2" is visible
+  And element "#ui-test-progress-table-v2" is visible 
+
+  # Teacher can minimize icon key
+  And I wait until element "strong:contains(Assignment Completion States)" is visible
+  Then I click selector "h6:contains('Icon Key')"
+  And element "strong:contains(Assignment Completion States)" is hidden
+  Then I click selector "h6:contains('Icon Key')"
+  And I wait until element "strong:contains(Assignment Completion States)" is visible
+
+  # Teacher can open the more details of the icon key and close it
+  Then I click selector "a:contains('More Details')"
+  And I wait until element "h3:contains(Progress Tracking Icon Key)" is visible
+  And I click selector "#ui-close-dialog"
+  And element "h3:contains(Progress Tracking Icon Key)" is hidden