add data-cy for home page fully load test

Author: DiemBTran

cypress/e2e/home.cy.js

@@ -43,4 +43,27 @@ describe('Viewing Home page', () => {
       })
     })
   })
-  })
+
+  context('home page components are loading successfully, &', () => {
+    before(() => {
+      featuredServices = true
+      loading =
+      error = false
+    })
+    it('should show the search bar.', () => {
+      cy.get("[data-cy='search-bar']").should('exist').then(() => {
+        cy.log('Search bar renders successfully.')
+      })
+    })
+    it('should show the about text.', () => {
+      cy.get('TitledTextBox[data-cy="about-us"]').should('exist').then(() => {
+        cy.log('Abouttext renders successfully.')
+      })
+    })
+    it('should show the featured services cards.', () => {
+      cy.get("row[data-cy='item-group']").should('exist').then(() => {
+        cy.log('Status bar renders successfully.')
+      })
+    })
+  })
+})

pages/index.js

@@ -44,7 +44,7 @@ const Home = () => {
       />
       <div className='container'>
         <SearchBar onSubmit={handleOnSubmit} />
-        <TitledTextBox title={ABOUT_US_TITLE} text={ABOUT_US_TEXT} />
+        <TitledTextBox title={ABOUT_US_TITLE} text={ABOUT_US_TEXT} data-cy='about-us'/>
         {isError ? (
           <Notice
             alert={configureErrors([isError])}