NO TICKET: Cypress CI Test Suite API Update

.github/workflows/CI_cypress.yml

@@ -18,7 +18,7 @@ jobs:
           build: npm run build
         env:
           VITE_BASE_URL: http://localhost:4173
-          VITE_OCOTILLO_API_URL: http://127.0.0.1:4010
+          VITE_OCOTILLO_API_URL: http://localhost:8000
 
       - name: Save build folder
         uses: actions/upload-artifact@v4
@@ -49,15 +49,46 @@ jobs:
           name: build
           path: dist
 
-      - name: Start mock server
+      - name: Checkout API repo
+        uses: actions/checkout@v4
+        with:
+          repository: DataIntegrationGroup/NMSampleLocations
+          ref: cm-seed-db-for-dockerized-frontend-testing
+          path: api-repo
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Start API containers and seed database
+        working-directory: ./api-repo
+        env:
+          POSTGRES_USER: ${{ secrets.PG_TEST_USER }}
+          POSTGRES_PASSWORD: ${{ secrets.PG_TEST_PW }}
+          POSTGRES_DB: ${{ secrets.PG_TEST_DB }}
+          MODE: development
+          AUTHENTIK_DISABLE_AUTHENTICATION: ${{ secrets.AUTHENTIK_TEST }}
         run: |
-          # Start mock server in background
-          npm run mock:server:cypress &
-          # Wait for server to start
-          sleep 10
-
+          docker compose up -d --build
+          # Wait for API to respond to requests
+          timeout 180 bash -c 'until curl -f http://localhost:8000/docs; do sleep 3; done'
+          # Give it a few more seconds for full initialization
+          sleep 5
+          # Seed database
+          docker compose exec -T app python -m transfers.seed
+
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
           start: npm start
-          browser: chrome
+          browser: chrome
+          # Run connectivity test first, then all other tests
+          spec: |
+            cypress/e2e/test-api-connectivity.cy.ts
+            cypress/e2e/ocotillo/**/*.cy.ts
+        env:
+          DEBUG: cypress:network:*,cypress:server:request
+
+      - name: Stop API containers
+        if: always()
+        working-directory: ./api-repo
+        run: docker compose down -v

cypress.config.ts

@@ -9,7 +9,9 @@ export default defineConfig({
   },
 
   e2e: {
-    baseUrl: 'http://localhost:4173',
+    baseUrl: process.env.CI
+    ? "http://localhost:4173"   
+    : "http://localhost:5173",
     setupNodeEvents(on, config) {
       process.env.NODE_ENV = 'test'
     },

cypress/e2e/ocotillo/contact_create.cy.ts

@@ -42,7 +42,9 @@ describe('Contact Create Page', () => {
     cy.contains('label', 'Organization').parent().find('input').type('Test Organization');
 
     // thing from autocomplete
-    cy.contains('label', 'Thing').parent().find('input').click()
+    cy.contains('label', 'Thing').parent().find('input').type('TEST')
+    // Wait for the API call to complete
+    cy.wait(500)
     cy.get('[role="listbox"]').should('be.visible');
     cy.get('[role="listbox"] li').first().click();
 
@@ -71,7 +73,9 @@ describe('Contact Create Page', () => {
     cy.contains('label', 'Organization').parent().find('input').type('Test Organization');
 
     // thing from autocomplete
-    cy.contains('label', 'Thing').parent().find('input').click()
+    cy.contains('label', 'Thing').parent().find('input').type('TEST')
+    // Wait for the API call to complete
+    cy.wait(500)
     cy.get('[role="listbox"]').should('be.visible');
     cy.get('[role="listbox"] li').first().click();
 

cypress/e2e/ocotillo/contact_edit.cy.ts

@@ -57,6 +57,8 @@ describe('Contact Edit Page', () => {
     cy.contains('label', 'Contact Type').parent().find('[role="combobox"]').click();
     cy.get('[role="listbox"] li').first().click();
 
+    cy.wait(5000); // wait for save button to be enabled
+
     cy.get('button').contains(/save/i).click();
 
     // Wait for the update contact api call to complete

cypress/e2e/test-api-connectivity.cy.ts

@@ -0,0 +1,22 @@
+describe('API Connectivity Test', () => {
+    it('should be able to reach API from browser', () => {
+      cy.request({
+        method: 'GET',
+        url: 'http://localhost:8000/docs',
+        failOnStatusCode: false,
+      }).then((response) => {
+        cy.log(`API Response Status: ${response.status}`)
+        expect(response.status).to.be.oneOf([200, 401]) // 401 is fine, means API is reachable
+      })
+
+      cy.request({
+        method: 'GET',
+        url: 'http://localhost:8000/thing',
+        failOnStatusCode: false,
+      }).then((response) => {
+        cy.log(`Thing endpoint Status: ${response.status}`)
+        // Should get 401 (needs auth) or 200, not network error
+        expect(response.status).to.not.eq(0)
+      })
+    })
+  })