updates from the webstore

README.md

@@ -174,14 +174,16 @@ There are 2 types of Cypress tests, e2e & component.
 If you are creating an e2e test, it will live in the `cypress/e2e` directory. Component tests will need to be created in a directory called `cypress/component `
 
 #### Cypress ENV Variables
-- the Cypress suite requires an environment variable that should be stored in your `.env.development` and not committed to git.
+- the Cypress suite requires an environment variable that should be stored in your `.env` and not committed to git.
   - TEST_SESSION_COOKIE=
-    - to get the value for this variable, open your browser to your running app at `localhost:3000`.
+    - to get the value for this variable, open your browser to your running app at `localhost:3000`
+    - sign in
     - inspect the page
-    - click the "Application" tab
+      - Chrome: click the "Application" tab
+      - Firefox: click the "Storage" tab
     - click "Cookies"
     - find the value for `next-auth.session-token`
-    - copy that value and paste it in the `TEST_SESSION_COOKIE` variable in your .env.development
+    - copy that value and paste it in the `TEST_SESSION_COOKIE` variable in your `.env`
     - do not ever commit this value
     - this value will need to be updated whenever the cookie expires, approximately once per month
 

cypress.config.js

@@ -11,6 +11,7 @@ module.exports = defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     chromeWebSecurity: false,
+    defaultCommandTimeout: 10000,
     setupNodeEvents(on, config) {
       config = dotenvFlowPlugin(config)
       config.env = {
@@ -21,14 +22,19 @@ module.exports = defineConfig({
     },
   },
   env: {
-    TEST_SCIENTIST_USER: '[email protected]',
+    CYPRESS_SEARCH_QUERY: 'test',
+    NEXT_PUBLIC_PROVIDER_ID: process.env.NEXT_PUBLIC_PROVIDER_ID,
+    NEXT_PUBLIC_PROVIDER_NAME: process.env.NEXT_PUBLIC_PROVIDER_NAME,
+    NEXT_PUBLIC_TOKEN: process.env.NEXT_PUBLIC_TOKEN,
     TEST_SCIENTIST_PW: '!test1234',
     NEXT_PUBLIC_PROVIDER_NAME: 'phenovista',
-    NEXT_PUBLIC_PROVIDER_ID: '12527'
+    NEXT_PUBLIC_PROVIDER_ID: '12527',
+    TEST_SCIENTIST_USER: '[email protected]',
+    TEST_SESSION_COOKIE: process.env.TEST_SESSION_COOKIE,
   },
   reporter: 'junit',
   reporterOptions: {
     mochaFile: 'cypress/results/results-[hash].xml',
     toConsole: true,
   },
-});
+})

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,67 +1,120 @@
-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 data = 'services/wares.json'
   let error
-  let featuredServices
 
   beforeEach(() => {
-    // Intercept the response from the endpoint to view all requests
     cy.customApiIntercept({
-      action: 'GET',
       alias: 'useAllWares',
-      requestURL: `/providers/${Cypress.env('NEXT_PUBLIC_PROVIDER_ID')}/wares.json`,
-      data: featuredServices,
-      defaultFixture: 'services/wares.json',
-      emptyFixture: 'services/no-wares.json',
-      loading,
-      error
+      data,
+      error,
+      requestURL: '/wares.json?per_page=2000',
     })
+
     cy.visit('/')
   })
 
-
-  context('featured services list is loading', () => {
-    before(() => {
-      loading = true
+  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.')
+      })
     })
-    it('should show 3 placeholder cards loading', () => {
-      cy.get('p.placeholder-glow').should('be.visible').then(() => {
-        cy.log('Loading text displays correctly.')
+
+    context('able to navigate to "/browse"', () => {
+      const testSetup = ({ data, defaultFixture, requestURL }) => {
+        cy.customApiIntercept({
+          alias: 'useFilteredWares',
+          data,
+          error,
+          requestURL,
+        })
+      }
+
+      it('with a blank query', () => {
+        testSetup({
+          data: 'services/wares.json',
+          requestURL: '/wares.json?per_page=2000&q=',
+        })
+
+        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('with a valid query term', () => {
+        testSetup({
+          data: 'services/filtered-wares.json',
+          requestURL: `/wares.json?per_page=2000&q=${Cypress.env('CYPRESS_SEARCH_QUERY')}`,
+        })
+
+        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('with an invalid query term', () => {
+        const invalidQuery = 'asdfghjk'
+        testSetup({
+          data: 'services/no-wares.json',
+          requestURL: `/wares.json?per_page=2000&q=${invalidQuery}`,
+        })
+
+        cy.get('input.search-bar').type(invalidQuery)
+        cy.get('button.search-button').click()
+        cy.url().should('include', `/browse?q=${invalidQuery}`)
+        cy.get('input.search-bar').should('have.value', invalidQuery)
+        cy.get("p[data-cy='no-results']").should('contain', `Your search for ${invalidQuery} returned no results`)
       })
     })
   })
 
-  context('error while making a request to the api', () => {
-    before(() => {
-      loading = false
-      error = true
-    })
-    it('should show an error message.', () => {
-      cy.get("div[role='alert']").should('be.visible').then(() => {
-        cy.log('Successfully hits an error.')
+  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.')
       })
     })
   })
 
-  context('home page components are loading successfully, &', () => {
-    before(() => {
-      featuredServices = true
-      error = false
-    })
-    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 given an invalid access token', () => {
+      before(() => {
+        data = undefined
+        error = {
+          body: {
+            message: 'No access token provided.',
+          },
+          statusCode: 403,
+        }
+      })
+
+      it('shows an error message', () => {
+        cy.get("div[role='alert']").should('be.visible').then(() => {
+          cy.log('Successfully hits an error.')
+        })
+        cy.get("div[role='alert']").contains('No access token provided.')
       })
     })
-    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', () => {
+      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', () => {
+      it('shows the featured services cards', () => {
+        cy.get("div[data-cy='item-group']").should('exist').then(() => {
+          cy.log('Status bar renders successfully.')
+        })
       })
     })
   })
-})
+})