OBPIH-5231 Add front-end unit tests for Wizard and Menu components (#…

…3701)

* OBPIH-5231 add tests for menu and logo

* OBPIH-5231 add tests for logo, menu and wizard

* OBPIH-5231 add testing library

* OBPIH-5231 fix menu snapshots

* OBPIH-5231 fix tests formatting

* OBPIH-5231 remove version boosting

* OBPIH-5231 fixes after review

* OBPIH-5231 fix wizard snapshot

package.json

@@ -113,6 +113,7 @@
  "@babel/eslint-parser": "7.19.1",
  "@babel/preset-env": "7.19.1",
  "@babel/preset-react": "7.18.6",
+ "@testing-library/react": "12.1.5",
  "acorn": "6.4.2",
  "babel": "6.23.0",
  "babel-eslint": "8.0.1",

src/js/components/Layout/Logo.jsx

@@ -8,7 +8,7 @@ import { Link, withRouter } from 'react-router-dom';
 const Logo = ({
  logoUrl,
 }) => (
- <div className="d-flex align-items-center logo-wrapper">
+ <div className="d-flex align-items-center logo-wrapper" data-testid="logo-wrapper">
  <div className="logo-square">
  <Link to="/openboxes">
  <img

src/js/components/Layout/menu/MenuItem.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { RiArrowDropDownLine } from 'react-icons/ri';
 
 const DropdownMenuItem = ({ section, active }) => (
- <li className={`nav-item dropdown d-none d-md-flex justify-content-center align-items-center ${active && 'active-section'}`} >
+ <li className={`nav-item dropdown d-none d-md-flex justify-content-center align-items-center ${active && 'active-section'}`} data-testid="dropdownMenuItem">
  <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
  {section.label}
  </a>
@@ -24,7 +24,7 @@ const DropdownMenuItem = ({ section, active }) => (
 const CollapseMenuItem = ({ section, active }) => {
  const id = `collapse-${section?.label?.replaceAll(' ', '-')}`;
  return (
- <li className="collapse-nav-item nav-item justify-content-center align-items-center d-flex d-md-none" >
+ <li className="collapse-nav-item nav-item justify-content-center align-items-center d-flex d-md-none" data-testid="collapseMenuItem">
  <a
  className={`nav-link d-flex justify-content-between align-items-center w-100 ${active && 'active-section'}`}
  data-toggle="collapse"

src/js/components/wizard/Wizard.jsx

@@ -84,7 +84,7 @@ class Wizard extends Component {
  } = this.props;
 
  return (
- <div className="content-wrap">
+ <div className="content-wrap" data-testid="content-wrap">
  <WizardTitle title={title} additionalTitle={additionalTitle} values={values} />
  <WizardSteps steps={stepList} currentStep={currentPage} showStepNumber={showStepNumber} />
  <div className="panel panel-primary">

src/js/components/wizard/WizardPage.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 const WizardPage = (props) => {
  const Component = props.pageList[props.currentPage - 1];
  return (
- <div className="panel-body m-4">
+ <div className="panel-body m-4" data-testid="wizardPage">
  <Component
  initialValues={props.initialValues}
  nextPage={props.nextPage}

src/js/components/wizard/WizardSteps.jsx

@@ -13,6 +13,7 @@ const WizardSteps = props => (
  <div
  key={index}
  className={`step-container ${props.currentStep === index + 1 ? 'active' : ''}`}
+ data-testid={props.currentStep === index + 1 ? 'active' : 'inactive'}
  >
  <div
  className={props.showStepNumber ? 'circle filled' : 'circle'}

src/js/components/wizard/WizardTitle.jsx

@@ -10,13 +10,13 @@ const WizardTitle = (props) => {
  }
 
  return (
- <div className="panel-heading movement-number">
+ <div className="panel-heading movement-number" data-testid="wizardTitle">
  {props.title ?
  (
  <div>
  {
  _.map(props.title, element => (
- <span style={{ color: element.color }}>
+ <span key={element.text} style={{ color: element.color }}>
  {element.text}
  <span style={{ color: 'black' }}>
  {element.delimeter}