From 4cb133c0031ba15b7abc2c7a47387ae0a14de019 Mon Sep 17 00:00:00 2001 From: ltthienn <132639843+ltthienn@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:54:41 +0700 Subject: [PATCH] E2E | Limit order - Able to select token (#2294) QA-57 | Add limit order tests --- cypress/e2e/pages/limit-order.po.cy.ts | 24 ++++++ cypress/e2e/pages/swap-page.po.cy.ts | 20 +++-- cypress/e2e/selectors/selectors.cy.ts | 6 ++ cypress/e2e/specs/limit-order.e2e.cy.ts | 86 +++++++++++++++++++ cypress/e2e/specs/swap-page.e2e.cy.ts | 4 +- cypress/support/selectTokenCommands.ts | 12 +-- .../swapv2/LimitOrder/LimitOrderForm.tsx | 2 + src/pages/SwapV3/Tabs/LimitTab.tsx | 2 +- 8 files changed, 138 insertions(+), 18 deletions(-) create mode 100644 cypress/e2e/pages/limit-order.po.cy.ts create mode 100644 cypress/e2e/specs/limit-order.e2e.cy.ts diff --git a/cypress/e2e/pages/limit-order.po.cy.ts b/cypress/e2e/pages/limit-order.po.cy.ts new file mode 100644 index 0000000000..6b75549119 --- /dev/null +++ b/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 { + (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) { + cy.getContent(LimitOrderLocators.dropdownTokenSell, text) + }, + + getCurrentTokenBuy(text: myCallbackType) { + cy.getContent(LimitOrderLocators.dropdownTokenBuy, text) + }, +} diff --git a/cypress/e2e/pages/swap-page.po.cy.ts b/cypress/e2e/pages/swap-page.po.cy.ts index 31dc3d5fe6..a45936195a 100644 --- a/cypress/e2e/pages/swap-page.po.cy.ts +++ b/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 { (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) { + tokenSymbol.forEach(element => { + this.searchToken(element) + cy.wait(2000) + cy.addFavoriteToken() + }); } removeFavoriteToken(tokenSymbol: string) { diff --git a/cypress/e2e/selectors/selectors.cy.ts b/cypress/e2e/selectors/selectors.cy.ts index f3a85e1eb3..4451a4168f 100644 --- a/cypress/e2e/selectors/selectors.cy.ts +++ b/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]', diff --git a/cypress/e2e/specs/limit-order.e2e.cy.ts b/cypress/e2e/specs/limit-order.e2e.cy.ts new file mode 100644 index 0000000000..d77682cd85 --- /dev/null +++ b/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) + }) + }) + }) +}) \ No newline at end of file diff --git a/cypress/e2e/specs/swap-page.e2e.cy.ts b/cypress/e2e/specs/swap-page.e2e.cy.ts index 4c52d4e28b..a35d65057c 100644 --- a/cypress/e2e/specs/swap-page.e2e.cy.ts +++ b/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]]) }) diff --git a/cypress/support/selectTokenCommands.ts b/cypress/support/selectTokenCommands.ts index 098d334d3e..80d8eafaa3 100644 --- a/cypress/support/selectTokenCommands.ts +++ b/cypress/support/selectTokenCommands.ts @@ -10,8 +10,7 @@ declare global { interface Chainable { closeTutorialPopup(): Chainable searchToken(value: string): Chainable - selectTokenIn(): Chainable - selectTokenOut(): Chainable + selectToken(selector: string): Chainable selectTokenBySymbol(value: string): Chainable removeFavoriteToken(value: string): Chainable addFavoriteToken(): Chainable @@ -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) }) diff --git a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx index 56f32b4968..3cae177bfb 100644 --- a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx +++ b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx @@ -676,6 +676,7 @@ const LimitOrderForm = forwardRef(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(function LimitOrd estimatedUsd={estimateUSD.output} onFocus={trackingTouchInput} id="create-limit-order-input-tokenb" + dataTestId="limit-order-input-tokenb" onCurrencySelect={handleOutputSelect} positionMax="top" showCommonBases diff --git a/src/pages/SwapV3/Tabs/LimitTab.tsx b/src/pages/SwapV3/Tabs/LimitTab.tsx index f2b1c1b2b5..c46bd4b04c 100644 --- a/src/pages/SwapV3/Tabs/LimitTab.tsx +++ b/src/pages/SwapV3/Tabs/LimitTab.tsx @@ -45,7 +45,7 @@ export default function LimitTab({ onClick }: Props) { } return ( - + Limit{' '} {numberOfInsufficientFundOrders ? (