fix the first home spec

made the cypress config file more dynamic. it also will allow us to
correctly intercept api calls in our `customApiIntercept` command.

update the "featured services list is loading" test check that we in
fact have 3 placeholder items, as the description states.

Author: alishaevn

cypress.config.js

@@ -23,12 +23,17 @@ module.exports = defineConfig({
   env: {
     TEST_SCIENTIST_USER: '[email protected]',
     TEST_SCIENTIST_PW: '!test1234',
-    NEXT_PUBLIC_PROVIDER_NAME: 'acme',
-    NEXT_PUBLIC_PROVIDER_ID: '572'
+    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,
+    // 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
+    API_PER_PAGE: 2000,
   },
   reporter: 'junit',
   reporterOptions: {
     mochaFile: 'cypress/results/results-[hash].xml',
     toConsole: true,
   },
-});
+})

cypress/e2e/home.cy.js

@@ -5,11 +5,10 @@ describe('Viewing Home page', () => {
   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`,
+      requestURL: `/wares.json?per_page=${Cypress.env('API_PER_PAGE')}`,
       data: featuredServices,
       defaultFixture: 'services/wares.json',
       emptyFixture: 'services/no-wares.json',
@@ -19,13 +18,11 @@ describe('Viewing Home page', () => {
     cy.visit('/')
   })
 
-
   context('featured services list is loading', () => {
-    before(() => {
-      loading = true
-    })
+    before(() => loading = true)
+
     it('should show 3 placeholder cards loading', () => {
-      cy.get('p.placeholder-glow').should('be.visible').then(() => {
+      cy.get('p.placeholder-glow').should('have.length', 3).then(() => {
         cy.log('Loading text displays correctly.')
       })
     })