Skip to content

Commit

Permalink
Merge branch 'main' into 378-cypress-in-ci
Browse files Browse the repository at this point in the history
  • Loading branch information
alishaevn committed Feb 15, 2024
2 parents 0bd86ef + d12029a commit 3525208
Show file tree
Hide file tree
Showing 24 changed files with 666 additions and 327 deletions.
10 changes: 6 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 8 additions & 4 deletions cypress.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3000',
chromeWebSecurity: false,
defaultCommandTimeout: 10000,
setupNodeEvents(on, config) {
config = dotenvFlowPlugin(config)
config.env = {
Expand All @@ -21,15 +22,18 @@ 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: 'acme',
NEXT_PUBLIC_PROVIDER_ID: '572'
TEST_SCIENTIST_USER: '[email protected]',
TEST_SESSION_COOKIE: process.env.TEST_SESSION_COOKIE,
},
projectId: '6wuou2',
reporter: 'junit',
reporterOptions: {
mochaFile: 'cypress/results/results-[hash].xml',
toConsole: true,
},
});
})
41 changes: 3 additions & 38 deletions cypress/e2e/browse.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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')
})
})
})
})
})
135 changes: 94 additions & 41 deletions cypress/e2e/home.cy.js
Original file line number Diff line number Diff line change
@@ -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.')
})
})
})
})
})
})
Loading

0 comments on commit 3525208

Please sign in to comment.