Merge branch 'filter_modal' of github.com:khushiagl/Markus into filte…

…r_modal
MarkUsProject · Jul 24, 2023 · aac7885 · aac7885
2 parents a48f44d + 5c15b99
commit aac7885
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/app/assets/javascripts/Components/Modals/filter_modal.jsx b/app/assets/javascripts/Components/Modals/filter_modal.jsx
@@ -219,6 +219,7 @@ export class FilterModal extends React.Component {
                       onChange={() => {
                         this.props.mutateFilterData({...this.props.filterData, ascending: true});
                       }}
+                      id={"Asc"}
                       data-testid={"ascending"}
                     />
                     <label htmlFor="Asc">{I18n.t("results.filters.ordering.ascending")}</label>
@@ -229,6 +230,7 @@ export class FilterModal extends React.Component {
                       onChange={() => {
                         this.props.mutateFilterData({...this.props.filterData, ascending: false});
                       }}
+                      id={"Desc"}
                       data-testid={"descending"}
                     />
                     <label htmlFor="Desc">{I18n.t("results.filters.ordering.descending")}</label>
@@ -276,7 +278,7 @@ export class FilterModal extends React.Component {
               </div>
               <div className={"modal-container"}>
                 {this.renderTasDropdown()}
-                <label className={"annotation-input"}>
+                <div className={"annotation-input"}>
                   <p>{I18n.t("activerecord.models.annotation.one")}</p>
                   <input
                     type={"text"}
@@ -289,7 +291,7 @@ export class FilterModal extends React.Component {
                     }
                     placeholder={I18n.t("results.filters.text_box_placeholder")}
                   />
-                </label>
+                </div>
               </div>
 
               <div className={"modal-container"}>

diff --git a/app/assets/javascripts/Components/__tests__/filter_modal.test.jsx b/app/assets/javascripts/Components/__tests__/filter_modal.test.jsx
@@ -13,7 +13,7 @@ describe("FilterModal", () => {
   let props;
   let component;
 
-  let sharedExamplesTaAndInstructor = can_manage => {
+  let sharedExamplesTaAndInstructor = role => {
     beforeEach(() => {
       props = {
         filterData: {
@@ -36,12 +36,17 @@ describe("FilterModal", () => {
         available_tags: [{name: "a"}, {name: "b"}],
         current_tags: [{name: "c"}, {name: "d"}],
         sections: ["LEC0101", "LEC0202"],
-        tas: ["a", "b", "c", "d"],
+        tas: [
+          ["a", "A"],
+          ["b", "B"],
+          ["c", "C"],
+          ["d", "D"],
+        ],
         isOpen: true,
         onRequestClose: jest.fn().mockImplementation(() => (props.isOpen = false)),
         mutateFilterData: jest.fn().mockImplementation(() => null),
         clearAllFilters: jest.fn().mockImplementation(() => null),
-        can_manage_assessments: can_manage,
+        role: role,
       };
 
       // Set the app element for React Modal
@@ -252,7 +257,7 @@ describe("FilterModal", () => {
             let dropdownDiv = screen.getByTestId("order-by");
             fireEvent.click(within(dropdownDiv).getByTestId("dropdown"));
             const options = within(dropdownDiv).getByTestId("options");
-            expect(within(options).getByText("Group Name")).toBeInTheDocument();
+            expect(within(options).getByText("Group name")).toBeInTheDocument();
             expect(within(options).getByText("Submission Date")).toBeInTheDocument();
           });
         });
@@ -288,8 +293,8 @@ describe("FilterModal", () => {
     });
   };
 
-  describe("An Instructor or Grader with permissions to manage assessments", () => {
-    sharedExamplesTaAndInstructor(true);
+  describe("An Instructor", () => {
+    sharedExamplesTaAndInstructor("Instructor");
 
     describe("Filter by Tas", () => {
       const test_id = "Tas";
@@ -310,7 +315,7 @@ describe("FilterModal", () => {
       it("should select option when clicked on an option", () => {
         const dropdown = screen.getByTestId(test_id);
         fireEvent.click(dropdown);
-        const option = within(dropdown).getByLabelText("d");
+        const option = within(dropdown).getByLabelText("d - D");
         fireEvent.click(option);
 
         expect(props.mutateFilterData).toHaveBeenCalled();
@@ -327,16 +332,16 @@ describe("FilterModal", () => {
       it("should deselect option when clicked on a selected option", () => {
         const dropdown = screen.getByTestId(test_id);
         fireEvent.click(dropdown);
-        const selected_option = within(dropdown).getByLabelText("a");
+        const selected_option = within(dropdown).getByLabelText("a - A");
         fireEvent.click(selected_option);
 
         expect(props.mutateFilterData).toHaveBeenCalled();
       });
     });
   });
 
-  describe("A Ta without permission to manage assessments", () => {
-    sharedExamplesTaAndInstructor(false);
+  describe("A Ta", () => {
+    sharedExamplesTaAndInstructor("Ta");
 
     describe("Filter by Tas", () => {
       it("should not render filter by tas", () => {

diff --git a/app/assets/javascripts/Components/__tests__/multi_select_dropdown.test.jsx b/app/assets/javascripts/Components/__tests__/multi_select_dropdown.test.jsx
@@ -15,7 +15,12 @@ jest.mock("@fortawesome/react-fontawesome", () => ({
 describe("MultiSelectDropdown", () => {
   let props = {
     id: "Test",
-    options: ["a", "b", "c", "d"],
+    options: [
+      {key: "a", display: "a"},
+      {key: "b", display: "b"},
+      {key: "c", display: "c"},
+      {key: "d", display: "d"},
+    ],
     selected: ["a"],
     onToggleOption: jest.fn().mockImplementation(() => null),
     onClearSelection: jest.fn().mockImplementation(() => null),

diff --git a/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js b/app/assets/javascripts/DropDownMenu/MultiSelectDropDown.js
@@ -46,8 +46,13 @@ export class MultiSelectDropdown extends React.Component {
               isSelected = selected.includes(option.key);
               return (
                 <li key={option.key} onClick={e => this.onSelect(e, option.key)}>
-                  <input type="checkbox" checked={isSelected} onChange={() => null}></input>
-                  <label htmlFor={option.display} onClick={event => event.preventDefault()}>
+                  <input
+                    id={option.key}
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={() => null}
+                  ></input>
+                  <label htmlFor={option.key} onClick={event => event.preventDefault()}>
                     {option.display}
                   </label>
                 </li>