Fix cypress tests

csmberkeley · Aug 12, 2023 · 0f76572 · 0f76572
1 parent b7ea294
commit 0f76572
Show file tree

Hide file tree

Showing 13 changed files with 171 additions and 195 deletions.
diff --git a/csm_web/frontend/src/components/course/SectionCard.tsx b/csm_web/frontend/src/components/course/SectionCard.tsx
@@ -178,12 +178,13 @@ export const SectionCard = ({
             MANAGE
           </Link>
         ) : (
-          <div
-            className={`primary-btn section-card-footer ${courseOpen ? "" : "disabled"}`}
+          <button
+            className={`primary-btn section-card-footer`}
+            disabled={!courseOpen || isFull}
             onClick={isFull ? undefined : enroll}
           >
             ENROLL
-          </div>
+          </button>
         )}
       </section>
     </React.Fragment>

diff --git a/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx b/csm_web/frontend/src/components/section/MentorSectionAttendance.tsx
@@ -265,7 +265,7 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                   </div>
                 ))}
               </div>
-              <table id="csm-table mentor-attendance-table">
+              <table className="csm-table" id="mentor-attendance-table">
                 <tbody>
                   {selectedOccurrence &&
                     stagedAttendances.map(({ id, student, presence }) => {
@@ -322,7 +322,8 @@ const MentorSectionAttendance = ({ sectionId }: MentorSectionAttendanceProps): R
                     <div className="word-of-the-day-action-container">
                       <div className="word-of-the-day-input-container">
                         <input
-                          className="word-of-the-day-input"
+                          className="form-input"
+                          name="word-of-the-day"
                           type="text"
                           placeholder="Word of the Day"
                           value={wordOfTheDay}

diff --git a/csm_web/frontend/src/components/section/StudentSection.tsx b/csm_web/frontend/src/components/section/StudentSection.tsx
@@ -293,7 +293,12 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
         <h3 className="word-of-the-day-title">Submit Word of the Day</h3>
         <div className="word-of-the-day-action-container">
           <div className="word-of-the-day-input-container">
-            <select value={selectedAttendanceId} className="form-select" onChange={handleSelectedAttendanceIdChange}>
+            <select
+              value={selectedAttendanceId}
+              className="form-select"
+              name="word-of-the-day-date"
+              onChange={handleSelectedAttendanceIdChange}
+            >
               {attendances
                 // only allow choosing from dates with blank attendances
                 .filter(attendance => attendance.presence === "")
@@ -308,6 +313,7 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
             </select>
             <input
               className="form-input"
+              name="word-of-the-day"
               type="text"
               placeholder="Word of the Day"
               value={currentWord}

diff --git a/csm_web/frontend/src/css/base/form.scss b/csm_web/frontend/src/css/base/form.scss
@@ -30,6 +30,7 @@
   border-radius: 6px;
 
   box-sizing: content-box;
+  font-family: inherit;
 }
 
 .form-select:disabled,

diff --git a/csm_web/frontend/src/css/section.scss b/csm_web/frontend/src/css/section.scss
@@ -434,6 +434,6 @@
   text-align: center;
   color: white;
   padding: 5px 10px;
-  max-width: 200px;
+  width: 200px;
   border-radius: 6px;
 }
diff --git a/csm_web/frontend/src/css/word-of-the-day.scss b/csm_web/frontend/src/css/word-of-the-day.scss
@@ -30,21 +30,6 @@
   gap: 8px;
 }
 
-.word-of-the-day-input {
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 600;
-  font-family: "Montserrat";
-  border: none;
-  background-color: #ededed;
-  padding: 10px 20px;
-  margin-right: 5px;
-}
-
-.word-of-the-day-input::placeholder {
-  opacity: 0.65;
-}
-
 .word-of-the-day-status.unselected {
   color: $csm-danger;
 }

diff --git a/cypress/e2e/course/coordinator-course.cy.ts b/cypress/e2e/course/coordinator-course.cy.ts
@@ -177,7 +177,7 @@ describe("coordinator course view", () => {
           .invoke("text")
           .should("match", /online/i);
         // should show "manage" button
-        cy.contains(".csm-btn", /manage/i).should("be.visible");
+        cy.contains(".primary-btn", /manage/i).should("be.visible");
 
         // should not be full
         cy.get('[title="Current enrollment"]')

diff --git a/cypress/e2e/course/restricted-courses.cy.ts b/cypress/e2e/course/restricted-courses.cy.ts
@@ -16,11 +16,11 @@ describe("unwhitelisted courses", () => {
     cy.get(".course-card").should("not.exist");
 
     // view courses
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.contains(".page-title", /which course/i).should("be.visible");
 
     // at course menu, should not see any courses
-    cy.contains(".csm-btn", /cs61a/i).should("not.exist");
+    cy.contains(".primary-btn", /cs61a/i).should("not.exist");
 
     // try to directly go to course page
     cy.visit("/courses/1/sections");
@@ -43,11 +43,11 @@ describe("unwhitelisted courses", () => {
     cy.get(".course-card").should("not.exist");
 
     // view courses
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.contains(".page-title", /which course/i).should("be.visible");
 
     // cs70 is unrestricted, should be visible
-    cy.contains(".csm-btn", /cs70/i).should("be.visible").click();
+    cy.contains(".primary-btn", /cs70/i).should("be.visible").click();
 
     // should be able to view cs70 sections
     cy.location("pathname").should("eq", "/courses/2");
@@ -56,7 +56,7 @@ describe("unwhitelisted courses", () => {
     // now try enroll in the section
     cy.contains(".section-card .section-card-footer", /enroll/i).click();
     cy.contains(".modal-contents", /successfully enrolled/i).should("be.visible");
-    cy.contains(".modal-contents .modal-btn", /ok/i).click();
+    cy.contains(".modal-contents .primary-btn", /ok/i).click();
 
     cy.location("pathname").should("eq", "/");
 
@@ -81,37 +81,37 @@ describe("whitelisted courses", () => {
     cy.get(".course-card").should("not.exist");
 
     // view courses
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.wait("@get-userinfo");
     cy.contains(".page-title", /which course/i).should("be.visible");
 
     // should have two buttons at the top
-    cy.contains(".course-menu-sidebar-tab.active", /restricted/i).should("be.visible");
-    cy.contains(".course-menu-sidebar-tab:not(.active)", /unrestricted/i).should("be.visible");
+    cy.contains(".tab.active", /restricted/i).should("be.visible");
+    cy.contains(".tab:not(.active)", /unrestricted/i).should("be.visible");
 
     // should show cs61a
-    cy.contains(".csm-btn", /cs61a/i).should("be.visible");
+    cy.contains(".primary-btn", /cs61a/i).should("be.visible");
 
     // view unrestricted courses; should show nothing
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+    cy.contains(".tab", /unrestricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
-    cy.contains(".csm-btn", /cs61a/i).should("not.exist");
+    cy.contains(".tab", /unrestricted/i).should("have.class", "active");
+    cy.contains(".primary-btn", /cs61a/i).should("not.exist");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+    cy.contains(".tab", /restricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
+    cy.contains(".tab", /restricted/i).should("have.class", "active");
 
-    cy.contains(".csm-btn", /cs61a/i).click();
+    cy.contains(".primary-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
 
     // now try to enroll
     cy.contains(".section-card .section-card-footer", /enroll/i).click();
     cy.contains(".modal-contents", /successfully enrolled/i).should("be.visible");
-    cy.contains(".modal-contents .modal-btn", /ok/i).click();
+    cy.contains(".modal-contents .primary-btn", /ok/i).click();
 
     cy.location("pathname").should("eq", "/");
 
@@ -135,38 +135,38 @@ describe("whitelisted courses", () => {
     cy.get(".course-card").should("not.exist");
 
     // view courses
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.wait("@get-userinfo");
     cy.contains(".page-title", /which course/i).should("be.visible");
 
     // should have two buttons at the top
-    cy.contains(".course-menu-sidebar-tab.active", /restricted/i).should("be.visible");
-    cy.contains(".course-menu-sidebar-tab:not(.active)", /unrestricted/i).should("be.visible");
+    cy.contains(".tab.active", /restricted/i).should("be.visible");
+    cy.contains(".tab:not(.active)", /unrestricted/i).should("be.visible");
 
     // should show cs61a, but not cs70
-    cy.contains(".csm-btn", /cs61a/i).should("be.visible");
-    cy.contains(".csm-btn", /cs70/i).should("not.exist");
+    cy.contains(".primary-btn", /cs61a/i).should("be.visible");
+    cy.contains(".primary-btn", /cs70/i).should("not.exist");
 
     // view unrestricted courses; should show cs70, but not cs61a
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+    cy.contains(".tab", /unrestricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
-    cy.contains(".csm-btn", /cs61a/i).should("not.exist");
-    cy.contains(".csm-btn", /cs70/i).should("be.visible");
+    cy.contains(".tab", /unrestricted/i).should("have.class", "active");
+    cy.contains(".primary-btn", /cs61a/i).should("not.exist");
+    cy.contains(".primary-btn", /cs70/i).should("be.visible");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+    cy.contains(".tab", /restricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
-    cy.contains(".csm-btn", /cs61a/i).click();
+    cy.contains(".tab", /restricted/i).should("have.class", "active");
+    cy.contains(".primary-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
 
     // now try to enroll
     cy.contains(".section-card .section-card-footer", /enroll/i).click();
     cy.contains(".modal-contents", /successfully enrolled/i).should("be.visible");
-    cy.contains(".modal-contents .modal-btn", /ok/i).click();
+    cy.contains(".modal-contents .primary-btn", /ok/i).click();
 
     cy.location("pathname").should("eq", "/");
 
@@ -177,18 +177,18 @@ describe("whitelisted courses", () => {
 
     // should also be able to enroll in cs70 sections
 
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.contains(".page-title", /which course/i).should("be.visible");
     // go to unrestricted
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).click();
+    cy.contains(".tab", /unrestricted/i).click();
     // go to c70 sections
-    cy.contains(".csm-btn", /cs70/i).click();
+    cy.contains(".primary-btn", /cs70/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
 
     // now try to enroll
     cy.contains(".section-card .section-card-footer", /enroll/i).click();
     cy.contains(".modal-contents", /successfully enrolled/i).should("be.visible");
-    cy.contains(".modal-contents .modal-btn", /ok/i).click();
+    cy.contains(".modal-contents .primary-btn", /ok/i).click();
 
     cy.location("pathname").should("eq", "/");
 
@@ -220,35 +220,35 @@ describe("whitelisted courses", () => {
     cy.get(".course-card").should("not.exist");
 
     // view courses
-    cy.contains(".csm-btn", /add course/i).click();
+    cy.contains(".primary-btn", /add course/i).click();
     cy.contains(".page-title", /which course/i).should("be.visible");
 
     // should have two buttons at the top
-    cy.contains(".course-menu-sidebar-tab.active", /restricted/i).should("be.visible");
-    cy.contains(".course-menu-sidebar-tab:not(.active)", /unrestricted/i).should("be.visible");
+    cy.contains(".tab.active", /restricted/i).should("be.visible");
+    cy.contains(".tab:not(.active)", /unrestricted/i).should("be.visible");
 
     // should show cs61a, but not cs70
-    cy.contains(".csm-btn", /cs61a/i).should("be.visible");
-    cy.contains(".csm-btn", /cs70/i).should("not.exist");
+    cy.contains(".primary-btn", /cs61a/i).should("be.visible");
+    cy.contains(".primary-btn", /cs70/i).should("not.exist");
     // should show enrollment time for cs61a
     cy.contains(".enrollment-container .enrollment-course", /cs61a/i).should("be.visible");
 
     // view unrestricted courses; should show cs70, but not cs61a
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).clickUntil($el => {
+    cy.contains(".tab", /unrestricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /unrestricted/i).should("have.class", "active");
-    cy.contains(".csm-btn", /cs61a/i).should("not.exist");
-    cy.contains(".csm-btn", /cs70/i).should("be.visible");
+    cy.contains(".tab", /unrestricted/i).should("have.class", "active");
+    cy.contains(".primary-btn", /cs61a/i).should("not.exist");
+    cy.contains(".primary-btn", /cs70/i).should("be.visible");
     // should not show any enrollment times
     cy.get(".enrollment-container").should("not.exist");
 
     // go to cs61a sections
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).clickUntil($el => {
+    cy.contains(".tab", /restricted/i).clickUntil($el => {
       expect($el).to.have.class("active");
     });
-    cy.contains(".course-menu-sidebar-tab", /restricted/i).should("have.class", "active");
-    cy.contains(".csm-btn", /cs61a/i).click();
+    cy.contains(".tab", /restricted/i).should("have.class", "active");
+    cy.contains(".primary-btn", /cs61a/i).click();
     cy.get(".section-card").should("have.length", 1).should("be.visible");
 
     // should display enrollment date
@@ -262,24 +262,10 @@ describe("whitelisted courses", () => {
     cy.get(".section-card")
       .contains(/enroll/i)
       .within($enroll => {
-        // pointer events should be disabled
-        cy.wrap($enroll).should("have.css", "pointer-events", "none");
-
-        // force a click on enroll button anyways
-        // ignore waiting to be actionable
-        cy.wrap($enroll).click({ force: true });
+        // button should be disabled
+        cy.wrap($enroll).should("be.disabled");
       });
 
-    // should open modal saying enrollment failed
-    cy.get(".modal-contents")
-      .should("be.visible")
-      .invoke("text")
-      .should("match", /enrollment failed/i);
-
-    // dismiss modal
-    cy.contains(".modal-contents .modal-btn", /ok/i).click();
-    cy.get(".modal-contents").should("not.exist");
-
     // go back to home page
     cy.visit("/");