Merge branch 'main' into 176-full-color-demo

Author: alishaevn

.npmrc

@@ -3,7 +3,6 @@
 
 - [Getting Started](#getting-started)
   - [Webstore Component Library](#webstore-component-library)
-    - [Configure token to pull from the github npm repository](#configure-token-to-pull-from-the-github-npm-repository)
     - [Component Library Dev Mode](#component-library-dev-mode)
   - [Environment Variables](#environment-variables)
     - [Authentication](#authentication)
@@ -33,13 +32,7 @@
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. -->
 
 ### Webstore Component Library
-The webstore requires a [React component library](https://reactjs.org/docs/react-component.html) of view components. That dependency is packaged and released independently and we fetch it from the github repository.
-
-#### Configure token to pull from the github npm repository
-Using the published github npm package requires an auth token to pull:
-
-  1. Create a classic token on your github account https://github.com/settings/tokens
-  2. `echo "//npm.pkg.github.com/:_authToken=THE_ABOVE_TOKEN_GOES_HERE" >> ~/.npmrc`
+The webstore requires a [React component library](https://reactjs.org/docs/react-component.html) of view components. That dependency is packaged and released independently.
 
 #### Component Library Dev Mode
 Using the local github repository requires you to manually clone the component library to your computer, build, and link it:
@@ -150,12 +143,12 @@ If you are creating an e2e test, it will live in the `cypress/e2e` directory. Co
     - to get the value for this variable, open your browser to your running app at `localhost:3000`.
     - inspect the page
     - click the "Application" tab
-    - click "Cookies" 
+    - 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.local
     - do not ever commit this value
     - this value will need to be updated whenever the cookie expires, approximately once per month
-    
+
 ## Cutting a New Release
 A git tag should exist for every release. We use `release-it` to automate the coordination of package.json and git tag.
 

README.md

@@ -1,3 +1,5 @@
+import { scientistApiBaseURL } from '../support/e2e'
+
 describe('Viewing all requests', () => {
   describe('as a logged out user', () => {
     it('should show an error message.', () => {
@@ -10,7 +12,6 @@ describe('Viewing all requests', () => {
   })
 
   describe('as a logged in user', () => {
-    let scientistApiBaseURL = `https://${Cypress.env('NEXT_PUBLIC_PROVIDER_NAME')}.scientist.com/api/v2`
     // declare variables that can be used to change how the response is intercepted.
     let requestList
     let loading
@@ -20,34 +21,23 @@ describe('Viewing all requests', () => {
       // Call the custom cypress command to log in
       cy.login(Cypress.env('TEST_SCIENTIST_USER'), Cypress.env('TEST_SCIENTIST_PW'))
       // Intercept the response from the endpoint to view all requests
-      // TODO(summer-cook): extract out this base url into the config to use as an environment variable. it was not cooperating before
-      cy.intercept('GET', `${scientistApiBaseURL}/quote_groups/mine.json`, (req) => {
-        switch (true) {
-          // reply with an empty response: both data and error will be undefined.
-          case loading: req.reply()
-          break
-
-          // error will be defined
-          case error: req.reply({ statusCode: 500 })
-          break
-
-          case requestList: req.reply({ fixture: 'all-requests/requests.json' })
-          break
-
-          // reply with a request body- default status code is 200
-          case !requestList: req.reply({ fixture: 'all-requests/no-requests.json' })
-          break
-        }
+      cy.customApiIntercept({
+        action: 'GET',
+        alias: 'useAllRequests',
+        requestURL: `/quote_groups/mine.json`,
+        data: requestList,
+        defaultFixture: 'all-requests/requests.json',
+        emptyFixture: 'all-requests/no-requests.json',
+        loading,
+        error
       })
       // Intercept the response from the endpoint that gets the default ware ID
-      cy.intercept('GET', `${scientistApiBaseURL}/wares.json?q=make-a-request`, (req) => {
-        switch (true) {
-          case error: req.reply({ statusCode: 500 })
-          break
-
-          default: req.reply({ fixture: 'all-requests/make-a-request.json' })
-          break
-        }
+      cy.customApiIntercept({
+        action: 'GET',
+        alias: 'useDefaultWare',
+        requestURL: `/wares.json?q=make-a-request`,
+        defaultFixture: 'all-requests/make-a-request.json',
+        error
       })
       cy.visit('/requests')
     })

cypress/e2e/requests.cy.js

@@ -23,7 +23,7 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
+import { scientistApiBaseURL } from './e2e'
 
 // add a command to login that uses a session, so the user will remain logged in throughout the test file vs. needing to log in before each example.
 // source: https://github.com/nextauthjs/next-auth/discussions/2053#discussioncomment-1191016
@@ -36,4 +36,34 @@ Cypress.Commands.add('login', (username, password) => {
 	// This cookie also may need to be refreshed intermittently if it expires
 	cy.setCookie("next-auth.session-token", Cypress.env('TEST_SESSION_COOKIE'));
   })
+})
+
+// intercepts requests and creates potential cases for loading, error, data, and empty data
+// required params are action, defaultFixture, requestURL
+// optional params such as data, loading, and error can be passed depending on the creation of test cases that are related to that specific api call
+Cypress.Commands.add('customApiIntercept', ({
+  action, alias, data, defaultFixture, emptyFixture, error, errorCaseStatusCode, loading, requestURL
+}) => {
+  cy.intercept(action, scientistApiBaseURL + requestURL, (req) => {
+    switch (true) {
+      // reply with an empty response: both data and error will be undefined.
+      case loading: req.reply()
+      break
+
+      // error will be defined
+      case error: req.reply({ statusCode: errorCaseStatusCode || 500 })
+      break
+
+      // reply with a request body- default status code is 200
+      case data: req.reply({ fixture: defaultFixture })
+      break
+
+      // reply with the empty fixture is there is one, and the default as a backup. Allows us to isolate one api call at a time that may potentially respond with empty data.
+      case !data: req.reply({ fixture: emptyFixture || defaultFixture })
+      break
+
+      default: req.reply({ fixture: defaultFixture })
+      break
+    }
+  }).as(alias || 'customIntercept')
 })

cypress/support/commands.js

@@ -16,5 +16,4 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+export const scientistApiBaseURL = `https://${Cypress.env('NEXT_PUBLIC_PROVIDER_NAME')}.scientist.com/api/v2`

cypress/support/e2e.js

@@ -18,7 +18,7 @@
     "@rjsf/core": "^5.0.0-beta.17",
     "@rjsf/utils": "^5.0.0-beta.17",
     "@rjsf/validator-ajv8": "^5.0.1",
-    "@scientist-softserv/webstore-component-library": "^0.1.14",
+    "@scientist-softserv/webstore-component-library": "^0.1.15",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.3",
     "next": "12.3.1",