Tests: Add assets tests (#5053)

Author: mike10ca

apps/web/cypress/e2e/pages/assets.pages.js

@@ -2,6 +2,9 @@ import * as main from './main.page'
 import * as addressbook from '../pages/address_book.page'
 import * as createTx from '../pages/create_tx.pages'
 import { tableRow } from '../pages/address_book.page'
+import { assetsSwapBtn } from '../pages/swaps.pages'
+import { nftsRow } from '../pages/nfts.pages'
+
 
 let etherscanLinkSepolia = 'a[aria-label="View on sepolia.etherscan.io"]'
 export const balanceSingleRow = '[aria-labelledby="tableTitle"] > tbody tr'
@@ -15,6 +18,7 @@ const paginationPageList = 'ul[role="listbox"]'
 const currencyDropDown = 'div[id="currency"]'
 export const tokenListTable = 'table[aria-labelledby="tableTitle"]'
 const tokenListDropdown = 'div[id="tokenlist-select"]'
+export const tablePaginationContainer = '[data-testid="table-pagination"]'
 
 const hiddenTokenSaveBtn = 'span[data-track="assets: Save hide dialog"]'
 const hiddenTokenCancelBtn = 'span[data-track="assets: Cancel hide dialog"]'
@@ -25,6 +29,7 @@ const currencyItem = '[data-testid="currency-item"]'
 const tokenAmountFld = '[data-testid="token-amount-field"]'
 const tokenBalance = '[data-testid="token-balance"]'
 const tokenItem = '[data-testid="token-item"]'
+const sendBtn = '[data-testid="send-button"]'
 
 const hideTokenDefaultString = 'Hide tokens'
 const assetNameSortBtnStr = 'Asset'
@@ -110,6 +115,41 @@ export const currentcyGnosisFormat = '< 0.00001 GNO'
 export const currencyOx = /^0x$/
 export const currentcyOxFormat = '1.003 ZRX'
 
+export function checkNftAddressFormat() {
+  cy.get(nftsRow).each(($el) => {
+    cy.wrap($el)
+      .invoke('text')
+      .should('match', /0x[a-fA-F0-9]{4}\.\.\.[a-fA-F0-9]{4}/);
+  });
+}
+
+export function checkNftCopyIconAndLink() {
+  cy.get(nftsRow).each(($el) => {
+    cy.wrap($el)
+      .within(() => {
+        cy.get(createTx.copyIcon, { timeout: 5000 })
+          .should('exist');
+      });
+    cy.wrap($el)
+      .within(() => {
+        cy.get(createTx.explorerBtn, { timeout: 5000 })
+          .should('exist');
+      });
+  });
+}
+
+export function showSendBtn() {
+  return cy.get(sendBtn)
+    .invoke('css', 'opacity', '1')
+    .should('have.css', 'opacity', '1');
+}
+
+export function showSwapBtn() {
+  return cy.get(assetsSwapBtn)
+    .invoke('css', 'opacity', '1')
+    .should('have.css', 'opacity', '1');
+}
+
 export function enterAmount(amount) {
   cy.get(tokenAmountFld).find('input').clear().type(amount)
 }
@@ -166,13 +206,6 @@ export function clickOnExecuteBtn(index) {
     })
 }
 
-export function showSendBtn(index) {
-  cy.get('button')
-    .contains(sendBtnStr)
-    .then((elements) => {
-      cy.wrap(elements[index]).invoke('css', 'opacity', 100).trigger('mouseover', { force: true })
-    })
-}
 
 export function VerifySendButtonIsDisabled() {
   cy.get('button').contains(sendBtnStr).should('be.disabled')
@@ -234,6 +267,14 @@ export function checkTokenCounter(value) {
     })
 }
 
