Update integration.yml (#586)

### Description

- Do not use pnpm for integration tests
- Currently disabled gatsby tests
- Added environment configuration

### Checklist

- [x] I have added documentation for new/changed functionality in this
PR or in auth0.com/docs
- [x] All active GitHub checks for tests, formatting, and security are
passing
- [x] The correct base branch is being used, if not the default branch

---------

Signed-off-by: Frederik Prijck <[email protected]>
Co-authored-by: Ewan Harris <[email protected]>

.github/workflows/integration.yml

@@ -1,14 +1,13 @@
 name: Integration Tests
 
 on:
-  # merge_group:
   workflow_dispatch:
-  # pull_request:
-  #   branches:
-  #     - main
-  # push:
-  #   branches:
-  #     - main
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
 
 permissions:
   contents: read
@@ -19,69 +18,46 @@ concurrency:
 
 env:
   NODE_VERSION: 18
-  # Mock user credentials for Cypress tests
-  CYPRESS_USER_EMAIL: [email protected]
-  CYPRESS_USER_PASSWORD: mockpassword
 
 jobs:
-  test-react-router:
-    name: Run react-router tests
+  test-examples:
+    name: Run example tests
     runs-on: ubuntu-latest
 
     env:
       SKIP_PREFLIGHT_CHECK: true
-      REACT_APP_DOMAIN: your-tenant.auth0.com
-      REACT_APP_CLIENT_ID: yourclientid
-      REACT_APP_AUDIENCE: https://api.example.com/users
-      REACT_APP_API_PORT: 3001
+      CYPRESS_USER_EMAIL: ${{secrets.CYPRESS_USER_EMAIL}}
+      CYPRESS_USER_PASSWORD: ${{secrets.CYPRESS_USER_PASSWORD}}
+      REACT_APP_DOMAIN: ${{secrets.TEST_DOMAIN}}
+      REACT_APP_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
+      REACT_APP_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
+      GATSBY_DOMAIN: ${{secrets.TEST_DOMAIN}}
+      GATSBY_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
+      GATSBY_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
+      NEXT_PUBLIC_DOMAIN: ${{secrets.TEST_DOMAIN}}
+      NEXT_PUBLIC_CLIENT_ID: ${{secrets.TEST_CLIENT_ID}}
+      NEXT_PUBLIC_AUDIENCE: ${{secrets.TEST_AUDIENCE}}
+      DOMAIN: ${{secrets.TEST_DOMAIN}}
+      AUDIENCE: ${{secrets.TEST_AUDIENCE}}
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Run integration test
-        uses: ./.github/actions/integration
-        with:
-          integration: 'cra-react-router'
-          node: ${{ env.NODE_VERSION }}
+      - name: Install dependencies
+        run: npm ci
 
-  test-gatsby:
-    name: Run Gatsby tests
-    runs-on: ubuntu-latest
+      - name: Build SDK
+        run: npm run build
 
-    env:
-      GATSBY_DOMAIN: your-tenant.auth0.com
-      GATSBY_CLIENT_ID: yourclientid
-      GATSBY_AUDIENCE: https://api.example.com/users
-      GATSBY_API_PORT: 3001
+      - name: Install examples
+        run: npm run install:examples
 
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Run integration test
-        uses: ./.github/actions/integration
-        with:
-          integration: 'gatsby-app'
-          node: ${{ env.NODE_VERSION }}
-          dotenv: '.env.development.sample'
+      - name: Run integration test (CRA)
+        run: npm run test:cra
 
-  test-nextjs:
-    name: Run NextJS tests
-    runs-on: ubuntu-latest
-
-    env:
-      NEXT_PUBLIC_DOMAIN: your-tenant.auth0.com
-      NEXT_PUBLIC_CLIENT_ID: yourclientid
-      NEXT_PUBLIC_AUDIENCE: https://api.example.com/users
-      NEXT_PUBLIC_API_PORT: 3001
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+      - name: Run integration test (NextJS)
+        run: npm run test:nextjs
 
-      - name: Run integration test
-        uses: ./.github/actions/integration
-        with:
-          integration: 'nextjs-app'
-          node: ${{ env.NODE_VERSION }}
+      - name: Run integration test (Gatsby)
+        run: npm run test:gatsby

browserstack.json

@@ -17,7 +17,7 @@
     }
   ],
   "run_settings": {
-    "cypress_config_file": "./cypress.config.js",
+    "cypress_config_file": "./cypress-bs.config.js",
     "cypress-version": "13.1",
     "project_name": "Auth0 React SDK",
     "exclude": [],

cypress-bs.config.js

@@ -0,0 +1,18 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  defaultCommandTimeout: 7500,
+  chromeWebSecurity: false,
+  viewportWidth: 1000,
+  viewportHeight: 1000,
+  fixturesFolder: false,
+  reporter: 'junit',
+  reporterOptions: {
+    mochaFile: 'test-results/cypress/junit-[hash].xml',
+  },
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://127.0.0.1:3000',
+    supportFile: false,
+  },
+});

cypress.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
+  defaultCommandTimeout: 7500,
   chromeWebSecurity: false,
   viewportWidth: 1000,
   viewportHeight: 1000,
@@ -14,4 +15,4 @@ module.exports = defineConfig({
     baseUrl: 'http://localhost:3000',
     supportFile: false,
   },
-});
+});

examples/gatsby-app/src/components/Users.js

@@ -10,7 +10,7 @@ export function Users() {
     loading,
     error,
     data: users = [],
-  } = useApi(`http://localhost:${PORT}/users`, {
+  } = useApi(`http://127.0.0.1:${PORT}/users`, {
     audience: process.env.GATSBY_AUDIENCE,
     scope: 'profile email read:users',
   });

package.json

@@ -33,7 +33,7 @@
     "start:api": "npm start --prefix=examples/users-api",
     "test:cra": "start-server-and-test start:api 3001 start:cra http-get://127.0.0.1:3000 cypress:run",
     "test:cra:watch": "start-server-and-test start:api 3001 start:cra 3000 cypress:open",
-    "test:gatsby": "start-server-and-test start:api 3001 start:gatsby 3000 cypress:run",
+    "test:gatsby": "start-server-and-test start:api 3001 start:gatsby http-get://localhost:3000 cypress:run",
     "test:gatsby:watch": "start-server-and-test start:api 3001 start:gatsby 3000 cypress:open",
     "test:nextjs": "start-server-and-test start:api 3001 start:nextjs 3000 cypress:run",
     "test:nextjs:watch": "start-server-and-test start:api 3001 start:nextjs 3000 cypress:open",
@@ -58,7 +58,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/jest": "^29.2.3",
-    "@types/react": "^17.0.52",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",