test: Clean up warnings. Fixes #443 (#446)

indiana-university · Aug 20, 2024 · 50d322d · 50d322d
1 parent 0832916
commit 50d322d
Show file tree

Hide file tree

Showing 16 changed files with 6,637 additions and 8,507 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -132,10 +132,10 @@
     "@babel/core": "7.19.3",
     "@babel/preset-env": "7.19.4",
     "@babel/preset-react": "7.18.6",
-    "@testing-library/dom": "8.19.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/dom": "10.3.2",
+    "@testing-library/jest-dom": "6.4.8",
+    "@testing-library/react": "16.0.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "4.0.3",

diff --git a/src/components/Accordion/Accordion.jsx b/src/components/Accordion/Accordion.jsx
@@ -11,8 +11,8 @@ import { TestUtils } from "../util/TestUtils";
 import AccordionPanel from "./AccordionPanel";
 import AccordionPanelHeader from "./AccordionPanelHeader";
 
-const createControlId = (id, index) => `accordian_${id}_control_${index}`
-const testIds = TestUtils.Accordion
+const createControlId = (id, index) => `accordian_${id}_control_${index}`;
+const testIds = TestUtils.Accordion;
 
 /**
  * Group content into sections that can be opened and closed
@@ -27,62 +27,65 @@ const Accordion = ({
   testMode = false,
   ...attrs
 }) => {
-  const numPanels = React.Children.count(children)
+  const numPanels = React.Children.count(children);
 
   const [accordianId] = useState(id);
-  const [panelsOpen, setPanelsOpen] = useState(getInitialOpen(initial, accordianId, numPanels))
+  const [panelsOpen, setPanelsOpen] = useState(
+    getInitialOpen(initial, accordianId, numPanels)
+  );
 
-  const accordianPanels = !children ? [] :  React.Children.map(children, (child, index) => {
-    const { title } = child.props
-    const controlId = createControlId(accordianId, index)
-    const onClick = () => {
-      const newPanelsOpen = panelsOpen.includes(controlId) ? panelsOpen.filter(v => v !== controlId) : [...panelsOpen, controlId]
-      setPanelsOpen(newPanelsOpen);
-    }
+  const accordianPanels = !children
+    ? []
+    : React.Children.map(children, (child, index) => {
+        const { title } = child.props;
+        const controlId = createControlId(accordianId, index);
+        const onClick = () => {
+          const newPanelsOpen = panelsOpen.includes(controlId)
+            ? panelsOpen.filter((v) => v !== controlId)
+            : [...panelsOpen, controlId];
+          setPanelsOpen(newPanelsOpen);
+        };
 
-    const extraProps = {
-      controlId
-    }
-    const isOpen = panelsOpen.includes(controlId)
-    if(!isOpen) {
-      extraProps.hidden = true
-    }
+        const extraProps = {
+          controlId,
+        };
+        const isOpen = panelsOpen.includes(controlId);
+        if (!isOpen) {
+          extraProps.hidden = true;
+        }
 
-    const panel = React.cloneElement(child, extraProps)  
+        const panel = React.cloneElement(child, extraProps);
 
-    return {
-      onClick,
-      controlId,
-      iconClosed,
-      iconOpened,
-      isOpen,
-      label: title,
-      panel,
-      testMode
-    }
-  })
+        return {
+          onClick,
+          controlId,
+          iconClosed,
+          iconOpened,
+          isOpen,
+          label: title,
+          panel,
+          testMode,
+        };
+      });
 
-  const classNameArr = [
-    "rvt-accordion",
-    className
-  ]
+  const classNameArr = ["rvt-accordion", className];
   return (
     <div
       className={classNames(classNameArr)}
       {...(testMode && { "data-testid": testIds.container })}
-      { ...attrs }
+      {...attrs}
     >
-        {accordianPanels.map((accordianPanel) => {
-          const { panel, ...otherProps } = accordianPanel
-          return (
-            <>
-              <AccordionPanelHeader {...otherProps} />
-              {panel}
-            </>
-          )
-        })}
+      {accordianPanels.map((accordianPanel, panelIndex) => {
+        const { panel, ...otherProps } = accordianPanel;
+        return (
+          <React.Fragment key={panelIndex}>
+            <AccordionPanelHeader {...otherProps} />
+            {panel}
+          </React.Fragment>
+        );
+      })}
     </div>
-  )
+  );
 };
 
 Accordion.displayName = "Accordion";
@@ -96,20 +99,20 @@ Accordion.propTypes = {
   /** Index of initially opened tab */
   initialTab: PropTypes.oneOfType([PropTypes.oneOf(["all"]), PropTypes.number]),
   /** [Developer] Adds data-testId attributes for component testing */
-  testMode: PropTypes.bool
+  testMode: PropTypes.bool,
 };
 
 Accordion.Panel = AccordionPanel;
 Accordion.Header = AccordionPanelHeader;
 