+export function checkNFTCounter(value) {
+  cy.get(hiddenTokenIcon)
+    .parent()
+    .within(() => {
+      cy.get('p').should('include.text', value)
+    })
+}
+
 export function checkHiddenTokenBtnCounter(value) {
   cy.get(hiddeTokensBtn).within(() => {
     cy.get('p').should('include.text', value)

apps/web/cypress/e2e/pages/create_tx.pages.js

@@ -18,7 +18,8 @@ export const relayExecMethod = '[data-testid="relay-execution-method"]'
 export const payNowExecMethod = '[data-testid="pay-now-execution-method"]'
 export const addToBatchBtn = '[data-track="batching: Add to batch"]'
 const accordionDetails = '[data-testid="accordion-details"]'
-const copyIcon = '[data-testid="copy-btn-icon"]'
+export const copyIcon = '[data-testid="copy-btn-icon"]'
+export const explorerBtn = '[data-testid="explorer-btn"]'
 const transactionSideList = '[data-testid="transaction-actions-list"]'
 const confirmationVisibilityBtn = '[data-testid="confirmation-visibility-btn"]'
 const expandAllBtn = '[data-testid="expande-all-btn"]'

apps/web/cypress/e2e/pages/nfts.pages.js

@@ -7,10 +7,11 @@ const nftModal = modal.modal
 
 const nftModalCloseBtn = main.modalDialogCloseBtn
 const recipientInput = 'input[name="recipient"]'
-const nftsRow = '[data-testid^="nfts-table-row"]'
+export const nftsRow = '[data-testid^="nfts-table-row"]'
 const inactiveNftIcon = '[data-testid="nft-icon-border"]'
 const activeNftIcon = '[data-testid="nft-icon-primary"]'
 const nftCheckBox = (index) => `[data-testid="nft-checkbox-${index}"] > input`
+const selectAllNFTsCheckbox = 'span[title="Select all"] > input'
 const activeSendNFTBtn = '[data-testid="nft-send-btn-false"]'
 const disabledSendNFTBtn = '[data-testid="nft-send-btn-true"]'
 const modalTitle = '[data-testid="modal-title"]'
@@ -105,6 +106,14 @@ export function selectNFTs(numberOfNFTs) {
     cy.get(nftCheckBox(i)).click()
     cy.contains(`${i} NFT${i > 1 ? 's' : ''} selected`)
   }
+  checkSelectedNFTsNumberIs(numberOfNFTs)
+}
+
+export function selectAllNFTs() {
+  cy.get(selectAllNFTsCheckbox).click()
+}
+
+export function checkSelectedNFTsNumberIs(numberOfNFTs) {
   cy.contains('button', `Send ${numberOfNFTs} NFT${numberOfNFTs > 1 ? 's' : ''}`)
 }
 

apps/web/cypress/e2e/pages/swaps.pages.js

@@ -142,8 +142,12 @@ export const swapTxs = {
 export const tokenBlockLabels = {
   sell: 'Sell',
   buy: 'Buy exactly',
+}
 
+export function verifySwapBtnIsVisible() {
+  cy.get(assetsSwapBtn).should('be.visible')
 }
+
 export function checkInputCurrencyPreviewValue(value) {
   cy.get(inputCurrencyPreview).should('contain.text', value)
 }

apps/web/cypress/e2e/regression/assets.cy.js

@@ -30,7 +30,7 @@ describe('Assets tests', () => {
     assets.clickOnSendBtn(0)
   })
 
-  it('[SMOKE] Verify that Token list dropdown down options show/hide spam tokens', () => {
+  it('Verify that Token list dropdown shows options "Default tokens" and "All tokens"', () => {
     let spamTokens = [
       assets.currencyAave,
       assets.currencyTestTokenA,
@@ -40,7 +40,10 @@ describe('Assets tests', () => {
       assets.currencyDaiCap,
     ]
 
+    assets.selectTokenList(assets.tokenListOptions.default)
+    main.verifyValuesExist(assets.tokenListTable, [constants.tokenNames.sepoliaEther])
     main.verifyValuesDoNotExist(assets.tokenListTable, spamTokens)
+
     assets.selectTokenList(assets.tokenListOptions.allTokens)
     spamTokens.push(constants.tokenNames.sepoliaEther)
     main.verifyValuesExist(assets.tokenListTable, spamTokens)

apps/web/cypress/e2e/regression/assets_2.cy.js

@@ -0,0 +1,84 @@
+import * as constants from '../../support/constants.js'
+import * as assets from '../pages/assets.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as main from '../pages/main.page.js'
+import * as navigation from '../pages/navigation.page'
+import * as nfts from '../pages/nfts.pages.js'
+import { clickOnAssetSwapBtn } from "../pages/swaps.pages.js";
+
+let staticSafes = []
+
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_1_PRIVATE_KEY
+const signer2 = walletCredentials.OWNER_4_PRIVATE_KEY
+
+describe('Assets 2 tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+
+  it('Verify no pagination shows at the bottom if there are less than 25 rows', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_2)
+    let spamTokens = [
+      assets.currencyAave,
+      assets.currencyTestTokenA,
+      assets.currencyTestTokenB,
+      assets.currencyUSDC,
+      assets.currencyLink,
+      assets.currencyDaiCap,
+    ]
+
+    assets.selectTokenList(assets.tokenListOptions.allTokens)
+    main.verifyValuesExist(assets.tokenListTable, spamTokens)
+    main.verifyElementsCount(assets.tablePaginationContainer, 0)
+  })
+
+  it('Verify Proposers have the Send and Swap buttons enabled', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_31)
+    wallet.connectSigner(signer)
+    assets.selectTokenList(assets.tokenListOptions.default)
+    main.verifyValuesExist(assets.tokenListTable, [constants.tokenNames.sepoliaEther])
+    assets.showSendBtn().should('be.enabled')
+    assets.showSwapBtn().should('be.enabled')
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+  })
+
+  it('Verify that Send and Swap buttons are enabled for spending limit users', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_8)
+    wallet.connectSigner(signer2)
+    assets.selectTokenList(assets.tokenListOptions.default)
+    main.verifyValuesExist(assets.tokenListTable, [constants.tokenNames.sepoliaEther])
+    assets.showSendBtn().should('be.enabled')
+    assets.showSwapBtn().should('be.enabled')
+    navigation.clickOnWalletExpandMoreIcon()
+    navigation.clickOnDisconnectBtn()
+  })
+
+  it('Verify the counter at the top is updated for every selected token', () => {
+    cy.visit(constants.balanceNftsUrl + staticSafes.SEP_STATIC_SAFE_2)
+    nfts.waitForNftItems(5)
+    nfts.selectNFTs(1)
+  })
+
+  it.only('Verify the "select all" checkbox does checks all the nfts', () => {
+    cy.visit(constants.balanceNftsUrl + staticSafes.SEP_STATIC_SAFE_2)
+    nfts.waitForNftItems(5)
+    nfts.selectAllNFTs()
+    nfts.checkSelectedNFTsNumberIs(10)
+  })
+
+  it('Verify every NFT has its shorten address', () => {
+    cy.visit(constants.balanceNftsUrl + staticSafes.SEP_STATIC_SAFE_2)
+    nfts.waitForNftItems(5)
+    assets.checkNftAddressFormat()
+  })
+
+  it('Verify every NFT has the copy-to-clipboard and blockexplorer button', () => {
+    cy.visit(constants.balanceNftsUrl + staticSafes.SEP_STATIC_SAFE_2)
+    nfts.waitForNftItems(5)
+    assets.checkNftCopyIconAndLink()
+  })
+})

apps/web/cypress/e2e/regression/tx_details_createtx.cy.js

@@ -76,6 +76,7 @@ describe('Transaction details create tests', { defaultCommandTimeout: 30000 }, (
       getBody().findByText(safeapps.createBatchStr).click()
       getBody().findByText(safeapps.sendBatchStr).click()
     })
+    cy.wait(2000)
     safeapps.clickOnAdvancedDetails()
     safeapps.verifyUntrustedHandllerWarningDoesNotExist()
   })

