All files / components/Areas SingleAreaDropdown.js

100% Statements 17/17
100% Branches 9/9
100% Functions 5/5
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80            3x               50x   50x         50x 10x 10x 10x 10x 2x         50x   1659x             50x 669x     50x                   709x     709x         709x                                  
import { useState } from "react";
import { Form } from "react-bootstrap";
 
// showAll is defaulted to false, to ensure the "ALL" option
// doesn't showdown to pre-existing dropdowns
 
const SingleAreaDropdown = ({
  areas,
  setArea,
  controlId,
  onChange = null,
  label = "General Education Area",
  showAll = false,
}) => {
  const localSearchArea = localStorage.getItem(controlId);
 
  const [areaState, setAreaState] = useState(
    // Stryker disable next-line all : not sure how to test/mock local storage
    localSearchArea || "A",
  );
 
  const handleAreatoChange = (event) => {
    localStorage.setItem(controlId, event.target.value);
    setAreaState(event.target.value);
    setArea(event.target.value);
    if (onChange != null) {
      onChange(event);
    }
  };
 
  // Remove duplicates from the areas array
  const uniqueAreas = Array.from(
    new Map(
      areas.map((item) => [
        `${item.requirementCode}-${item.collegeCode}`,
        item,
      ]),
    ).values(),
  );
 
  uniqueAreas.sort((a, b) =>
    a.requirementCode.localeCompare(b.requirementCode),
  );
 
  return (
    <Form.Group controlId={controlId}>
      <Form.Label>{label}</Form.Label>
      <Form.Control as="select" value={areaState} onChange={handleAreatoChange}>
        {showAll && (
          <option data-testid={`${controlId}-option-all`} value="ALL">
            ALL
          </option>
        )}
        {uniqueAreas.map((object) => {
          const key = `${controlId}-option-${object.requirementCode}-${object.collegeCode}`;
 
          // Remove "-L&S" or "-Engr" from requirementTranslation if they exist
          const cleanedTranslation = object.requirementTranslation.replace(
            / - L&S| - Engr/gi,
            "",
          );
 
          return (
            <option
              key={key}
              data-testid={key}
              value={`${object.requirementCode}-${object.collegeCode}`}
            >
              {object.requirementCode} - {cleanedTranslation} (
              {object.collegeCode})
            </option>
          );
        })}
      </Form.Control>
    </Form.Group>
  );
};
 
export default SingleAreaDropdown;