QA-60 | E2E | Cross-chain - Add e2e tests (#2336)

.github/workflows/schedule.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        network: ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB']
+        network: ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB Chain']
     steps:
       - name: Trigger Code Checkout
         uses: actions/checkout@v3

cypress/e2e/pages/cross-chain.po.cy.ts

@@ -0,0 +1,50 @@
+import { NETWORK_LIST } from "../selectors/constants.cy"
+import { CrossChainLocators, NetworkLocators } from "../selectors/selectors.cy"
+
+export const CrossChain = {
+
+    closeUnderstandPopup() {
+        cy.get(CrossChainLocators.btnUnderstand).click()
+    },
+
+    selectNetworkIn(networkName: string) {
+        cy.get(CrossChainLocators.btnNetworkIn).click()
+        cy.get(NetworkLocators.btnNetwork).contains(networkName).click({ force: true })
+
+    },
+
+    selectNetworkOut(networkName: string) {
+        cy.get(CrossChainLocators.btnNetworkOut).click()
+        cy.get(NetworkLocators.btnNetwork).contains(networkName).click({ force: true })
+    },
+
+    changeNetwork(oldNetwork: string[]) {
+        let random = 0
+        do {
+            random = Math.floor(Math.random() * NETWORK_LIST.length)
+        } while (oldNetwork.includes(NETWORK_LIST[random]) === true)
+
+        return NETWORK_LIST[random]
+    },
+
+    checkLoadedPage() {
+        return cy.get(CrossChainLocators.rechartsSurface, { timeout: 20000 }).should(() => { }).then($obj => {
+            if ($obj.length > 0) {
+                return true
+            }
+            return false
+        })
+    },
+
+    getCurrentNetworkIn() {
+        return cy.get(CrossChainLocators.btnNetworkIn).invoke('text').then(network => {
+            return network
+        })
+    },
+
+    getCurrentNetworkOut() {
+        return cy.get(CrossChainLocators.btnNetworkOut).invoke('text').then(network => {
+            return network
+        })
+    },
+}

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

@@ -5,6 +5,19 @@ export interface myCallbackType<T> {
 }
 export const LimitOder = {
 
+    checkGetStartedDisplay() {
+        return cy.get(LimitOrderLocators.btnGetStarted, { timeout: 10000 }).should(() => { }).then($obj => {
+            if ($obj.length > 0) {
+                return true
+            }
+            return false
+        })
+    },
+
+    clickGetStarted() {
+        cy.get(LimitOrderLocators.btnGetStarted, { timeout: 10000 }).click({ force: true })
+    },
+
     selectTokenSell(): TokenCatalog {
         cy.selectToken(LimitOrderLocators.dropdownTokenSell)
         return new TokenCatalog()

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

@@ -1,4 +1,4 @@
-import { HeaderLocators, LimitOrderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
+import { CrossChainLocators, HeaderLocators, LimitOrderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
 
 export interface myCallbackType<T> {
     (myArgument: T): void
@@ -41,6 +41,10 @@ export const SwapPage = {
         cy.get(LimitOrderLocators.btnLimit).click()
     },
 
+    goToCrossChain() {
+        cy.get(CrossChainLocators.btnCrossChain).click()
+    },
+
     goToFarmPage() {
         cy.get(HeaderLocators.dropdownEarn).click({ force: true })
         cy.get(HeaderLocators.lblFarms).click({ force: true })

cypress/e2e/selectors/constants.cy.ts

@@ -19,6 +19,8 @@ export const TOKEN_SYMBOLS = {
     'BNB': ['RICE', 'DAI', 'USDT', 'USDC', 'MAI']
 }
 
+export const NETWORK_LIST = ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB Chain', 'Polygon PoS', 'Fantom', 'Linea', 'Base']
+
 export const UNWHITELIST_TOKENS = {
     "Ethereum":
         [

cypress/e2e/selectors/selectors.cy.ts

@@ -28,7 +28,16 @@ export const LimitOrderLocators = {
   btnLimit: '[data-testid=limit-button]',
   txtSellingRate: '[data-testid=input-selling-rate]',
   lblBalanceIn: '[data-testid=limit-order-input-tokena] [data-testid=balance]',
-  lblErrorMessage: '[data-testid=error-message]'
+  lblErrorMessage: '[data-testid=error-message]',
+  btnGetStarted: '[data-testid=get-started-button]'
+}
+
+export const CrossChainLocators = {
+  btnCrossChain: '[data-testid=cross-chain-tab]',
+  btnNetworkIn: '[data-testid=swap-currency-input] [data-testid=network-button]',
+  btnNetworkOut: '[data-testid=swap-currency-output] [data-testid=network-button]',
+  btnUnderstand: '[data-testid=understand-button]',
+  rechartsSurface: '.recharts-surface' //it's in the library so don't use data-testid
 }
 
 export const WalletLocators = {
@@ -40,7 +49,7 @@ export const WalletLocators = {
 
 export const NetworkLocators = {
   btnSelectNetwork: '[data-testid=select-network]',
-  btnNetwork: '[data-testid=network-button]',
+  btnNetwork: '[data-testid=network-list]',
 }
 
 export const HeaderLocators = {

cypress/e2e/specs/connect-wallet.e2e.cy.ts

@@ -11,13 +11,13 @@ describe('Metamask Extension tests', { tags: TAG.regression }, () => {
         SwapPage.connectWallet()
     })
 
-    it.skip('Redirects to swap page when a user has already connected a wallet', () => {
+    it('Redirects to swap page when a user has already connected a wallet', () => {
         cy.acceptMetamaskAccess()
         SwapPage.getStatusConnectedWallet()
         cy.url().should('include', '/swap')
     })
 
-    it.skip('Should approve permission to switch network', () => {
+    it('Should approve permission to switch network', () => {
         if (NETWORK !== DEFAULT_NETWORK) {
             SwapPage.getStatusConnectedWallet()
             wallet.selectNetwork(NETWORK)

cypress/e2e/specs/cross-chain.e2e.cy.ts

@@ -0,0 +1,37 @@
+import { CrossChain } from "../pages/cross-chain.po.cy"
+import { SwapPage } from "../pages/swap-page.po.cy"
+import { DEFAULT_URL, NETWORK, TAG } from "../selectors/constants.cy"
+
+
+describe(`Cross-chain on ${NETWORK}`, { tags: TAG.regression }, () => {
+    beforeEach(() => {
+        SwapPage.open(DEFAULT_URL)
+        SwapPage.goToCrossChain()
+        CrossChain.checkLoadedPage().then((checked) => {
+            if (checked === true) {
+                CrossChain.closeUnderstandPopup()
+            }
+        })
+    })
+
+    describe('Select network', () => {
+        it('The network should be changed successfully', () => {
+            const networkIn = CrossChain.changeNetwork([NETWORK])
+            CrossChain.selectNetworkIn(networkIn)
+            CrossChain.getCurrentNetworkIn().then((currentNetworkIn) => {
+                expect(currentNetworkIn).to.equal(networkIn)
+            })
+
+            CrossChain.getCurrentNetworkOut().then((currentNetworkOut) => {
+                const networkOut = CrossChain.changeNetwork([networkIn, currentNetworkOut])
+                cy.wait(1000)
+                CrossChain.selectNetworkOut(networkOut)
+                CrossChain.getCurrentNetworkOut().then((currentNetworkOut) => {
+                    expect(currentNetworkOut).to.equal(networkOut)
+                })
+
+            })
+        })
+
+    })
+})

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

@@ -4,14 +4,17 @@ import { DEFAULT_URL, NETWORK, NORESULTS_TEXT, NOTOKENS_TEXT, TAG, TOKEN_SYMBOLS
 
 const tokenSymbols = TOKEN_SYMBOLS[NETWORK]
 
-
 const tokenCatalog = new TokenCatalog();
 
-
 describe(`Limit Order on ${NETWORK}`, { tags: TAG.regression }, () => {
     beforeEach(() => {
         SwapPage.open(DEFAULT_URL)
         SwapPage.goToLimitOrder()
+        LimitOder.checkGetStartedDisplay().then((checked) => {
+            if (checked === true) {
+                LimitOder.clickGetStarted()
+            }
+        })
     })
 
     describe('Add/remove/select token with favorite tokens list', () => {

cypress/support/connectWalletCommands.ts

@@ -12,6 +12,7 @@ declare global {
 }
 
 Cypress.Commands.add('connectWallet', () => {
-  cy.get(WalletLocators.chkAcceptTerm).click()
+  // feature changed => temporary comment
+  // cy.get(WalletLocators.chkAcceptTerm).click()
   cy.get(WalletLocators.btnMetaMask).click()
 })

src/components/CurrencyInputPanel/CurrencyInputPanelBridge.tsx

@@ -40,6 +40,7 @@ interface CurrencyInputPanelBridgeProps {
   usdValue?: string
   isCrossChain?: boolean
   tooltipNotSupportChain?: string
+  dataTestId?: string
 }
 
 const noop = () => {
@@ -80,6 +81,7 @@ export default function CurrencyInputPanelBridge({
   usdValue,
   isCrossChain,
   tooltipNotSupportChain,
+  dataTestId,
 }: CurrencyInputPanelBridgeProps) {
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
@@ -111,7 +113,7 @@ export default function CurrencyInputPanelBridge({
 
   return (
     <div style={{ width: '100%' }}>
-      <InputPanel id={id}>
+      <InputPanel id={id} data-testid={dataTestId}>
         <Container hideInput={false} selected={false} error={error}>
           <Flex justifyContent="space-between" fontSize="12px" marginBottom="12px" alignItems="center">
             <SelectNetwork

src/components/Header/web3/NetworkModal/index.tsx

@@ -290,6 +290,7 @@ export default function NetworkModal({
               }
             }}
             id={CHAINS_DROPZONE_ID}
+            data-testid="network-list"
             style={{ position: 'relative', minHeight: '50px' }}
           >
             <DropzoneOverlay show={dropIdDraggingOver === CHAINS_DROPZONE_ID} text={t`Remove from favorite`} />

src/components/swapv2/LimitOrder/Tutorial.tsx

@@ -104,7 +104,7 @@ export default function Tutorial({ onClose }: { onClose: () => void }) {
             Learn more about our limit orders <ExternalLink href={DOCS_LINKS.USER_GUIDE}>here</ExternalLink>.
           </Trans>
         </Text>
-        <ButtonPrimary height="40px" width={'100%'} onClick={onGetStart}>
+        <ButtonPrimary height="40px" width={'100%'} onClick={onGetStart} data-testid="get-started-button">
           <Trans>Get Started</Trans>
         </ButtonPrimary>
       </Column>

src/pages/Bridge/Disclaimer.tsx

@@ -91,7 +91,7 @@ export function DisclaimerCrossChain() {
             liability for any losses incurred.
           </Trans>
         </TextWrapper>
-        <ButtonWarning style={{ marginTop: 20 }} onClick={handleClickUnderstand}>
+        <ButtonWarning style={{ marginTop: 20 }} onClick={handleClickUnderstand} data-testid="understand-button">
           <Trans>I Understand</Trans>
         </ButtonWarning>
       </Container>

src/pages/Bridge/SelectNetwork.tsx

@@ -56,7 +56,7 @@ function Web3Network({
   const { name } = selectedChainId ? NETWORKS_INFO[selectedChainId] : { name: t`Select a network` }
   return (
     <>
-      <NetworkSwitchContainer onClick={() => chainIds.length && toggleNetworkModal()}>
+      <NetworkSwitchContainer data-testid="network-button" onClick={() => chainIds.length && toggleNetworkModal()}>
         {selectedChainId && (
           <NetworkLogo chainId={selectedChainId} style={{ width: 20, height: 20, marginRight: '8px' }} />
         )}

src/pages/CrossChain/SwapForm/index.tsx

@@ -313,6 +313,7 @@ export default function SwapForm() {
             onMax={handleMaxInput}
             onCurrencySelect={onCurrencySelect}
             id="swap-currency-input"
+            dataTestId="swap-currency-input"
             usdValue={amountUsdIn ?? ''}
           />
         </Flex>
@@ -342,6 +343,7 @@ export default function SwapForm() {
             }
             onCurrencySelect={onCurrencySelectDest}
             id="swap-currency-output"
+            dataTestId="swap-currency-output"
             usdValue={amountUsdOut ?? ''}
           />
         </div>

src/pages/SwapV3/Tabs/index.tsx

@@ -59,7 +59,7 @@ export const Tab = styled(ButtonEmpty)<{ isActive: boolean }>`
     margin-right: 0;
   }
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`  
+  ${({ theme }) => theme.mediaWidth.upToSmall`
       padding: 0px 0.75rem;
   `}
 `
@@ -104,7 +104,7 @@ export default function Tabs({ activeTab }: Props) {
         </Tab>
         {isSupportLimitOrder(chainId) && <LimitTab onClick={() => onClickTab(TAB.LIMIT)} />}
         {CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && (
-          <Tab onClick={() => onClickTab(TAB.CROSS_CHAIN)} isActive={isCrossChainPage}>
+          <Tab onClick={() => onClickTab(TAB.CROSS_CHAIN)} isActive={isCrossChainPage} data-testid="cross-chain-tab">
             <Text fontSize={20} fontWeight={500}>
               <Trans>Cross-Chain</Trans>
             </Text>