From 674fd5b66db5ff209f62e4f4fb15e9ed4b9f8bfb Mon Sep 17 00:00:00 2001
From: Diem Tran <diembtran@gmail.com>
Date: Fri, 10 Mar 2023 12:30:10 -0800
Subject: [PATCH 1/2] add data-cy for webstore home page test

---
 src/components/SearchBar/SearchBar.jsx | 2 +-
 src/compounds/ItemGroup/ItemGroup.jsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index f61e02dc..57804f25 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/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>
diff --git a/src/compounds/ItemGroup/ItemGroup.jsx b/src/compounds/ItemGroup/ItemGroup.jsx
index 2ab88ce3..3f89e491 100644
--- a/src/compounds/ItemGroup/ItemGroup.jsx
+++ b/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
         ? (
           <>

From 1ed5a01d43a7197688a79885fbbe2b1dbcf15942 Mon Sep 17 00:00:00 2001
From: Diem Tran <diembtran@gmail.com>
Date: Mon, 13 Mar 2023 11:49:06 -0700
Subject: [PATCH 2/2] passing datacy for home page test

---
 src/compounds/TitledTextBox/TitledTextBox.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/compounds/TitledTextBox/TitledTextBox.jsx b/src/compounds/TitledTextBox/TitledTextBox.jsx
index 5726d31f..b1e8d013 100644
--- a/src/compounds/TitledTextBox/TitledTextBox.jsx
+++ b/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: {},