chore: add precommit hook and update linted files

.husky/pre-push

@@ -1,2 +1,10 @@
 #!/bin/sh
-# yarn test
+[ -n "$CI" ] && exit 0
+
+echo "Running build and tests..."
+yarn test && yarn build
+
+if [ $? -ne 0 ]; then
+  echo "Build or tests failed. Please fix errors before pushing."
+  exit 1
+fi

packages/app-degree-pages/src/components/DetailPage/components/AtAGlance/index.jsx

@@ -46,9 +46,7 @@ export const AtAGlance = ({
         {timeCommitment && (
           <GlanceItem item={timeCommitment} type="timeCommitment" />
         )}
-        {stemOptText && (
-          <GlanceItem item={stemOptText} type="stemOptText" />
-        )}
+        {stemOptText && <GlanceItem item={stemOptText} type="stemOptText" />}
       </ul>
     </section>
   );

packages/app-degree-pages/src/components/DetailPage/index.jsx

@@ -231,10 +231,7 @@ const DetailPage = ({
                       mathIntensity={
                         atAGlance?.mathIntensity || resolver.getMathIntensity()
                       }
-                      stemOptText={
-                        resolver.hasStemOptText()
-                      }
-
+                      stemOptText={resolver.hasStemOptText()}
                     />
                   )}
                   {!introContent?.hideRequiredCourses &&

packages/app-degree-pages/src/core/constants/component-constants.js

@@ -22,7 +22,7 @@ const glanceItemsMap = {
   },
   mathIntensity: { icon: "calculator", title: "Math intensity" },
   timeCommitment: { icon: "calendar-alt", title: "Time commitment" },
-  stemOptText: {icon: "star", title: "STEM-OPT extension eligible"}
+  stemOptText: { icon: "star", title: "STEM-OPT extension eligible" },
 };
 
 const GRID_VIEW_ID = "grid-view";

packages/app-rfi/src/components/steps/questions/Campus.js

@@ -9,7 +9,7 @@ import { RfiSelect } from "../../controls";
  * @param {{ gaData: import("../../../../../../shared/services/googleAnalytics").GAEventObject}} props
  */
 // eslint-disable-next-line react/prop-types
-export const Campus = ({ gaData, autoFocus}) => {
+export const Campus = ({ gaData, autoFocus }) => {
   const label = "Which applies to you?";
   const name = "Campus";
 

packages/app-rfi/src/components/steps/questions/Country.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 
 import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
+import { PII_VALUE } from "../../../core/utils/constants";
 import { fetchCountries } from "../../../core/utils/fetchCountries";
 import { useRfiContext } from "../../../core/utils/rfiContext";
 import { RfiSelect } from "../../controls";
-import { PII_VALUE } from "../../../core/utils/constants";
 
 // Options
 function getCountryOptions(resultsArrayOfObjects) {

packages/app-rfi/src/components/steps/questions/EmailAddress.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
-import { RfiEmailInput } from "../../controls";
 import { PII_VALUE } from "../../../core/utils/constants";
+import { RfiEmailInput } from "../../controls";
 
 /**
  * @param {{ gaData: import("../../../../../../shared/services/googleAnalytics").GAEventObject}} props

packages/app-rfi/src/components/steps/questions/FirstName.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
-import { RfiTextInput } from "../../controls";
 import { PII_VALUE } from "../../../core/utils/constants";
+import { RfiTextInput } from "../../controls";
 
 /**
  * @param {{ gaData: import("../../../../../../shared/services/googleAnalytics").GAEventObject}} props

packages/app-rfi/src/components/steps/questions/LastName.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
-import { RfiTextInput } from "../../controls";
 import { PII_VALUE } from "../../../core/utils/constants";
+import { RfiTextInput } from "../../controls";
 
 /**
  * @param {{ gaData: import("../../../../../../shared/services/googleAnalytics").GAEventObject}} props

packages/app-rfi/src/components/steps/questions/Phone.js

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { gaEventPropTypes, trackGAEvent } from "../../../../../../shared";
-import { RfiPhone } from "../../controls";
 import { PII_VALUE } from "../../../core/utils/constants";
+import { RfiPhone } from "../../controls";
 
 /**
  * @param {{ gaData: import("../../../../../../shared/services/googleAnalytics").GAEventObject}} props

packages/app-webdir-ui/src/ProfileCard/index.js

@@ -96,7 +96,7 @@ const ProfileCard = ({ ...props }) => {
           <ul className="person-contact-info">
             {props.email && (
               <li>
-                <span className="fas fa-envelope"/>
+                <span className="fas fa-envelope" />
                 <a
                   onClick={() => sendEvent(props.email)}
                   href={`mailto:${props.email.toLowerCase()}`}
@@ -108,7 +108,7 @@ const ProfileCard = ({ ...props }) => {
             )}
             {formattedTelephone && (
               <li>
-                <span className="fas fa-phone"/>
+                <span className="fas fa-phone" />
                 <a
                   onClick={() => sendEvent(formattedTelephone)}
                   href={`tel:${formattedTelephone}`}

packages/app-webdir-ui/src/WebDirectoryComponent/index.styles.js

@@ -14,7 +14,7 @@ const WebDirLayout = styled.div`
   .uds-grid > .row {
     gap: 1rem;
     & > div {
-    flex: 0 0 282px;
+      flex: 0 0 282px;
     }
   }
 
@@ -47,7 +47,7 @@ const FacultyRankLayout = styled.div`
   .uds-grid > .row {
     gap: 1rem;
     & > div {
-    flex: 0 0 282px;
+      flex: 0 0 282px;
     }
   }
   .view-toggle {

packages/app-webdir-ui/src/grid/grid.js

@@ -58,9 +58,7 @@ const Grid = ({
 
   return (
     <div className={`uds-grid ${className || ""}`}>
-      <div className={`row ${rowClassName || ""}`}>
-        {renderContent()}
-      </div>
+      <div className={`row ${rowClassName || ""}`}>{renderContent()}</div>
     </div>
   );
 };

packages/component-header-footer/src/footer/index.styles.js

@@ -29,7 +29,8 @@ const StyledFooter = styled.footer`
       sans-serif;
     line-height: 1.5rem;
 
-    a:focus, button:focus {
+    a:focus,
+    button:focus {
       outline: none;
       box-shadow: 0 0 0 2px var(--color-base-white), 0 0 0 4px var(--color-base-grey-7) !important;
       -webkit-tap-highlight-color: transparent;

packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/Buttons.test.js

@@ -2,7 +2,11 @@
 // @ts-check
 import { render, fireEvent, cleanup } from "@testing-library/react";
 import React from "react";
+
+import { NavbarContainer, BUTTON_ERROR_MESSAGE } from ".";
+
 import { trackGAEvent } from "../../../../../../../shared";
+import { AppContextProvider } from "../../../core/context/app-context";
 
 jest.mock("../../../../../../../shared", () => ({
   idGenerator: jest.fn().mockImplementation(function* () {
@@ -11,9 +15,6 @@ jest.mock("../../../../../../../shared", () => ({
   trackGAEvent: jest.fn(),
 }));
 
-import { NavbarContainer, BUTTON_ERROR_MESSAGE } from ".";
-import { AppContextProvider } from "../../../core/context/app-context";
-
 const stateWithButtons = {
   navTree: [
     {
@@ -66,12 +67,12 @@ const stateWithButtons = {
   buttons: [
     { text: "Login", href: "/login" },
     { text: "Sign Up", onClick: jest.fn() },
-    { text: "Contact", onClick: jest.fn(), href: "#" }
+    { text: "Contact", onClick: jest.fn(), href: "#" },
   ],
-  breakpoint: "lg"
+  breakpoint: "lg",
 };
 
-const renderNavbarContainer = (props) => {
+const renderNavbarContainer = props => {
   return render(
     <AppContextProvider initialValue={props}>
       <NavbarContainer />
@@ -133,7 +134,9 @@ describe("#NavbarContainer Button Tests", () => {
   it("should log an error for buttons with both onClick and href", () => {
     cleanup();
 
-    const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    const consoleErrorSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
 
     renderNavbarContainer(stateWithButtons);
 
@@ -145,13 +148,14 @@ describe("#NavbarContainer Button Tests", () => {
   it("should not render buttons section when no buttons exist in context", () => {
     const stateWithoutButtons = {
       ...stateWithButtons,
-      buttons: []
+      buttons: [],
     };
 
     cleanup();
     const noButtonsComponent = renderNavbarContainer(stateWithoutButtons);
 
-    const buttonsContainer = noButtonsComponent.queryByTestId("buttons-container");
+    const buttonsContainer =
+      noButtonsComponent.queryByTestId("buttons-container");
     expect(buttonsContainer).not.toBeInTheDocument();
   });
 });

packages/component-header/src/components/HeaderMain/NavbarContainer/DropdownItem/index.js

@@ -213,13 +213,13 @@ DropdownItem.propTypes = {
   dropdownName: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      selected: PropTypes.bool,
-      onClick: PropTypes.func,
-      href: PropTypes.string,
-    })
-  )
+      PropTypes.shape({
+        text: PropTypes.string,
+        selected: PropTypes.bool,
+        onClick: PropTypes.func,
+        href: PropTypes.string,
+      })
+    )
   ),
   buttons: PropTypes.arrayOf(PropTypes.shape(ButtonPropTypes)),
   classes: PropTypes.string,

packages/component-header/src/components/HeaderMain/NavbarContainer/index.test.js

@@ -91,12 +91,15 @@ describe("#Navbar Container Component with onClick and no href", () => {
       navTree: testNavTreeWithOnClickEventAndNoHref.map(item => ({
         ...item,
         onClick: item.items?.length ? undefined : () => onClick(),
-        items: item.items?.map(subMenu =>
-          subMenu.map(subItem => ({
-            ...subItem,
-            onClick: subItem.onClick ? () => subMenuOnClick() : () => undefined,
-          }))
-        ) || undefined,
+        items:
+          item.items?.map(subMenu =>
+            subMenu.map(subItem => ({
+              ...subItem,
+              onClick: subItem.onClick
+                ? () => subMenuOnClick()
+                : () => undefined,
+            }))
+          ) || undefined,
       })),
     });
     navItems = component.queryAllByTestId("nav-item");

packages/components-core/src/components/Button/index.test.js

@@ -40,7 +40,7 @@ describe("#Button", () => {
 
   it("should call onClick", () => {
     fireEvent.click(element);
-    expect(buttonOnClick).toBeCalledTimes(1);
+    expect(buttonOnClick).toHaveBeenCalledTimes(1);
   });
 });
 

packages/components-core/src/components/ButtonIconOnly/index.test.js

@@ -35,6 +35,6 @@ describe("#Button Icon", () => {
 
   it("should call onClick", () => {
     fireEvent.click(element);
-    expect(buttonOnClick).toBeCalledTimes(1);
+    expect(buttonOnClick).toHaveBeenCalledTimes(1);
   });
 });

packages/components-core/src/components/ButtonTag/index.test.js

@@ -42,7 +42,7 @@ describe("#Tag Button", () => {
 
   it("should call onClick", () => {
     fireEvent.click(element);
-    expect(buttonOnClick).toBeCalledTimes(1);
+    expect(buttonOnClick).toHaveBeenCalledTimes(1);
   });
 });
 

packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx

@@ -19,8 +19,8 @@ import {
 } from "../../../../../shared";
 import { Button } from "../Button/Button";
 import { GaEventWrapper } from "../GaEventWrapper/GaEventWrapper";
-import { AnchorMenuWrapper } from "./AnchorMenu.styles";
 import { useBaseSpecificFramework } from "../GaEventWrapper/useBaseSpecificFramework";
+import { AnchorMenuWrapper } from "./AnchorMenu.styles";
 
 const menuTitle = "On This Page";
 
@@ -44,7 +44,6 @@ export const AnchorMenu = ({
   firstElementId,
   focusFirstFocusableElement = false,
 }) => {
-
   const { isReact, isBootstrap } = useBaseSpecificFramework();
 
   const anchorMenuRef = useRef(null);

packages/unity-react-core/src/components/Pagination/Pagination.jsx

@@ -61,7 +61,6 @@ export const Pagination = ({
   };
 
   const renderPages = () => {
-
     if (totalPages < 5) {
       return (
         <>
@@ -119,7 +118,7 @@ export const Pagination = ({
             1
           </PageItem>
         )}
-        {selectedPage > (totalPages - displayMinimumPages ) && (
+        {selectedPage > totalPages - displayMinimumPages && (
           <PageItem
             isClickeable
             ariaLabel={`Page 2 of ${totalPages}`}
@@ -144,10 +143,10 @@ export const Pagination = ({
         {renderedPages[renderedPages.length - 1] < totalPages - 1 && (
           <PageItem ellipses>...</PageItem>
         )}
-        {selectedPage < displayMinimumPages + 1  && (
+        {selectedPage < displayMinimumPages + 1 && (
           <PageItem
             isClickeable
-            ariaLabel={`Page ${totalPages-1} of ${totalPages}`}
+            ariaLabel={`Page ${totalPages - 1} of ${totalPages}`}
             selectedPage={selectedPage === totalPages - 1}
             onClick={e => handleChangePage(e, totalPages - 1)}
           >

packages/unity-react-core/src/components/TabbedPanels/components/NavControls.jsx

@@ -2,8 +2,8 @@ import PropTypes from "prop-types";
 import React from "react";
 
 import { GaEventWrapper } from "../../GaEventWrapper/GaEventWrapper";
-import { NavControlButtons } from "./NavControls.styles";
 import { useBaseSpecificFramework } from "../../GaEventWrapper/useBaseSpecificFramework";
+import { NavControlButtons } from "./NavControls.styles";
 
 /**
  * @typedef {Object} NavControlsProps