refactor the home page specs

changed up the specs to fit the flow of the home page. also moving two
specs from the browse page to the home page since that's where the
requests originate from.

Author: alishaevn

cypress.config.js

@@ -26,6 +26,7 @@ module.exports = defineConfig({
     NEXT_PUBLIC_PROVIDER_NAME: process.env.NEXT_PUBLIC_PROVIDER_NAME,
     NEXT_PUBLIC_PROVIDER_ID: process.env.NEXT_PUBLIC_PROVIDER_ID,
     NEXT_PUBLIC_TOKEN: process.env.NEXT_PUBLIC_TOKEN,
+    CYPRESS_SEARCH_QUERY: 'test',
     // importing the `API_PER_PAGE` variable from the constants file throws
     // errors since this file doesn't follow ES6 syntax. if the value is
     // changed in constants, it needs to be updated here too

cypress/e2e/browse.cy.js

@@ -19,10 +19,10 @@ describe('Browsing', () => {
       emptyFixture: 'services/no-wares.json',
     },
   ]
-  
+
   beforeEach(() => {
     // Intercept the responses from the endpoint to view all requests.
-    // Even though this is to the same endpoint, the call happens on each page twice, 
+    // Even though this is to the same endpoint, the call happens on each page twice,
     // once when the page loads with all the wares, and again after any search is performed.
     // this makes it necessary to create an intercept for each time the call is made.
     intercepts.forEach((intercept) => {
@@ -103,39 +103,4 @@ describe('Browsing', () => {
       })
     })
   })
-
-  describe('from the home page', () => {
-    beforeEach(() => {
-      wares = true
-      // Intercept the api call being made on the homepage
-      cy.customApiIntercept({
-        action: 'GET',
-        alias: 'useAllWares',
-        requestURL: `/providers/${Cypress.env('NEXT_PUBLIC_PROVIDER_ID')}/wares.json`,
-        data: wares,
-        defaultFixture: 'services/wares.json',
-        loading,
-        error
-      })
-      cy.visit('/')
-    })
-
-    context('a search is completed successfully and', () => {
-      it('navigates to "/browse" with a blank query', () => {
-        cy.get('button.search-button').click()
-        cy.url().should('include', '/browse')
-        cy.url().should('not.include', '?')
-        cy.get('input.search-bar').should('have.value', '')
-        cy.get(".card[data-cy='item-card']").should('be.visible')
-      })
-      
-      it('navigates to "/browse" with a query term', () => {
-        cy.get('input.search-bar').type('test')
-        cy.get('button.search-button').click()
-        cy.url().should('include', '/browse?q=test')
-        cy.get('input.search-bar').should('have.value', 'test')
-        cy.get(".card[data-cy='item-card']").should('be.visible')
-      })
-    })
-  })
-})
+})

cypress/e2e/home.cy.js

@@ -1,4 +1,4 @@
-describe('Viewing Home page', () => {
+describe('Navigating to the home page', () => {
   // declare variables that can be used to change how the response is intercepted.
   let loading
   let error
@@ -18,47 +18,82 @@ describe('Viewing Home page', () => {
     cy.visit('/')
   })
 
-  context('featured services list is loading', () => {
-    before(() => loading = true)
-
-    it('should show 3 placeholder cards loading', () => {
-      cy.get('p.placeholder-glow').should('have.length', 3).then(() => {
-        cy.log('Loading text displays correctly.')
+  describe('renders a search bar', () => {
+    it('with no query', () => {
+      cy.get("form[data-cy='search-bar']").should('exist').then(() => {
+        cy.log('Search bar renders successfully.')
       })
     })
-  })
 
-  context('error while making a request to the api', () => {
-    before(() => {
-      loading = false
-      error = true
+    it('able to navigate to "/browse" with a blank query', () => {
+      cy.get('button.search-button').click()
+      cy.url().should('include', '/browse')
+      cy.url().should('not.include', '?')
+      cy.get('input.search-bar').should('have.value', '')
+      cy.get(".card[data-cy='item-card']").should('be.visible')
     })
-    it('should show an error message.', () => {
-      cy.get("div[role='alert']").should('be.visible').then(() => {
-        cy.log('Successfully hits an error.')
-      })
+
+    it('able to navigate to "/browse" with a valid query term', () => {
+      cy.get('input.search-bar').type(Cypress.env('CYPRESS_SEARCH_QUERY'))
+      cy.get('button.search-button').click()
+      cy.url().should('include', `/browse?q=${Cypress.env('CYPRESS_SEARCH_QUERY')}`)
+      cy.get('input.search-bar').should('have.value', Cypress.env('CYPRESS_SEARCH_QUERY'))
+      cy.get(".card[data-cy='item-card']").should('be.visible')
+    })
+
+    it('able to navigate to "/browse" with an invalid query term', () => {
+      cy.get('input.search-bar').type('test')
+      cy.get('button.search-button').click()
+      cy.url().should('include', '/browse?q=test')
+      cy.get('input.search-bar').should('have.value', 'test')
+      cy.get(".card[data-cy='item-card']").should('be.visible')
     })
   })
 
-  context('home page components are loading successfully, &', () => {
-    before(() => {
-      featuredServices = true
-      error = false
+  describe('renders a text box', () => {
+    it('showing the about text.', () => {
+      cy.get("section[data-cy='about-us-section']").should('exist').then(() => {
+        cy.log('Abouttext renders successfully.')
+      })
     })
-    it('should show the search bar.', () => {
-      cy.get("form[data-cy='search-bar']").should('exist').then(() => {
-        cy.log('Search bar renders successfully.')
+  })
+
+  describe('makes a call to the api', () => {
+    context('which when returns an error', () => {
+      before(() => {
+        loading = false
+        error = true
+      })
+
+      it('shows an error message', () => {
+        // why would we get an error?
+        cy.get("div[role='alert']").should('be.visible').then(() => {
+          cy.log('Successfully hits an error.')
+        })
       })
     })
-    it('should show the about text.', () => {
-      cy.get("section[data-cy='about-us-section']").should('exist').then(() => {
-        cy.log('Abouttext renders successfully.')
+
+    context('which when returns no error or data', () => {
+      before(() => loading = true)
+
+      it('shows 3 placeholder cards loading', () => {
+        cy.get('p.placeholder-glow').should('have.length', 3).then(() => {
+          cy.log('Loading text displays correctly.')
+        })
       })
     })
-    it('should show the featured services cards.', () => {
-      cy.get("div[data-cy='item-group']").should('exist').then(() => {
-        cy.log('Status bar renders successfully.')
+
+    context('which when returns data', () => {
+      before(() => {
+        featuredServices = true
+        error = false
+      })
+
+      it('shows the featured services cards', () => {
+        cy.get("div[data-cy='item-group']").should('exist').then(() => {
+          cy.log('Status bar renders successfully.')
+        })
       })
     })
   })
-})
+})