Fix jest tests

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,16 @@
+/**
+ * Transform files to their path name.
+ */
+
+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
     });
 

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

@@ -5,12 +5,10 @@ exports[`StudentDropper should close modal correctly 1`] = `
   <span
     class="student-dropper "
   >
-    <span
-      class="inline-plus-sign"
+    <x-svg
+      classname="icon inline-plus-sign"
       title="Drop student from section"
-    >
-      ×
-    </span>
+    />
   </span>
 </DocumentFragment>
 `;
@@ -20,12 +18,10 @@ exports[`StudentDropper should render correctly without interaction 1`] = `
   <span
     class="student-dropper "
   >
-    <span
-      class="inline-plus-sign"
+    <x-svg
+      classname="icon inline-plus-sign"
       title="Drop student from section"
-    >
-      ×
-    </span>
+    />
   </span>
 </DocumentFragment>
 `;
@@ -35,71 +31,72 @@ exports[`StudentDropper should render modal correctly after clicking x 1`] = `
   <span
     class="student-dropper ban-prompt-visible"
   >
-    <span
-      class="inline-plus-sign"
+    <x-svg
+      classname="icon inline-plus-sign"
       title="Drop student from section"
-    >
-      ×
-    </span>
+    />
     <div
       class="_mock-modal"
     >
       <button>
         Close
       </button>
-      <div
-        class="studentDropper"
-      >
-        <div
-          class="studentDropperHeadItem"
+      <div>
+        <h2
+          class="student-dropper-head-item"
         >
           DROP Student
-        </div>
-        <div>
+        </h2>
+        <div
+          class="student-dropper-checkbox-container"
+        >
           <input
             id="drop"
             name="drop"
             type="checkbox"
           />
           <label
-            class="studentDropperCheckboxLabel"
+            class="student-dropper-checkbox-label"
             for="drop"
           >
             I would like to DROP Test Student from this section.
           </label>
           <br />
         </div>
-        <div
-          class="studentDropperHeadItem"
+      </div>
+      <div>
+        <h2
+          class="student-dropper-head-item"
         >
           BAN Student
-        </div>
-        <div>
+        </h2>
+        <div
+          class="student-dropper-checkbox-container"
+        >
           <input
             disabled=""
             id="ban"
             name="ban"
             type="checkbox"
           />
           <label
-            class="studentDropperCheckboxLabel"
+            class="student-dropper-checkbox-label"
             for="ban"
           >
             I would like to BAN Test Student from this course.
           </label>
           <br />
         </div>
-        <div
-          class="studentDropperSubmitWrapper"
+      </div>
+      <div
+        class="student-dropper-submit-wrapper"
+      >
+        <button
+          class="danger-btn"
+          disabled=""
         >
-          <button
-            class="studentDropperSubmit"
-            disabled=""
-            id="dropper submit button"
-          >
-            Submit
-          </button>
-        </div>
+          Submit
+        </button>
       </div>
     </div>
   </span>

jest.config.js → jest.config.ts

@@ -3,7 +3,8 @@
  * https://jestjs.io/docs/configuration
  */
 
-module.exports = {
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
   // All imported modules in your tests should be mocked automatically
   // automock: false,
 
@@ -26,10 +27,7 @@ module.exports = {
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: [
-    "/node_modules/",
-    "/utils/api.tsx",
-  ],
+  coveragePathIgnorePatterns: ["/node_modules/", "/utils/api.tsx"],
 
   // Indicates which provider should be used to instrument code for coverage
   // coverageProvider: "babel",
@@ -96,7 +94,9 @@ module.exports = {
   // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    "\\.(s[ac]ss|css)$": "<rootDir>/csm_web/frontend/src/tests/__mocks__/styleMock.ts"
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],
@@ -108,7 +108,7 @@ module.exports = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  // preset: undefined,
+  preset: "ts-jest",
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -181,7 +181,12 @@ module.exports = {
   // testRunner: "jest-circus/runner",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  transform: {
+    "\\.([jt]sx?)$": "ts-jest",
+    // map these extensions to just their path names
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/csm_web/frontend/src/tests/__transformers__/pathTransformer.ts"
+  }
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [