diff --git a/cypress/e2e/flows.test.ts b/cypress/e2e/flows.test.ts index bf6e3372..c8826067 100644 --- a/cypress/e2e/flows.test.ts +++ b/cypress/e2e/flows.test.ts @@ -1,6 +1,5 @@ // cypress/integration/navigation.ts -import { is } from 'cypress/types/bluebird'; //Bridge flow describe('Bridge flow', () => { @@ -91,9 +90,8 @@ describe('Select tokens & input amount', () => { cy.wait(2500); //Get the output amount - cy.get('[data-testid="swap__output__panel"]').within(() => { - cy.get('.token-amount-input').invoke('val').as('outputAmount'); - }); + cy.get('[data-testid="swap-output-input-panel"]').invoke('val').as('outputAmount'); + cy.get('@outputAmount').should('not.be.empty'); cy.get('@outputAmount').should('have.length.greaterThan', 7); @@ -132,6 +130,63 @@ describe('Select tokens & input amount', () => { }); }); +describe('Input & output amount validation', () => { + it('should type an input amount & wait for output amount', () => { + cy.visit('/swap'); + //Select input asset +/* cy.get('[data-testid="swap__input__panel"]').within(() => { + cy.get('[data-testid="swap__token__select"]').click(); + }); + cy.get('[data-testid="currency__list__XLM"]').click(); + */ + //Select output asset + cy.get('[data-testid="swap__output__panel"]').within(() => { + cy.get('[data-testid="swap__token__select"]').click(); + }); + cy.get('[data-testid="token-search-input"]').type('ngnt'); + cy.get('[data-testid="currency__list__NGNT"]').click(); + + + //Input amount + cy.get('[data-testid="swap__input__panel"]').within(() => { + cy.get('.token-amount-input').type('1'); + }); + //await for calcs + cy.wait(5000); + cy.screenshot() + //Get the output amount + cy.get('[data-testid="swap-output-input-panel"]').invoke('val').as('outputAmount'); + //Get the input amount + cy.get('[data-testid="swap-input-input-panel"]').invoke('val').as('inputAmount'); + + //Validate type in + cy.get('@inputAmount').should('eq', '1'); + + cy.get('[data-testid="swap-output-input-panel"]').invoke('val') + .then((outputAmount: any) => { + //reselect input asset + cy.get('[data-testid="swap__input__panel"]').within(() => { + cy.get('[data-testid="swap__token__select"]').click(); + }); + cy.get('[data-testid="token-search-input"]').type('ngnt'); + cy.get('[data-testid="currency__list__NGNT"]').click(); + //Input amount + cy.get('[data-testid="swap__output__panel"]').within(() => { + cy.get('.token-amount-input').type('{backspace}'); + cy.get('.token-amount-input').type('{backspace}'); + cy.get('.token-amount-input').type('1'); + }); + cy.wait(2500); + cy.screenshot() + cy.get('[data-testid="swap-input-input-panel"]').invoke('val').then((inputAmount: any)=>{ + const belowOutput = Math.floor(parseFloat(outputAmount) * 0.9); + const aboveOutput = Math.ceil(parseFloat(outputAmount) * 1.1); + expect(parseFloat(inputAmount)).within(belowOutput, aboveOutput) + }) + }) + + }) +}); // Navigation flow describe('Navigation flow', () => { it('should render the navbar', () => { diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx index 79a8dcfb..d5bf2f66 100644 --- a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx +++ b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx @@ -272,6 +272,7 @@ export default function SwapCurrencyInputPanel({ onUserInput={onUserInput} disabled={!chainAllowed || disabled || disableInput} $loading={loading} + data-testid={`${id}-input-panel`} /> )}