-function getInitialOpen (option, id, count) {
+function getInitialOpen(option, id, count) {
   if (!option) {
-    return []
+    return [];
   }
   if (option === "all") {
-    return range(0, count, 1).map(num => createControlId(id, num))
+    return range(0, count, 1).map((num) => createControlId(id, num));
   }
-  return [ createControlId(id, option) ]
+  return [createControlId(id, option)];
 }
 
 export default Rivet.rivetize(Accordion);
diff --git a/src/components/Input/common.jsx b/src/components/Input/common.jsx
@@ -11,9 +11,9 @@ import * as PropTypes from "prop-types";
 
 const inputClassName = (elementName, variant, grouped) => {
   const validationVariant = variant ? `rvt-validation-${variant}` : "";
-  const groupedClassName = grouped ? 'rvt-input-group__input' : "";
+  const groupedClassName = grouped ? "rvt-input-group__input" : "";
 
-  let elementClassName = ''
+  let elementClassName = "";
   switch (elementName) {
     case "input":
       elementClassName = "rvt-text-input";
@@ -37,15 +37,15 @@ const noteFragment = (id, variant, note) =>
 
 export const propTypes = {
   /** Element to group at the end of the input */
-  appendment: PropTypes.element,
+  appendment: PropTypes.node,
   /** The label for the input */
   label: PropTypes.string.isRequired,
   /** Visibility modifier for the input's label */
   labelVisibility: PropTypes.oneOf(["screen-reader-only"]),
   /** An optional note that will be displayed below the input */
   note: PropTypes.node,
   /** Element to group at the start of the input */
-  prependment: PropTypes.element,
+  prependment: PropTypes.node,
   /** Rivet style for inline validation */
   variant: PropTypes.oneOf(["success", "danger", "info", "warning"]),
 };
@@ -65,7 +65,7 @@ export const renderInput = (
   }
 ) => {
   const noteId = `${id}_note`;
-  const grouped = appendment ||  prependment;
+  const grouped = appendment || prependment;
 
   const inputProps = {
     id,
@@ -89,14 +89,17 @@ export const renderInput = (
         {label}
       </label>
       {!grouped && inputElement}
-      {
-        grouped &&
-          <div className='rvt-input-group'>
-            {prependment && <div className='rvt-input-group__prepend'>{prependment}</div>}
-            {inputElement}
-            {appendment && <div className='rvt-input-group__append'>{appendment}</div>}
-          </div>
-      }
+      {grouped && (
+        <div className="rvt-input-group">
+          {prependment && (
+            <div className="rvt-input-group__prepend">{prependment}</div>
+          )}
+          {inputElement}
+          {appendment && (
+            <div className="rvt-input-group__append">{appendment}</div>
+          )}
+        </div>
+      )}
       {note && noteFragment(noteId, variant, note)}
     </div>
   );

diff --git a/src/components/PageContent/Calendar/CalendarTile.jsx b/src/components/PageContent/Calendar/CalendarTile.jsx
@@ -8,46 +8,46 @@ import * as React from "react";
 import * as Rivet from "../../util/Rivet";
 import { TestUtils } from "../../util/TestUtils";
 
-function getMonth (month, abbr){
-  switch(month) {
+function getMonth(month, abbr) {
+  switch (month) {
     case 1:
     case "1":
-      return abbr ? "Jan" : "January"
+      return abbr ? "Jan" : "January";
     case 2:
     case "2":
-      return abbr ? "Feb" : "Febuary"
+      return abbr ? "Feb" : "Febuary";
     case 3:
     case "3":
-      return abbr ? "Mar" : "March"
+      return abbr ? "Mar" : "March";
     case 4:
     case "4":
-      return abbr ? "Apr" : "April"
+      return abbr ? "Apr" : "April";
     case 5:
     case "5":
-      return "May"
+      return "May";
     case 6:
     case "6":
-      return "June"
+      return "June";
     case 7:
     case "7":
-      return "July"
+      return "July";
     case 8:
     case "8":
-      return abbr ? "Aug" : "August"
+      return abbr ? "Aug" : "August";
     case 9:
     case "9":
-      return abbr ? "Sept" : "September"
+      return abbr ? "Sept" : "September";
     case 10:
     case "10":
-      return abbr ? "Oct" : "October"
+      return abbr ? "Oct" : "October";
     case 11:
     case "11":
-      return abbr ? "Nov" : "November"
+      return abbr ? "Nov" : "November";
     case 12:
     case "12":
-      return abbr ? "Dec" : "December"
+      return abbr ? "Dec" : "December";
     default:
-      return month
+      return month;
   }
 }
 
@@ -61,12 +61,9 @@ const CalendarTile = ({
   year,
   ...attrs
 }) => {
-  const classNameArr = [
-    "rvt-cal",
-    className
-  ]
+  const classNameArr = ["rvt-cal", className];
   return (
-    <div 
+    <div
       className={classNames(classNameArr)}
       {...(testMode && { "data-testid": TestUtils.CalendarTile.container })}
       {...attrs}
@@ -84,18 +81,16 @@ const CalendarTile = ({
         {day}
         {children}
       </span>
-      {
-        year &&
-          <span
-            className="rvt-cal__year"
-            {...(testMode && { "data-testid": TestUtils.CalendarTile.year })}
-          >
-            {year}
-          </span>
-      }
-
+      {year && (
+        <span
+          className="rvt-cal__year"
+          {...(testMode && { "data-testid": TestUtils.CalendarTile.year })}
+        >
+          {year}
+        </span>
+      )}
     </div>
-  )
+  );
 };
 
 CalendarTile.displayName = "CalendarTile";
@@ -106,11 +101,10 @@ CalendarTile.propTypes = {
   day: PropTypes.number,
   /** [Developer] Adds data-testId attributes for component testing */
   testMode: PropTypes.bool,
-  /** The number of the month */
+  /** The number of the month or a textual representation of a month */
   month: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /** The year */
-  year: PropTypes.string
+  year: PropTypes.number,
 };
 
-
 export default Rivet.rivetize(CalendarTile);