Add UI tests for code review groups

apps/src/componentLibrary/StylizedBaseDialog.jsx

@@ -106,7 +106,7 @@ export default function StylizedBaseDialog(props) {
         {props.body ? props.body : props.children}
       </div>
       {!props.hideFooter && (
-        <div>
+        <div className="uitest-base-dialog-footer">
           {horizontalRule}
           <div
             style={{

apps/src/templates/codeReviewGroups/CodeReviewGroup.jsx

@@ -16,7 +16,7 @@ export default function CodeReviewGroup({
     onNameUpdate(droppableId, event.target.value);
   };
   return (
-    <div style={styles.groupContainer}>
+    <div style={styles.groupContainer} className="uitest-code-review-group">
       <div style={styles.headerContainer}>
         <input
           value={name}

apps/src/templates/codeReviewGroups/CodeReviewGroupsStatusToggle.jsx

@@ -65,7 +65,10 @@ function CodeReviewGroupsStatusToggle({
       </div>
 
       {isToggledOn && (
-        <p style={styles.enabledMessage}>
+        <p
+          style={styles.enabledMessage}
+          id="uitest-code-review-groups-status-message"
+        >
           {i18n.codeReviewAutoDisableMessage({daysLeft})}
         </p>
       )}

apps/src/templates/codeReviewGroups/UnassignedStudentsPanel.jsx

@@ -23,7 +23,10 @@ export default function UnassignedStudentsPanel({
           isHorizontal
         />
       </div>
-      <div style={styles.groupsContainer}>
+      <div
+        id="uitest-code-review-group-unassigned"
+        style={styles.groupsContainer}
+      >
         <StudentGroup
           droppableId={unassignedGroup.droppableId}
           members={unassignedGroup.members}

dashboard/test/ui/features/learning_platform/teacher_dashboard/teacher_dashboard_code_review_groups.feature

@@ -0,0 +1,33 @@
+@no_mobile
+Feature: Managing code review groups in the "Manage Students" tab of the teacher dashboard
+
+Background:
+  Given I create a levelbuilder named "Dumbledore"
+  And I create a new student section assigned to "ui-test-csa-family-script"
+  And I sign in as "Dumbledore" and go home
+  And I save the student section url
+  And I save the section id from row 0 of the section table
+  Given I create a student named "Hermione"
+  And I join the section
+  # Observed flakiness trying to navigate to teacher dashboard while still signed in as Hermione.
+  # Explicitly wait for sign out to occur to avoid this.
+  And I wait to see ".alert-success"
+  And I sign out using jquery
+  Given I sign in as "Dumbledore" and go home
+
+  Scenario: Create a code review group, add a student to it, save it, and unassign all from group
+    Given I create a new code review group for the section I saved
+    When I add the first student to the first code review group
+    Then element ".uitest-code-review-group:first-of-type" has text "Hermione"
+    When I click selector ".uitest-base-dialog-confirm"
+    Then element ".uitest-base-dialog-footer" eventually contains text "Changes have been saved"
+    And element ".uitest-base-dialog-confirm" is disabled
+    When I click selector "#uitest-unassign-all-button"
+    Then element "#uitest-code-review-group-unassigned" has text "Hermione"
+    And element ".uitest-base-dialog-confirm" is enabled
+
+  Scenario: Enable code review for a section
+    Given I open the code review groups management dialog
+    When I click selector ".toggle-input"
+    # We display a message with the number of days until code review groups expire when code review is enabled
+    Then element "#uitest-code-review-groups-status-message" eventually contains text "Code review will be automatically disabled"

dashboard/test/ui/features/step_definitions/section_management_steps.rb

@@ -276,11 +276,17 @@ def get_section_id_from_table(row_index)
   STEPS
 end
 
-Then /^I create a new code review group for the section I saved$/ do
+Then /^I open the code review groups management dialog$/ do
   steps <<-STEPS
     And I navigate to teacher dashboard for the section I saved
     And I click selector "#uitest-teacher-dashboard-nav a:contains(Manage Students)" once I see it
     And I click selector "#uitest-code-review-groups-button" once I see it
+  STEPS
+end
+
+Then /^I create a new code review group for the section I saved$/ do
+  steps <<-STEPS
+    And I open the code review groups management dialog
     And I wait for 2 seconds
     And I click selector "#uitest-create-code-review-group" once I see it
   STEPS