feat: add e2e test

.github/workflows/test.yml

@@ -46,3 +46,20 @@ jobs:
 
       - name: Run Backend unit tests
         run: npm run backend:test
+
+  e2e:
+    name: Test/E2E
+    runs-on: ubuntu-latest
+    # needs:
+    #   - unit-frontend
+    #   - unit-backend
+    steps:
+      - uses: convictional/[email protected]
+        with:
+          owner: topos-protocol
+          repo: e2e-tests
+          github_token: ${{ secrets.ROBOT_PAT_TRIGGER_E2E_WORKFLOWS }}
+          workflow_file_name: frontend:faucet.yml
+          ref: seb/too-343
+          wait_interval: 60
+          client_payload: '{ "faucet-ref": "${{ github.head_ref }}" }'

.gitignore

@@ -7,9 +7,6 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
-.env
-dist
 dist-ssr
 *.local
 
@@ -24,5 +21,10 @@ dist-ssr
 *.sln
 *.sw?
 
-# Test coverage
+**/node_modules
+**/.env
+**/dist
+**/cypress/screenshots
+**/cypress/videos
 **/coverage
+

package.json

@@ -15,7 +15,7 @@
     "frontend:test": "npm run test --workspace=frontend",
     "frontend:test:coverage": "npm run test:coverage --workspace=frontend",
     "frontend:test:e2e": "npm run test:e2e --workspace=frontend",
-    "test:e2e": "start-server-and-test 'npm run backend:start' http-get://localhost:3001 'npm run frontend:test:e2e'"
+    "test:e2e": "start-server-and-test 'npm run backend:start' http-get://localhost:3002 'npm run frontend:test:e2e'"
   },
   "workspaces": [
     "packages/*"

packages/frontend/cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:4173',
+    baseUrl: 'http://localhost:3002',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

packages/frontend/cypress/e2e/home.cy.ts

@@ -1,30 +1,66 @@
-import { INFO } from '../../src/constants/wordings'
+import { ERROR } from '../../src/constants/wordings'
+import TestId from '../../src/utils/testId'
 
 describe('Home', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.get(`[data-testid="${TestId.FAUCET_FORM_FIELD_SUBNETS}"]`).as(
+      'subnetIds'
+    )
+    cy.get(`[data-testid="${TestId.FAUCET_FORM_FIELD_ADDRESS}"]`).as('address')
+    cy.get(`[data-testid="${TestId.FAUCET_FORM_ACTION_SUBMIT}"]`).as('submit')
   })
 
-  it('should have Builders Program banner', () => {
-    cy.get('.ant-alert-banner')
-      .as('banner')
-      .find('span')
-      .contains(INFO.JOIN_BUILDERS_PROGRAM)
-      .should('exist')
-      .and('be.visible')
-    cy.get('@banner')
-      .find('a')
-      .as('banner-link')
-      .should('have.text', INFO.BUILDERS_PROGRAM)
-      .and(
-        'have.attr',
-        'href',
-        'https://builders.toposware.com/topos-builders-program-v1-0'
-      )
-      .and('not.be.disabled')
+  it('should have visible subnets form field', function () {
+    cy.get(this.subnetIds).should('be.visible')
   })
 
-  it('should have disabled address input', () => {
-    cy.get('#faucet_address').should('be.visible').and('be.disabled')
+  it('should have visible and enabled address form field', function () {
+    cy.get(this.address).should('be.visible')
+  })
+
+  describe('SubnetIds', function () {
+    it('should have Topos and Incal pre-selected', function () {
+      cy.get(this.subnetIds).within(() => {
+        cy.contains('Topos').should('be.visible')
+        cy.contains('Incal').should('be.visible')
+      })
+    })
+  })
+
+  describe('Address', function () {
+    it('should have an enabled input', function () {
+      cy.get(this.address).within(() => {
+        cy.get('input').should('be.visible').and('be.enabled')
+      })
+    })
+  })
+
+  it('should have visible and enabled submit button', function () {
+    cy.get(this.submit).should('be.visible').and('be.enabled')
+  })
+
+  describe('Form submission', function () {
+    it('should fail if no address', function () {
+      cy.get(this.submit).click()
+      cy.get(this.address)
+        .parents('.ant-form-item')
+        .should('have.class', 'ant-form-item-has-error')
+      cy.get('#faucet_address_help').should('have.text', ERROR.MISSING_ADDRESS)
+    })
+
+    it('should fail if invalid address', function () {
+      cy.get(this.address).type('invalidaddress')
+      cy.get(this.submit).click()
+      cy.get(this.address)
+        .parents('.ant-form-item')
+        .should('have.class', 'ant-form-item-has-error')
+      cy.get('#faucet_address_help').should('have.text', ERROR.INVALID_ADDRESS)
+    })
+
+    it('should succeed if valid address', function () {
+      cy.get(this.address).type('0x178A3b1584Fd4E616d887F614eDb378A41A621B7')
+      cy.get(this.submit).click()
+    })
   })
 })

packages/frontend/package.json

@@ -11,7 +11,7 @@
     "start": "tsc && vite build --mode development --watch --sourcemap true",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "start-server-and-test 'npm run preview' http-get://localhost:4173 'cypress run'"
+    "test:e2e": "env-cmd --silent cypress run"
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",

packages/frontend/src/components/FaucetForm.tsx

@@ -138,7 +138,7 @@ const FaucetForm = () => {
             label="Address"
             name="address"
             data-testid={TestId.FAUCET_FORM_FIELD_ADDRESS}
-            rules={[{ required: true, message: 'Please input your address!' }]}
+            rules={[{ required: true, message: ERROR.MISSING_ADDRESS }]}
           >
             <Input
               placeholder="Input your address"

packages/frontend/src/constants/wordings.ts

@@ -1,13 +1,9 @@
-export enum INFO {
-  BUILDERS_PROGRAM = 'Builders Program',
-  JOIN_BUILDERS_PROGRAM = 'Building with Topos? Apply for a grant!',
-}
-
 export enum SUCCESS {
   GET_SUBNET_ASSET = 'Coins were successfully sent to your address on the selected subnets 🎉',
 }
 
 export enum ERROR {
   INVALID_ADDRESS = 'This address is not a valid address!',
+  MISSING_ADDRESS = 'Please input your address!',
   MISSING_SUBNET = 'Please select at least one subnet!',
 }