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"
  },