360-fix-e2e-specs

.env.example

@@ -6,3 +6,4 @@ NEXT_PUBLIC_PROVIDER_ID=0001
 NEXT_PUBLIC_PROVIDER_NAME=webstore
 NEXT_PUBLIC_SCIENTIST_API_VERSION=v2
 NEXT_PUBLIC_WEBHOOK_URL=http://ss-mailer/webstore
+TEST_SESSION_COOKIE= #ref: https://github.com/scientist-softserv/webstore?tab=readme-ov-file#cypress-env-variables

.github/workflows/build-test-lint.yml

@@ -32,6 +32,11 @@ jobs:
         with:
           start: yarn start
           wait-on: 'http://localhost:3000'
+        env:
+          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
+          NEXT_PUBLIC_TOKEN: ${{ secrets.NEXT_PUBLIC_TOKEN }}
+          TEST_SESSION_COOKIE: ${{ secrets.TEST_SESSION_COOKIE }}
   eslint:
     needs: build
     uses: scientist-softserv/actions/.github/workflows/[email protected]

README.md

@@ -174,7 +174,7 @@ 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` and not committed to git.
+- the Cypress suite requires an environment variable that should be stored in your `.env`.
   - TEST_SESSION_COOKIE=
     - to get the value for this variable, open your browser to your running app at `localhost:3000`
     - sign in

cypress.config.js

@@ -22,6 +22,7 @@ module.exports = defineConfig({
     },
   },
   env: {
+    API_PER_PAGE: 10,
     CYPRESS_SEARCH_QUERY: 'test',
     NEXT_PUBLIC_PROVIDER_ID: process.env.NEXT_PUBLIC_PROVIDER_ID,
     NEXT_PUBLIC_PROVIDER_NAME: process.env.NEXT_PUBLIC_PROVIDER_NAME,

cypress/e2e/browse.cy.js

@@ -1,105 +1,81 @@
-describe('Browsing', () => {
-  let wares
-  let loading
-  let error
-  let intercepts = [
-    {
-      alias: 'useFilteredWares',
-    },
-    {
-      alias: 'useFilteredWares - blank search',
-    },
-    {
-      alias: 'useFilteredWares - with results',
-      query: 'test',
-    },
-    {
-      alias: 'useFilteredWares - no results',
-      query: 'asdfghjk',
-      emptyFixture: 'services/no-wares.json',
-    },
-  ]
+/**
+ * In order to ensure that any changes against the API do not negatively
+ * affect the critical path of browsing all services and creating a request,
+ * we will not stub the API calls for the browse page.
+ */
 
+describe('Navigating to the browse page', () => {
   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,
-    // 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) => {
-      cy.customApiIntercept({
-        action: 'GET',
-        alias: intercept.alias,
-        requestURL: `/providers/${Cypress.env('NEXT_PUBLIC_PROVIDER_ID')}/wares.json?q=${intercept.query || ''}`,
-        data: wares,
-        defaultFixture: 'services/wares.json',
-        emptyFixture: intercept.emptyFixture || '',
-        loading,
-        error
+    cy.useFilteredWares()
+    cy.visit('/browse')
+  })
+
+  context('while content is loading', () => {
+    it('should show loading components.', () => {
+      cy.get(".card-body[data-cy='item-loading']").should('be.visible').then(() => {
+        cy.log('Loading components display correctly.')
       })
     })
   })
 
-  describe('from the browse page', () => {
-    beforeEach(() => {
-      cy.visit('/browse')
+  context('and conducting a search', () => {
+    it('with no query, returns all services', () => {
+      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')
     })
 
-    context('browse page is loading', () => {
-      before(() => {
-        loading = true
-      })
-      it('should show loading components.', () => {
-        cy.get(".card-body[data-cy='item-loading']").should('be.visible').then(() => {
-          cy.log('Loading components display correctly.')
-        })
-      })
+    it('with a valid query, returns matching services', () => {
+      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')
     })
 
-    context('error while making a request to the api', () => {
-      before(() => {
-        loading = false
-        error = true
+    it('with an invalid query, returns no services', () => {
+      cy.get('input.search-bar').type('asdfghjk')
+      cy.get('button.search-button').click()
+      cy.url().should('include', '/browse?q=asdfghjk')
+      cy.get('input.search-bar').should('have.value', 'asdfghjk')
+      cy.get("p[data-cy='no-results']").should('contain', 'Your search for asdfghjk returned no results')
+    })
+  })
+
+  context('and creating a new request', () => {
+    beforeEach(() => {
+      cy.waitForElement('[data-cy="linked-button"]')
+      cy.get('[data-cy="linked-button"]').then(($buttons) => {
+        const randomIndex = Math.floor(Math.random() * Cypress.env('API_PER_PAGE'))
+        cy.wrap($buttons.eq(randomIndex)).click()
       })
-      it('should show an error message.', () => {
+    })
+
+    context('as a logged out user', () => {
+      it('shows a disabled request form, with an error message.', () => {
         cy.get("div[role='alert']").should('be.visible').then(() => {
           cy.log('Successfully hits an error.')
         })
+        cy.get('div.alert-heading').should('have.text', 'Sign in required')
+        cy.get('form.rjsf').should('be.visible')
+        cy.scrollTo('bottom')
+        cy.get('button.btn-primary').should('be.disabled')
       })
     })
 
-    // filtering by query is handled in the api and not the webstore
-    // since we are stubbing that response, our tests will not return actual filtered wares based on on test query.
-    // the purpose of these tests is just to show that the correct components appear in the UI in each case.
-    context('a search is completed successfully and', () => {
+    context('as a logged in user', () => {
       before(() => {
-        wares = true
-        error = false
-      })
-      it('has 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')
+        cy.login(Cypress.env('TEST_SCIENTIST_USER'), Cypress.env('TEST_SCIENTIST_PW'))
       })
 
-      it('has 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')
-      })
-
-      before(() => {
-        wares = false
-      })
-      it('has a query term, but that term has no results', () => {
-        cy.get('input.search-bar').type('asdfghjk')
-        cy.get('button.search-button').click()
-        cy.url().should('include', '/browse?q=asdfghjk')
-        cy.get('input.search-bar').should('have.value', 'asdfghjk')
-        cy.get("p[data-cy='no-results']").should('contain', 'Your search for asdfghjk returned no results')
+      it('shows a valid request form.', () => {
+        cy.waitForElement('form.rjsf')
+        cy.get("div[role='alert']").should('not.exist')
+        cy.get('form.rjsf').should('be.visible')
+        cy.scrollTo('bottom')
+        cy.get('button.btn-primary').should('be.enabled')
       })
     })
   })

cypress/fixtures/session.json

@@ -6,4 +6,4 @@
   },
   "expires": "3000-01-01T00:00:00.000Z",
   "accessToken": "abcdefghijklmnopqrst"
-}
+}

cypress/support/commands.js

@@ -38,3 +38,22 @@ Cypress.Commands.add('customApiIntercept', ({
     return req.reply(response.data || response.error || {})
   }).as(alias || 'customIntercept')
 })
+
+/**
+ * Intercept the useFilteredWares API call to modify the per_page query
+ * parameter. We're lowering it in an attempt to speed up the test. Then,
+ * we continue to hit the server with the modified request.
+ */
+Cypress.Commands.add('useFilteredWares', () => {
+  cy.intercept(/\/wares\.json\?per_page=2000&q.*/, (req) => {
+    req.url = req.url.replace(/per_page=\d+/, `per_page=${Cypress.env('API_PER_PAGE')}`)
+    req.continue()
+  })
+})
+
+/**
+ * To avoid the flakiness of the test, we wait for the element to exist
+ */
+Cypress.Commands.add('waitForElement', (selector) => {
+  cy.get(selector).should('exist')
+})

package.json

@@ -2,6 +2,7 @@
   "name": "webstore",
   "version": "0.1.8",
   "private": true,
+  "homepage": "https://github.com/scientist-softserv/webstore#readme",
   "engines": {
     "node": "^18.13.0"
   },