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 }]} >