From 5ee1b72a043f4500ccb16f99b9b801c4a385d65e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Dan?= <sebastien.dan@gmail.com>
Date: Mon, 5 Feb 2024 14:45:06 +0100
Subject: [PATCH] feat: start working on e2e test

---
 .gitignore                                    |  2 +-
 packages/frontend/cypress/e2e/home.cy.ts      | 61 ++++++++++++++++++-
 .../frontend/src/components/FaucetForm.tsx    |  2 +-
 packages/frontend/src/constants/wordings.ts   |  1 +
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9f73b16..7bc6a47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,6 @@ dist-ssr
 **/.env
 **/dist
 **/cypress/screenshots
-# **/cypress/videos
+**/cypress/videos
 **/coverage
 
diff --git a/packages/frontend/cypress/e2e/home.cy.ts b/packages/frontend/cypress/e2e/home.cy.ts
index c08dec4..4c523d3 100644
--- a/packages/frontend/cypress/e2e/home.cy.ts
+++ b/packages/frontend/cypress/e2e/home.cy.ts
@@ -1,11 +1,66 @@
+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 visible subnets form field', function () {
+    cy.get(this.subnetIds).should('be.visible')
+  })
+
+  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 address input', () => {
-    cy.get('#faucet_address').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')
   })
 
-  // 0x4aab25b4fad0beaac466050f3a7142a502f4cf0a
+  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()
+    })
+  })
 })
diff --git a/packages/frontend/src/components/FaucetForm.tsx b/packages/frontend/src/components/FaucetForm.tsx
index 745cfb2..e15f3aa 100644
--- a/packages/frontend/src/components/FaucetForm.tsx
+++ b/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"
diff --git a/packages/frontend/src/constants/wordings.ts b/packages/frontend/src/constants/wordings.ts
index 6dd01e9..e9853b0 100644
--- a/packages/frontend/src/constants/wordings.ts
+++ b/packages/frontend/src/constants/wordings.ts
@@ -4,5 +4,6 @@ export enum SUCCESS {
 
 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!',
 }