apps/web/cypress/e2e/smoke/assets.cy.js

@@ -25,7 +25,7 @@ describe('[SMOKE] Assets tests', () => {
     assets.verifyTokensTabIsSelected('true')
   })
 
-  it('[SMOKE] Verify that Token list dropdown down options show/hide spam tokens', () => {
+  it('[SMOKE] Verify that Token list dropdown shows options "Default tokens" and "All tokens"', () => {
     let spamTokens = [
       assets.currencyAave,
       assets.currencyTestTokenA,
@@ -35,14 +35,12 @@ describe('[SMOKE] Assets tests', () => {
       assets.currencyDaiCap,
     ]
 
-    cy.wrap(null)
-      .then(() => main.addToLocalStorage(constants.localStorageKeys.SAFE_v2__settings, ls.safeSettings.slimitSettings))
-      .then(() => {
-        cy.reload()
-        main.verifyValuesDoNotExist(assets.tokenListTable, spamTokens)
-        assets.selectTokenList(assets.tokenListOptions.allTokens)
-        spamTokens.push(constants.tokenNames.sepoliaEther)
-        main.verifyValuesExist(assets.tokenListTable, spamTokens)
-      })
+    assets.selectTokenList(assets.tokenListOptions.default)
+    main.verifyValuesExist(assets.tokenListTable, [constants.tokenNames.sepoliaEther])
+    main.verifyValuesDoNotExist(assets.tokenListTable, spamTokens)
+
+    assets.selectTokenList(assets.tokenListOptions.allTokens)
+    spamTokens.push(constants.tokenNames.sepoliaEther)
+    main.verifyValuesExist(assets.tokenListTable, spamTokens)
   })
 })

apps/web/src/components/balances/AssetsTable/SendButton.tsx

@@ -22,6 +22,7 @@ const SendButton = ({ tokenInfo, isOutlined }: { tokenInfo: TokenInfo; isOutline
       {(isOk) => (
         <Track {...ASSETS_EVENTS.SEND}>
           <Button
+            data-testid="send-button"
             variant={isOutlined ? 'outlined' : 'contained'}
             color="primary"
             size="small"

apps/web/src/components/common/EnhancedTable/index.tsx

@@ -180,6 +180,7 @@ function EnhancedTable({ rows, headCells, mobileVariant }: EnhancedTableProps) {
 
       {rows.length > pagedRows.length && (
         <TablePagination
+          data-testid="table-pagination"
           rowsPerPageOptions={pageSizes}
           component="div"
           count={rows.length}