Merge pull request #185 from scientist-softserv/255-e2e-pages-home

add data-cy for webstore home page test

Author: DiemBTran

src/components/SearchBar/SearchBar.jsx

@@ -14,7 +14,7 @@ const SearchBar = ({ addClass, initialValue, onSubmit, placeholder }) => {
 
   return (
     <div className={`search-bar-container ${addClass}`}>
-      <form className='search-bar-form' method='get' onSubmit={handleSubmit}>
+      <form className='search-bar-form' method='get' onSubmit={handleSubmit} data-cy='search-bar'>
         <label>
           <span className='visually-hidden'>Search all services</span>
         </label>

src/compounds/ItemGroup/ItemGroup.jsx

@@ -9,7 +9,7 @@ import './item-group.scss'
 const ItemGroup = ({ buttonProps, items, isLoading, orientation, withButtonLink, withTitleLink }) => (
   <>
     <Title addClass='mb-2' size='large' title='Featured Services' />
-    <Row xs={1} sm={2} className={`g-5 mb-5 ${orientation === 'vertical' && 'row-cols-md-3'}`}>
+    <Row xs={1} sm={2} className={`g-5 mb-5 ${orientation === 'vertical' && 'row-cols-md-3'}`} data-cy='item-group'>
       {isLoading
         ? (
           <>

src/compounds/TitledTextBox/TitledTextBox.jsx

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 import { TextBox, Title } from '../../components'
 import './titled-text-box.css'
 
-const TitledTextBox = ({ text, textAlignment, textSize, textStyle, title, titleAlignment, titleSize, titleStyle }) => (
-  <section className='titled-text-box'>
+const TitledTextBox = ({ dataCy, text, textAlignment, textSize, textStyle, title, titleAlignment, titleSize, titleStyle }) => (
+  <section className='titled-text-box' data-cy={dataCy}>
     <Title addClass='mb-2' alignment={titleAlignment} size={titleSize} style={titleStyle} title={title} />
     <TextBox alignment={textAlignment} size={textSize} style={textStyle} text={text} />
   </section>
 )
 
 TitledTextBox.propTypes = {
+  dataCy: PropTypes.string,
   text: PropTypes.string.isRequired,
   textAlignment: PropTypes.oneOf(['left', 'center', 'right']),
   textSize: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -22,6 +23,7 @@ TitledTextBox.propTypes = {
 }
 
 TitledTextBox.defaultProps = {
+  dataCy: '',
   textAlignment: 'left',
   textSize: 'medium',
   textStyle: {},