Fix tests due to style changes

Author: smartspot2

csm_web/frontend/src/components/course/SectionCard.tsx

@@ -179,12 +179,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>

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}

csm_web/frontend/src/components/section/StudentSection.tsx

@@ -258,7 +258,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 === "")
@@ -273,6 +278,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}

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,

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;
 }

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;
 }

csm_web/frontend/src/tests/__mocks__/styleMock.ts

@@ -0,0 +1,5 @@
+/**
+ * Mock with no styles.
+ */
+
+module.exports = {};

csm_web/frontend/src/tests/__snapshots__/Modal.test.tsx.snap

@@ -6,23 +6,23 @@ exports[`Modal should close correctly when an external modal closer is clicked 1
     class="modal-overlay"
   />
   <div
-    class="modal test-modal"
+    class="modal "
   >
     <div
-      class="modal-contents"
+      class="modal-close-container"
     >
-      <div
+      <button
+        aria-label="close"
         class="modal-close-x"
       >
-        <button
-          aria-label="close"
-          class="inline-plus-sign"
-        >
-          <span>
-            ×
-          </span>
-        </button>
-      </div>
+        <x-svg
+          classname="icon"
+        />
+      </button>
+    </div>
+    <div
+      class="modal-contents test-modal"
+    >
       <div>
         Hello World
       </div>
@@ -45,20 +45,20 @@ exports[`Modal should render correctly 1`] = `
     class="modal "
   >
     <div
-      class="modal-contents"
+      class="modal-close-container"
     >
-      <div
+      <button
+        aria-label="close"
         class="modal-close-x"
       >
-        <button
-          aria-label="close"
-          class="inline-plus-sign"
-        >
-          <span>
-            ×
-          </span>
-        </button>
-      </div>
+        <x-svg
+          classname="icon"
+        />
+      </button>
+    </div>
+    <div
+      class="modal-contents "
+    >
       <div>
         Hello World
       </div>
@@ -73,23 +73,23 @@ exports[`Modal should render correctly with className 1`] = `
     class="modal-overlay"
   />
   <div
-    class="modal test-modal"
+    class="modal "
   >
     <div
-      class="modal-contents"
+      class="modal-close-container"
     >
-      <div
+      <button
+        aria-label="close"
         class="modal-close-x"
       >
-        <button
-          aria-label="close"
-          class="inline-plus-sign"
-        >
-          <span>
-            ×
-          </span>
-        </button>
-      </div>
+        <x-svg
+          classname="icon"
+        />
+      </button>
+    </div>
+    <div
+      class="modal-contents test-modal"
+    >
       <div>
         Hello World
       </div>

csm_web/frontend/src/tests/__transformers__/pathTransformer.ts

@@ -0,0 +1,17 @@
+/**
+ * Transform files to their path name.
+ */
+
+/* eslint @typescript-eslint/no-var-requires: "off" */
+const path = require("path");
+
+module.exports = {
+  process(sourceText, sourcePath, options) {
+    // convert path name to lowercase, and replace the "." with "-";
+    // this circumvents errors relating to component naming
+    const base = path.basename(sourcePath).toLowerCase().replace(".", "-");
+    return {
+      code: `module.exports = ${JSON.stringify(base)};`
+    };
+  }
+};

csm_web/frontend/src/tests/section/StudentDropper.test.tsx

@@ -22,14 +22,14 @@ jest.mock("../../components/Modal", () => {
 
 describe("StudentDropper", () => {
   it("should render correctly without interaction", () => {
-    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" />, {
+    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" courseRestricted={false} />, {
       wrapper: testQueryClientWrapper
     });
     expect(component.asFragment()).toMatchSnapshot();
   });
 
   it("should render modal correctly after clicking x", () => {
-    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" />, {
+    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" courseRestricted={false} />, {
       wrapper: testQueryClientWrapper
     });
 
@@ -42,7 +42,7 @@ describe("StudentDropper", () => {
   });
 
   it("should close modal correctly", () => {
-    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" />, {
+    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" courseRestricted={false} />, {
       wrapper: testQueryClientWrapper
     });
 
@@ -72,7 +72,7 @@ describe("StudentDropper", () => {
       return null as any;
     });
 
-    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" />, {
+    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" courseRestricted={false} />, {
       wrapper: testQueryClientWrapper
     });
 
@@ -129,7 +129,7 @@ describe("StudentDropper", () => {
       return null as any;
     });
 
-    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" />, {
+    const component = render(<StudentDropper id={1} sectionId={2} name="Test Student" courseRestricted={false} />, {
       wrapper: testQueryClientWrapper
     });