Refactoring of existing Cypress tests (P2) (#2512)

* Rfactoring of existing Cypress tests (P2)

* Refactoring of tests: create wallet, import/export, load safe, nfts, landing, pendig actions; general refactoring

cypress/e2e/pages/batches.pages.js

@@ -0,0 +1,98 @@
+const tokenSelectorText = 'G(ö|oe)rli Ether'
+const noLaterString = 'No, later'
+const yesExecuteString = 'Yes, execute'
+const newTransactionTitle = 'New transaction'
+const sendTokensButn = 'Send tokens'
+const nextBtn = 'Next'
+const executeBtn = 'Execute'
+const addToBatchBtn = 'Add to batch'
+const confirmBatchBtn = 'Confirm batch'
+
+export const closeModalBtnBtn = '[data-testid="CloseIcon"]'
+export const deleteTransactionbtn = '[title="Delete transaction"]'
+export const batchTxTopBar = '[data-track="batching: Batch sidebar open"]'
+export const batchTxCounter = '[data-track="batching: Batch sidebar open"] span > span'
+export const addNewTxBatch = '[data-track="batching: Add new tx to batch"]'
+export const batchedTransactionsStr = 'Batched transactions'
+export const addInitialTransactionStr = 'Add an initial transaction to the batch'
+export const transactionAddedToBatchStr = 'Transaction is added to batch'
+export const addNewStransactionStr = 'Add new transaction'
+
+const recipientInput = 'input[name="recipient"]'
+const tokenAddressInput = 'input[name="tokenAddress"]'
+const listBox = 'ul[role="listbox"]'
+const amountInput = '[name="amount"]'
+const nonceInput = 'input[name="nonce"]'
+
+export function addToBatch(EOA, currentNonce, amount, verify = false) {
+  fillTransactionData(EOA, amount)
+  setNonceAndProceed(currentNonce)
+  // Execute the transaction if verification is required
+  if (verify) {
+    executeTransaction()
+  }
+  addToBatchButton()
+}
+
+function fillTransactionData(EOA, amount) {
+  cy.get(recipientInput).type(EOA, { delay: 1 })
+  // Click on the Token selector
+  cy.get(tokenAddressInput).prev().click()
+  cy.get(listBox).contains(new RegExp(tokenSelectorText)).click()
+  cy.get(amountInput).type(amount)
+  cy.contains(nextBtn).click()
+}
+
+function setNonceAndProceed(currentNonce) {
+  cy.get(nonceInput).clear().type(currentNonce, { force: true }).type('{enter}', { force: true })
+  cy.contains(executeBtn).scrollIntoView()
+}
+
+function executeTransaction() {
+  cy.contains(yesExecuteString, { timeout: 4000 }).click()
+  cy.contains(addToBatchBtn).should('not.exist')
+}
+
+function addToBatchButton() {
+  cy.contains(noLaterString, { timeout: 4000 }).click()
+  cy.contains(addToBatchBtn).should('be.visible').and('not.be.disabled').click()
+}
+
+export function openBatchtransactionsModal() {
+  cy.get(batchTxTopBar).should('be.visible').click()
+  cy.contains(batchedTransactionsStr).should('be.visible')
+  cy.contains(addInitialTransactionStr)
+}
+
+export function openNewTransactionModal() {
+  cy.get(addNewTxBatch).click()
+  cy.contains('h1', newTransactionTitle).should('be.visible')
+  cy.contains(sendTokensButn).click()
+}
+
+export function verifyAmountTransactionsInBatch(count) {
+  cy.contains(batchedTransactionsStr, { timeout: 7000 })
+    .should('be.visible')
+    .parents('aside')
+    .find('ul > li')
+    .should('have.length', count)
+}
+
+export function clickOnConfirmBatchBtn() {
+  cy.contains(confirmBatchBtn).click()
+}
+
+export function verifyBatchTransactionsCount(count) {
+  cy.contains(`This batch contains ${count} transactions`).should('be.visible')
+}
+
+export function clickOnBatchCounter() {
+  cy.get(batchTxCounter).click()
+}
+export function verifyTransactionAdded() {
+  cy.contains(transactionAddedToBatchStr).should('be.visible')
+}
+
+export function verifyBatchIconCount(count) {
+  cy.get(batchTxCounter).contains(count)
+}

cypress/e2e/pages/create_tx.pages.js

@@ -0,0 +1,151 @@
+import * as constants from '../../support/constants'
+
+const newTransactionBtnStr = 'New transaction'
+const recepientInput = 'input[name="recipient"]'
+const sendTokensBtnStr = 'Send tokens'
+const tokenAddressInput = 'input[name="tokenAddress"]'
+const amountInput = 'input[name="amount"]'
+const nonceInput = 'input[name="nonce"]'
+const gasLimitInput = '[name="gasLimit"]'
+const rotateLeftIcon = '[data-testid="RotateLeftIcon"]'
+
+const viewTransactionBtn = 'View transaction'
+const transactionDetailsTitle = 'Transaction details'
+const QueueLabel = 'needs to be executed first'
+const TransactionSummary = 'Send-'
+
+const maxAmountBtnStr = 'Max'
+const nextBtnStr = 'Next'
+const nativeTokenTransferStr = 'Native token transfer'
+const yesStr = 'Yes, '
+const estimatedFeeStr = 'Estimated fee'
+const executeStr = 'Execute'
+const transactionsPerHrStr = 'Transactions per hour'
+const transactionsPerHr5Of5Str = '5 of 5'
+const editBtnStr = 'Edit'
+const executionParamsStr = 'Execution parameters'
+const noLaterStr = 'No, later'
+const signBtnStr = 'Sign'
+
+export function clickOnNewtransactionBtn() {
+  // Assert that "New transaction" button is visible
+  cy.contains(newTransactionBtnStr, {
+    timeout: 60_000, // `lastWallet` takes a while initialize in CI
+  })
+    .should('be.visible')
+    .and('not.be.disabled')
+
+  // Open the new transaction modal
+  cy.contains(newTransactionBtnStr).click()
+  cy.contains('h1', newTransactionBtnStr).should('be.visible')
+}
+
+export function typeRecipientAddress(address) {
+  cy.get(recepientInput).type(address).should('have.value', address)
+}
+export function clickOnSendTokensBtn() {
+  cy.contains(sendTokensBtnStr).click()
+}
+
+export function clickOnTokenselectorAndSelectGoerli() {
+  cy.get(tokenAddressInput).prev().click()
+  cy.get('ul[role="listbox"]').contains(constants.goerliToken).click()
+}
+
+export function setMaxAmount() {
+  cy.contains(maxAmountBtnStr).click()
+}
+
+export function verifyMaxAmount(token, tokenAbbreviation) {
+  cy.get(tokenAddressInput)
+    .prev()
+    .find('p')
+    .contains(token)
+    .next()
+    .then((element) => {
+      const maxBalance = element.text().replace(tokenAbbreviation, '').trim()
+      cy.get(amountInput).should('have.value', maxBalance)
+      console.log(maxBalance)
+    })
+}
+
+export function setSendValue(value) {
+  cy.get(amountInput).clear().type(value)
+}
+
+export function clickOnNextBtn() {
+  cy.contains(nextBtnStr).click()
+}
+
+export function verifySubmitBtnIsEnabled() {
+  cy.get('button[type="submit"]').should('not.be.disabled')
+}
+
+export function verifyNativeTokenTransfer() {
+  cy.contains(nativeTokenTransferStr).should('be.visible')
+}
+
+export function changeNonce(value) {
+  cy.get(nonceInput).clear().type(value, { force: true }).type('{enter}', { force: true })
+}
+
+export function verifyConfirmTransactionData() {
+  cy.contains(yesStr).should('exist')
+  cy.contains(estimatedFeeStr).should('exist')
+
+  // Asserting the sponsored info is present
+  cy.contains(executeStr).scrollIntoView().should('be.visible')
+
+  cy.get('span').contains(estimatedFeeStr).next().should('have.css', 'text-decoration-line', 'line-through')
+  cy.contains(transactionsPerHrStr)
+  cy.contains(transactionsPerHr5Of5Str)
+}
+
+export function openExecutionParamsModal() {
+  cy.contains(estimatedFeeStr).click()
+  cy.contains(editBtnStr).click()
+}
+
+export function verifyAndSubmitExecutionParams() {
+  cy.contains(executionParamsStr).parents('form').as('Paramsform')
+
+  // Only gaslimit should be editable when the relayer is selected
+  const arrayNames = ['Wallet nonce', 'Max priority fee (Gwei)', 'Max fee (Gwei)']
+  arrayNames.forEach((element) => {
+    cy.get('@Paramsform').find('label').contains(`${element}`).next().find('input').should('be.disabled')
+  })
+
+  cy.get('@Paramsform').find(gasLimitInput).clear().type('300000').invoke('prop', 'value').should('equal', '300000')
+  cy.get('@Paramsform').find(gasLimitInput).parent('div').find(rotateLeftIcon).click()
+  cy.get('@Paramsform').submit()
+}
+
+export function clickOnNoLaterOption() {
+  // Asserts the execute checkbox is uncheckable (???)
+  cy.contains(noLaterStr).click()
+}
+
+export function clickOnSignTransactionBtn() {
+  cy.contains(signBtnStr).click()
+}
+
+export function waitForProposeRequest() {
+  cy.intercept('POST', constants.proposeEndPoint).as('ProposeTx')
+  cy.wait('@ProposeTx')
+}
+
+export function clickViewTransaction() {
+  cy.contains(viewTransactionBtn).click()
+}
+
+export function verifySingleTxPage() {
+  cy.get('h3').contains(transactionDetailsTitle).should('be.visible')
+}
+
+export function verifyQueueLabel() {
+  cy.contains(QueueLabel).should('be.visible')
+}
+
+export function verifyTransactionSummary(sendValue) {
+  cy.contains(TransactionSummary + `${sendValue} ${constants.tokenAbbreviation.gor}`).should('exist')
+}

cypress/e2e/pages/create_wallet.pages.js

@@ -0,0 +1,89 @@
+import * as constants from '../../support/constants'
+
+const newAccountBtnStr = 'Create new Account'
+
+const nameInput = 'input[name="name"]'
+const selectNetworkBtn = '[data-cy="create-safe-select-network"]'
+const ownerInput = 'input[name^="owners"][name$="name"]'
+const ownerAddress = 'input[name^="owners"][name$="address"]'
+const thresholdInput = 'input[name="threshold"]'
+const removeOwnerBtn = 'button[aria-label="Remove owner"]'
+
+export function clickOnCreateNewAccuntBtn() {
+  cy.contains(newAccountBtnStr).click()
+}
+
+export function typeWalletName(name) {
+  cy.get(nameInput).should('have.attr', 'placeholder').should('match', constants.goerlySafeName)
+  cy.get(nameInput).type(name).should('have.value', name)
+}
+
+export function selectNetwork(network, regex = false) {
+  cy.get(selectNetworkBtn).click()
+  cy.contains(network).click()
+
+  if (regex) {
+    regex = constants.networks.goerli
+    cy.get(selectNetworkBtn).click().invoke('text').should('match', regex)
+  } else {
+    cy.get(selectNetworkBtn).click().should('have.text', network)
+  }
+  cy.get('body').click()
+}
+
+export function clickOnNextBtn() {
+  cy.contains('button', 'Next').click()
+}
+
+export function verifyOwnerName(name, index) {
+  cy.get(ownerInput).eq(index).should('have.value', name)
+}
+
+export function verifyOwnerAddress(address, index) {
+  cy.get(ownerAddress).eq(index).should('have.value', address)
+}
+
+export function verifyThreshold(number) {
+  cy.get(thresholdInput).should('have.value', number)
+}
+
+export function typeOwnerName(name, index) {
+  cy.get(getOwnerNameInput(index)).type(name).should('have.value', name)
+}
+
+function typeOwnerAddress(address, index) {
+  cy.get(getOwnerAddressInput(index)).type(address).should('have.value', address)
+}
+
+function clickOnAddNewOwnerBtn() {
+  cy.contains('button', 'Add new owner').click()
+}
+
+export function addNewOwner(name, address, index) {
+  clickOnAddNewOwnerBtn()
+  typeOwnerName(name, index)
+  typeOwnerAddress(address, index)
+}
+
+export function updateThreshold(number) {
+  cy.get(thresholdInput).parent().click()
+  cy.contains('li', number).click()
+}
+
+export function removeOwner(index) {
+  cy.get(removeOwnerBtn).eq(index).click()
+}
+
+export function verifySummaryData(safeName, ownerAddress, startThreshold, endThreshold) {
+  cy.contains(safeName)
+  cy.contains(ownerAddress)
+  cy.contains(`${startThreshold} out of ${endThreshold}`)
+}
+
+function getOwnerNameInput(index) {
+  return `input[name="owners.${index}.name"]`
+}
+
+function getOwnerAddressInput(index) {
+  return `input[name="owners.${index}.address"]`
+}