QA-59 | E2E | Limit Oder - Add tests (#2314)

Add limit order tests
KyberNetwork · Oct 20, 2023 · f4c826b · f4c826b
1 parent 411361f
commit f4c826b
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 4 deletions.
diff --git a/cypress/e2e/pages/limit-order.po.cy.ts b/cypress/e2e/pages/limit-order.po.cy.ts
@@ -22,6 +22,10 @@ export const LimitOder = {
         cy.getContent(LimitOrderLocators.dropdownTokenBuy, text)
     },
 
+    setAmountIn(value: string) {
+        cy.get(LimitOrderLocators.txtTokenSellAmount).type(value)
+    },
+
     setSellingRate(text: string) {
         cy.get(LimitOrderLocators.txtSellingRate).click().type(text)
     },
@@ -30,5 +34,13 @@ export const LimitOder = {
         return cy.get(LimitOrderLocators.txtSellingRate).invoke('val').then(value => {
             return value
         })
+    },
+
+    getBalanceIn(text: myCallbackType<string>) {
+        cy.getContent(LimitOrderLocators.lblBalanceIn, text)
+    },
+
+    getInsufficientErrorMessage() {
+        return cy.get(LimitOrderLocators.lblErrorMessage)
     }
 }
diff --git a/cypress/e2e/selectors/selectors.cy.ts b/cypress/e2e/selectors/selectors.cy.ts
@@ -22,10 +22,13 @@ export const SwapPageLocators = {
 }
 
 export const LimitOrderLocators = {
+  txtTokenSellAmount: '[data-testid=limit-order-input-tokena] [data-testid=token-amount-input]',
   dropdownTokenSell: '[data-testid=limit-order-input-tokena] [data-testid=token-symbol-container]',
   dropdownTokenBuy: '[data-testid=limit-order-input-tokenb] [data-testid=token-symbol-container]',
   btnLimit: '[data-testid=limit-button]',
-  txtSellingRate: '[data-testid=input-selling-rate]'
+  txtSellingRate: '[data-testid=input-selling-rate]',
+  lblBalanceIn: '[data-testid=limit-order-input-tokena] [data-testid=balance]',
+  lblErrorMessage: '[data-testid=error-message]'
 }
 
 export const WalletLocators = {

diff --git a/cypress/e2e/specs/limit-order.e2e.cy.ts b/cypress/e2e/specs/limit-order.e2e.cy.ts
@@ -8,7 +8,7 @@ const tokenSymbols = TOKEN_SYMBOLS[NETWORK]
 const tokenCatalog = new TokenCatalog();
 
 
-describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
+describe(`Limit Order on ${NETWORK}`, { tags: TAG.regression }, () => {
     beforeEach(() => {
         SwapPage.open(DEFAULT_URL)
         SwapPage.goToLimitOrder()
@@ -88,4 +88,13 @@ describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
             })
         })
     })
+
+    describe('Messages', () => {
+        it('Verify error message when insufficient balance', () => {
+            LimitOder.getBalanceIn((text) => {
+                LimitOder.setAmountIn(String(Number(text) + 1))
+                LimitOder.getInsufficientErrorMessage().should('be.visible')
+            })
+        })
+    })
 })
diff --git a/cypress/e2e/specs/swap-page.e2e.cy.ts b/cypress/e2e/specs/swap-page.e2e.cy.ts
@@ -40,6 +40,7 @@ describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
       it('Should be removed tokenIn from favorite tokens list', () => {
          SwapPage.selectTokenIn().getFavoriteTokens((arr) => {
             tokenCatalog.removeFavoriteToken(arr[1])
+            cy.wait(2000)
             tokenCatalog.getFavoriteTokens((list) => {
                expect(list).not.to.include.members([arr[1]])
             })
@@ -56,6 +57,7 @@ describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
       it('Should be removed tokenOut from favorite tokens list', () => {
          SwapPage.selectTokenOut().getFavoriteTokens((arr) => {
             tokenCatalog.removeFavoriteToken(arr[2])
+            cy.wait(2000)
             tokenCatalog.getFavoriteTokens((list) => {
                expect(list).not.to.include.members([arr[2]])
             })

diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -307,7 +307,7 @@ export default function CurrencyInputPanel({
               )}
               <Flex onClick={onMax ?? undefined} style={{ cursor: onMax ? 'pointer' : undefined }} alignItems="center">
                 <Wallet color={theme.subText} />
-                <Text fontWeight={500} color={theme.subText} marginLeft="4px">
+                <Text fontWeight={500} color={theme.subText} marginLeft="4px" data-testid="balance">
                   {customBalanceText || selectedCurrencyBalance?.toSignificant(10) || balanceRef.current || 0}
                 </Text>
               </Flex>
@@ -319,6 +319,7 @@ export default function CurrencyInputPanel({
                 <NumericalInput
                   error={error}
                   className="token-amount-input"
+                  data-testid="token-amount-input"
                   value={value}
                   disabled={disabledInput}
                   maxLength={maxLength}

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -35,6 +35,7 @@ interface TooltipProps extends Omit<PopoverProps, 'content'> {
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>
   children?: React.ReactNode
+  dataTestId?: string
 }
 
 export default function Tooltip({
@@ -45,6 +46,7 @@ export default function Tooltip({
   onMouseEnter,
   onMouseLeave,
   show,
+  dataTestId,
   ...rest
 }: TooltipProps) {
   return (
@@ -57,6 +59,7 @@ export default function Tooltip({
             size={size}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
+            data-testid={dataTestId}
           >
             {text}
           </TooltipContainer>

diff --git a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx
@@ -661,7 +661,14 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
   return (
     <>
       <Flex flexDirection={'column'} style={{ gap: '1rem' }}>
-        <Tooltip text={inputError} show={!!inputError} placement="top" style={styleTooltip} width="fit-content">
+        <Tooltip
+          text={inputError}
+          show={!!inputError}
+          placement="top"
+          style={styleTooltip}
+          width="fit-content"
+          dataTestId="error-message"
+        >
           <CurrencyInputPanel
             error={!!inputError}
             value={inputAmount}