From 0bc5f2579bd00095510fb4adc27a4833887940cb Mon Sep 17 00:00:00 2001
From: Matias Poblete <matias.pobleteduran@gmail.com>
Date: Wed, 21 Aug 2024 16:44:42 -0400
Subject: [PATCH] =?UTF-8?q?=E2=9C=85Add=20tests=20to=20slippage=20configs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/flows.test.ts                     | 67 +++++++++++++++----
 .../Settings/MaxSlippageSettings/index.tsx    |  8 +--
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/cypress/e2e/flows.test.ts b/cypress/e2e/flows.test.ts
index c8826067..3e4625b7 100644
--- a/cypress/e2e/flows.test.ts
+++ b/cypress/e2e/flows.test.ts
@@ -133,19 +133,12 @@ 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();
-
+    cy.get('[data-testid="token-search-input"]').type('usdc');
+    cy.get('[data-testid="currency__list__USDC"]').click();
 
     //Input amount
     cy.get('[data-testid="swap__input__panel"]').within(() => {
@@ -168,8 +161,8 @@ describe('Input & output amount validation', () => {
       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();
+      cy.get('[data-testid="token-search-input"]').type('usdc');
+      cy.get('[data-testid="currency__list__USDC"]').click();
        //Input amount
       cy.get('[data-testid="swap__output__panel"]').within(() => {
         cy.get('.token-amount-input').type('{backspace}');
@@ -179,14 +172,62 @@ describe('Input & output amount validation', () => {
       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);
+        const belowOutput = Math.floor(parseFloat(outputAmount) * 0.5);
+        const aboveOutput = Math.ceil(parseFloat(outputAmount) * 1.5);
         expect(parseFloat(inputAmount)).within(belowOutput, aboveOutput)
       })
     })
 
   })
 });
+
+describe('Slippage tolerance config', ()=>{
+  it('should change slippage tolerance', ()=>{
+    cy.visit('/swap');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').click();
+    cy.get('[data-testid="slippage-input"]').type('1.05');
+    cy.get('[data-testid="max-slippage-settings"]').contains('1.05%');
+  })
+  it('Show display an alert if slippage is too high', ()=>{
+    cy.visit('/swap');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').click();
+    cy.get('[data-testid="slippage-input"]').type('10');
+    cy.get('[data-testid="max-slippage-settings"]').contains('10%');
+    cy.get('[data-testid="slippage-alert"]').should('exist');
+    cy.get('[data-testid="slippage-alert-too-high"]').should('exist');
+  })
+  it('Show display an alert if slippage is too low', ()=>{
+    cy.visit('/swap');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').click();
+    cy.get('[data-testid="slippage-input"]').type('0.01');
+    cy.get('[data-testid="max-slippage-settings"]').contains('0.01%');
+    cy.get('[data-testid="slippage-alert"]').should('exist');
+    cy.get('[data-testid="slippage-alert-too-low"]').should('exist');
+  })
+  it('should keep the slippage tolerance after closing the settings', ()=>{
+    cy.visit('/swap');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').click();
+    cy.get('[data-testid="slippage-input"]').type('1.05');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').should('not.exist');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').should('exist')
+    cy.get('[data-testid="max-slippage-settings"]').contains('1.05%');
+  })
+  it('Should set the slippage tolerance to auto when pressing "auto" button', ()=>{
+    cy.visit('/swap');
+    cy.get('[data-testid="open-settings-dialog-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').click();
+    cy.get('[data-testid="slippage-input"]').type('1.05');
+    cy.get('[data-testid="max-slippage-settings"]').contains('1.05%');
+    cy.get('[data-testid="slippage-auto-button"]').click();
+    cy.get('[data-testid="max-slippage-settings"]').contains('Auto');
+  })
+})
 // Navigation flow
 describe('Navigation flow', () => {
   it('should render the navbar', () => {
diff --git a/src/components/Settings/MaxSlippageSettings/index.tsx b/src/components/Settings/MaxSlippageSettings/index.tsx
index 286c9c0d..77facf7f 100644
--- a/src/components/Settings/MaxSlippageSettings/index.tsx
+++ b/src/components/Settings/MaxSlippageSettings/index.tsx
@@ -155,7 +155,7 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
             }}
             isActive={isAuto}
           >
-            <Typography color={theme.palette.primary.main} component="div">
+            <Typography color={theme.palette.primary.main} component="div" data-testid='slippage-auto-button'>
               Auto
             </Typography>
           </Option>
@@ -186,14 +186,14 @@ export default function MaxSlippageSettings({ autoSlippage }: { autoSlippage: nu
       </RowBetween>
       {tooLow || tooHigh ? (
         <RowBetween gap="md">
-          <Alert severity="warning">
+          <Alert severity="warning" data-testid='slippage-alert'>
             {tooLow ? (
-              <div>
+              <div data-testid='slippage-alert-too-low'>
                 Slippage below {MINIMUM_RECOMMENDED_SLIPPAGE.toFixed(2)}% may result in a failed
                 transaction
               </div>
             ) : (
-              <div>Your transaction may be frontrun and result in an unfavorable trade.</div>
+                <div data-testid='slippage-alert-too-high'>Your transaction may be frontrun and result in an unfavorable trade.</div>
             )}
           </Alert>
         </RowBetween>