E2E | Limit order - Able to select token

cypress/e2e/pages/limit-order.po.cy.ts

@@ -0,0 +1,24 @@
+import { LimitOrderLocators } from "../selectors/selectors.cy"
+import { TokenCatalog } from "./swap-page.po.cy"
+export interface myCallbackType<T> {
+    (myArgument: T): void
+}
+export const LimitOder = {
+
+    selectTokenSell(): TokenCatalog {
+        cy.selectToken(LimitOrderLocators.dropdownTokenSell)
+        return new TokenCatalog()
+    },
+    selectTokenBuy(): TokenCatalog {
+        cy.selectToken(LimitOrderLocators.dropdownTokenBuy)
+        return new TokenCatalog()
+    },
+
+    getCurrentTokenSell(text: myCallbackType<string>) {
+        cy.getContent(LimitOrderLocators.dropdownTokenSell, text)
+    },
+
+    getCurrentTokenBuy(text: myCallbackType<string>) {
+        cy.getContent(LimitOrderLocators.dropdownTokenBuy, text)
+    },
+}

cypress/e2e/pages/swap-page.po.cy.ts

@@ -1,4 +1,4 @@
-import { HeaderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
+import { HeaderLocators, LimitOrderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
 
 export interface myCallbackType<T> {
     (myArgument: T): void
@@ -12,11 +12,11 @@ export const SwapPage = {
     },
 
     selectTokenIn(): TokenCatalog {
-        cy.selectTokenIn()
+        cy.selectToken(SwapPageLocators.dropdownTokenIn)
         return new TokenCatalog()
     },
     selectTokenOut(): TokenCatalog {
-        cy.selectTokenOut()
+        cy.selectToken(SwapPageLocators.dropdownTokenOut)
         return new TokenCatalog()
     },
 
@@ -37,6 +37,10 @@ export const SwapPage = {
         cy.get(WalletLocators.statusConnected, { timeout: 10000 }).should('be.visible')
     },
 
+    goToLimitOrder() {
+        cy.get(LimitOrderLocators.btnLimit).click()
+    },
+
     goToFarmPage() {
         cy.get(HeaderLocators.dropdownEarn).click({ force: true })
         cy.get(HeaderLocators.lblFarms).click({ force: true })
@@ -78,10 +82,12 @@ export class TokenCatalog {
         cy.selectTokenBySymbol(tokenSymbol)
     }
 
-    addFavoriteToken(tokenSymbol: string) {
-        this.searchToken(tokenSymbol)
-        cy.wait(2000)
-        cy.addFavoriteToken()
+    addFavoriteToken(tokenSymbol: Array<string>) {
+        tokenSymbol.forEach(element => {
+            this.searchToken(element)
+            cy.wait(2000)
+            cy.addFavoriteToken()
+        });
     }
 
     removeFavoriteToken(tokenSymbol: string) {

cypress/e2e/selectors/selectors.cy.ts

@@ -21,6 +21,12 @@ export const SwapPageLocators = {
   btnSkipTutorial: '[data-testid=button-skip-tutorial]',
 }
 
+export const LimitOrderLocators = {
+  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]'
+}
+
 export const WalletLocators = {
   btnConnectWallet: '[data-testid=button-connect-wallet]',
   btnMetaMask: '[data-testid=connect-METAMASK]',

cypress/e2e/specs/limit-order.e2e.cy.ts

@@ -0,0 +1,86 @@
+import { LimitOder } from "../pages/limit-order.po.cy"
+import { SwapPage, TokenCatalog } from "../pages/swap-page.po.cy"
+import { DEFAULT_URL, NETWORK, NORESULTS_TEXT, NOTOKENS_TEXT, TAG, TOKEN_SYMBOLS, UNWHITELIST_SYMBOL_TOKENS, UNWHITELIST_TOKENS } from "../selectors/constants.cy"
+
+const unWhitelistTokens = UNWHITELIST_TOKENS[NETWORK]
+const tokenSymbols = TOKEN_SYMBOLS[NETWORK]
+
+const arrAddress = [unWhitelistTokens[0].address, unWhitelistTokens[1].address, unWhitelistTokens[2].address]
+const arrSymbol = [unWhitelistTokens[0].symbol, unWhitelistTokens[1].symbol, unWhitelistTokens[2].symbol]
+
+
+const tokenCatalog = new TokenCatalog();
+
+
+describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
+    beforeEach(() => {
+        SwapPage.open(DEFAULT_URL)
+        SwapPage.goToLimitOrder()
+    })
+
+    describe('Add/remove/select token with favorite tokens list', () => {
+        it('Should be added, selected and removed favorite token sell', () => {
+            LimitOder.selectTokenSell().addFavoriteToken([tokenSymbols[0], tokenSymbols[1]])
+            tokenCatalog.getFavoriteTokens((list) => {
+                expect(list).to.include.members([tokenSymbols[1]])
+            })
+
+            tokenCatalog.selectFavoriteToken(tokenSymbols[1])
+            LimitOder.getCurrentTokenSell((text) => {
+                expect(text).to.equal(tokenSymbols[1])
+            })
+            LimitOder.selectTokenSell()
+            tokenCatalog.removeFavoriteToken(tokenSymbols[0])
+            tokenCatalog.getFavoriteTokens((list) => {
+                expect(list).not.to.include.members([tokenSymbols[0]])
+            })
+        })
+
+        it('Should be added, selected and removed favorite token buy', () => {
+            LimitOder.selectTokenBuy().addFavoriteToken([tokenSymbols[0], tokenSymbols[1]])
+            tokenCatalog.getFavoriteTokens((list) => {
+                expect(list).to.include.members([tokenSymbols[1]])
+            })
+
+            tokenCatalog.selectFavoriteToken(tokenSymbols[1])
+            LimitOder.getCurrentTokenBuy((text) => {
+                expect(text).to.equal(tokenSymbols[1])
+            })
+            LimitOder.selectTokenBuy()
+            tokenCatalog.removeFavoriteToken(tokenSymbols[0])
+            tokenCatalog.getFavoriteTokens((list) => {
+                expect(list).not.to.include.members([tokenSymbols[0]])
+            })
+        })
+    })
+
+    describe('Select token by symbol', () => {
+        it('Should be selected token sell by symbol successfully', () => {
+            LimitOder.selectTokenSell().selectTokenBySymbol(tokenSymbols[0])
+            LimitOder.getCurrentTokenSell((text) => {
+                expect(text).to.equal(tokenSymbols[0])
+            })
+        })
+
+        it('Should be selected token buy by symbol successfully', () => {
+            LimitOder.selectTokenBuy().selectTokenBySymbol(tokenSymbols[1])
+            LimitOder.getCurrentTokenBuy((text) => {
+                expect(text).to.equal(tokenSymbols[1])
+            })
+        })
+
+        it('Should be unselected tokenIn not exist in whitelist', () => {
+            LimitOder.selectTokenSell().searchToken(UNWHITELIST_SYMBOL_TOKENS[0])
+            tokenCatalog.getNoResultsFound((text) => {
+                expect(text).to.equal(NORESULTS_TEXT)
+            })
+        })
+
+        it('Should be unselected tokenOut not exist in whitelist', () => {
+            LimitOder.selectTokenBuy().searchToken(UNWHITELIST_SYMBOL_TOKENS[0])
+            tokenCatalog.getNoResultsFound((text) => {
+                expect(text).to.equal(NORESULTS_TEXT)
+            })
+        })
+    })
+})

cypress/e2e/specs/swap-page.e2e.cy.ts

@@ -47,7 +47,7 @@ describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
       })
 
       it('Should be added tokenIn to favorite tokens list', () => {
-         SwapPage.selectTokenIn().addFavoriteToken(tokenSymbols[0])
+         SwapPage.selectTokenIn().addFavoriteToken([tokenSymbols[0]])
          tokenCatalog.getFavoriteTokens((list) => {
             expect(list).to.include.members([tokenSymbols[0]])
          })
@@ -63,7 +63,7 @@ describe(`Token Catalog on ${NETWORK}`, { tags: TAG.regression }, () => {
       })
 
       it('Should be added tokenOut to favorite tokens list', () => {
-         SwapPage.selectTokenOut().addFavoriteToken(tokenSymbols[0])
+         SwapPage.selectTokenOut().addFavoriteToken([tokenSymbols[0]])
          tokenCatalog.getFavoriteTokens((list) => {
             expect(list).to.include.members([tokenSymbols[0]])
          })

cypress/support/selectTokenCommands.ts

@@ -10,8 +10,7 @@ declare global {
       interface Chainable {
          closeTutorialPopup(): Chainable<void>
          searchToken(value: string): Chainable<void>
-         selectTokenIn(): Chainable<void>
-         selectTokenOut(): Chainable<void>
+         selectToken(selector: string): Chainable<void>
          selectTokenBySymbol(value: string): Chainable<void>
          removeFavoriteToken(value: string): Chainable<void>
          addFavoriteToken(): Chainable<void>
@@ -30,15 +29,12 @@ Cypress.Commands.add('closeTutorialPopup', () => {
    cy.get(SwapPageLocators.btnSkipTutorial, { timeout: 30000 }).should('be.visible').click()
 })
 
-Cypress.Commands.add('selectTokenIn', () => {
-   cy.get(SwapPageLocators.dropdownTokenIn, { timeout: 30000 }).should('be.visible').click()
-})
-
-Cypress.Commands.add('selectTokenOut', () => {
-   cy.get(SwapPageLocators.dropdownTokenOut, { timeout: 30000 }).should('be.visible').click()
+Cypress.Commands.add('selectToken', (selector: string) => {
+   cy.get(selector, { timeout: 30000 }).should('be.visible').click()
 })
 
 Cypress.Commands.add('searchToken', (value) => {
+   cy.get(TokenCatalogLocators.txtToken).clear()
    cy.get(TokenCatalogLocators.txtToken).should('be.visible').type(value)
 })
 

src/components/swapv2/LimitOrder/LimitOrderForm.tsx

@@ -676,6 +676,7 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
             currency={currencyIn}
             showCommonBases
             id="create-limit-order-input-tokena"
+            dataTestId="limit-order-input-tokena"
             maxCurrencySymbolLength={6}
             filterWrap
             onClickSelect={trackingTouchSelectToken}
@@ -703,6 +704,7 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
             estimatedUsd={estimateUSD.output}
             onFocus={trackingTouchInput}
             id="create-limit-order-input-tokenb"
+            dataTestId="limit-order-input-tokenb"
             onCurrencySelect={handleOutputSelect}
             positionMax="top"
             showCommonBases

src/pages/SwapV3/Tabs/LimitTab.tsx

@@ -45,7 +45,7 @@ export default function LimitTab({ onClick }: Props) {
   }
 
   return (
-    <Tab id="limit-button" onClick={onClick} isActive={isLimitPage}>
+    <Tab id="limit-button" data-testid="limit-button" onClick={onClick} isActive={isLimitPage}>
       <Text fontSize={20} fontWeight={500}>
         <Trans>Limit</Trans>{' '}
         {numberOfInsufficientFundOrders ? (