Tests: Add create safe tests (#2611)

* Add Create Safe tests

* Remove unused import

cypress/e2e/pages/create_wallet.pages.js

@@ -1,20 +1,55 @@
 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 const removeOwnerBtn = 'button[aria-label="Remove owner"]'
+const connectingContainer = 'div[class*="connecting-container"]'
+const createNewSafeBtn = 'span[data-track="create-safe: Open stepper"]'
+
+const changeNetworkWarningStr = 'Change your wallet network'
+const safeAccountSetupStr = 'Safe Account setup'
+const policy1_1 = '1/1 policy'
+export const walletName = 'test1-sepolia-safe'
+export const defaltSepoliaPlaceholder = 'sepolia-safe'
+
+export function verifyPolicy1_1() {
+  cy.contains(policy1_1).should('exist')
+  // TOD: Need data-cy for containers
+}
 
-export function clickOnCreateNewAccuntBtn() {
-  cy.contains(newAccountBtnStr).click()
+export function verifyDefaultWalletName(name) {
+  cy.get(nameInput).invoke('attr', 'placeholder').should('include', name)
+}
+
+export function verifyNextBtnIsDisabled() {
+  cy.get('button').contains('Next').should('be.disabled')
+}
+
+export function verifyNextBtnIsEnabled() {
+  cy.get('button').contains('Next').should('not.be.disabled')
+}
+
+export function checkNetworkChangeWarningMsg() {
+  cy.get('div').contains(changeNetworkWarningStr).should('exist')
+}
+
+export function connectWallet() {
+  cy.get('onboard-v2')
+    .shadow()
+    .within(($modal) => {
+      cy.wrap($modal).contains('div', constants.connectWalletNames.e2e).click()
+      cy.wrap($modal).get(connectingContainer).should('exist')
+    })
+}
+
+export function clickOnCreateNewSafeBtn() {
+  cy.get(createNewSafeBtn).click().wait(1000)
 }
 
 export function typeWalletName(name) {
-  cy.get(nameInput).should('have.attr', 'placeholder').should('match', constants.goerlySafeName)
   cy.get(nameInput).type(name).should('have.value', name)
 }
 
@@ -52,11 +87,16 @@ 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)
+export function typeOwnerAddress(address, index, clearOnly = false) {
+  if (clearOnly) {
+    cy.get(getOwnerAddressInput(index)).clear()
+    cy.get('body').click()
+    return
+  }
+  cy.get(getOwnerAddressInput(index)).clear().type(address).should('have.value', address)
 }
 
-function clickOnAddNewOwnerBtn() {
+export function clickOnAddNewOwnerBtn() {
   cy.contains('button', 'Add new owner').click()
 }
 
@@ -72,15 +112,41 @@ export function updateThreshold(number) {
 }
 
 export function removeOwner(index) {
+  // Index for remove owner btn which does not equal to number of owners
   cy.get(removeOwnerBtn).eq(index).click()
 }
 
-export function verifySummaryData(safeName, ownerAddress, startThreshold, endThreshold) {
-  cy.contains(safeName)
-  cy.contains(ownerAddress)
+export function verifySafeNameInSummaryStep(name) {
+  cy.contains(name)
+}
+
+export function verifyOwnerNameInSummaryStep(name) {
+  cy.contains(name)
+}
+
+export function verifyOwnerAddressInSummaryStep(address) {
+  cy.contains(address)
+}
+
+export function verifyThresholdStringInSummaryStep(startThreshold, endThreshold) {
   cy.contains(`${startThreshold} out of ${endThreshold}`)
 }
 
+export function verifyNetworkInSummaryStep(network) {
+  cy.get('div').contains('Name').parent().parent().contains(network)
+}
+
+export function verifyEstimatedFeeInSummaryStep() {
+  cy.get('b')
+    .contains('ETH')
+    .parent()
+    .should(($element) => {
+      const text = 'a' + $element.text()
+      const pattern = /\d/
+      expect(/\d/.test(text)).to.equal(true)
+    })
+}
+
 function getOwnerNameInput(index) {
   return `input[name="owners.${index}.name"]`
 }

cypress/e2e/pages/main.page.js

@@ -36,11 +36,7 @@ export function verifyCheckboxeState(element, index, state) {
 }
 
 export function verifyInputValue(selector, value) {
-  cy.get(selector)
-    .invoke('val')
-    .should(($value) => {
-      console.log($value)
-    })
+  cy.get(selector).invoke('val').should('include', value)
 }
 
 export function generateRandomString(length) {
@@ -53,3 +49,7 @@ export function generateRandomString(length) {
 
   return result
 }
+
+export function verifyElementsCount(element, count) {
+  cy.get(element).should('have.length', count)
+}

cypress/e2e/pages/owners.pages.js

@@ -17,6 +17,8 @@ const thresHoldDropDownIcon = 'svg[data-testid="ArrowDropDownIcon"]'
 const thresholdList = 'ul[role="listbox"]'
 const thresholdDropdown = 'div[aria-haspopup="listbox"]'
 const thresholdOption = 'li[role="option"]'
+const existingOwnerAddressInput = (index) => `input[name="owners.${index}.address"]`
+const existingOwnerNameInput = (index) => `input[name="owners.${index}.name"]`
 
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
@@ -33,6 +35,33 @@ export const safeAccountNonceStr = 'Safe Account nonce'
 export const nonOwnerErrorMsg = 'Your connected wallet is not an owner of this Safe Account'
 export const disconnectedUserErrorMsg = 'Please connect your wallet'
 
+export function verifyNumberOfOwners(count) {
+  const indices = Array.from({ length: count }, (_, index) => index)
+  const names = indices.map(existingOwnerNameInput)
+  const addresses = indices.map(existingOwnerAddressInput)
+
+  names.forEach((selector) => {
+    cy.get(selector).should('have.length', 1)
+  })
+
+  addresses.forEach((selector) => {
+    cy.get(selector).should('have.length', 1)
+  })
+}
+
+export function verifyExistingOwnerAddress(index, address) {
+  cy.get(existingOwnerAddressInput(index)).should('have.value', address)
+}
+
+export function verifyExistingOwnerName(index, name) {
+  cy.get(existingOwnerNameInput(index)).should('have.value', name)
+}
+
+export function typeExistingOwnerName(index, name) {
+  cy.get(existingOwnerNameInput(index)).clear().type(name)
+  main.verifyInputValue(existingOwnerNameInput(index), name)
+}
+
 export function verifyOwnerDeletionWindowDisplayed() {
   cy.get('div').contains(constants.transactionStatus.confirm).should('exist')
   cy.get('button').contains(backbtnStr).should('exist')
@@ -43,15 +72,15 @@ function clickOnThresholdDropdown() {
   cy.get(thresholdDropdown).eq(1).click()
 }
 
-function getThresholdOptions() {
+export function getThresholdOptions() {
   return cy.get('ul').find(thresholdOption)
 }
 
 export function verifyThresholdLimit(startValue, endValue) {
   cy.get('p').contains(`out of ${endValue} owner(s)`)
   clickOnThresholdDropdown()
-  getThresholdOptions().should('have.length', 1)
   getThresholdOptions().eq(0).should('have.text', startValue)
+  cy.get('body').click()
 }
 
 export function verifyRemoveBtnIsEnabled() {
@@ -107,6 +136,10 @@ export function clickOnDisconnectBtn() {
   cy.get('button').contains(notConnectedStatus)
 }
 
+export function clickOnConnectBtn() {
+  cy.get('button').contains(notConnectedStatus).click().wait(1000)
+}
+
 export function waitForConnectionStatus() {
   cy.get('div').contains(e2eWalletStr)
 }
@@ -127,9 +160,13 @@ export function verifyErrorMsgInvalidAddress(errorMsg) {
   cy.get('label').contains(errorMsg).should('be.visible')
 }
 
+export function verifyValidWalletName(errorMsg) {
+  cy.get('label').contains(errorMsg).should('not.exist')
+}
+
 export function typeOwnerAddress(address) {
   cy.get(newOwnerAddress).clear().type(address)
-  main.verifyInputValue(newOwnerAddress, address)
+  main.verifyInputValue(newOwnerAddress, address.substring(4))
   cy.wait(1000)
 }
 
@@ -150,6 +187,10 @@ export function clickOnNextBtn() {
   cy.get('button').contains(nextBtnStr).click()
 }
 
+export function clickOnBackBtn() {
+  cy.get('button').contains(backbtnStr).click()
+}
+
 export function verifyConfirmTransactionWindowDisplayed() {
   cy.get('div').contains(constants.transactionStatus.confirm).should('exist')
   cy.get('button').contains(executeBtnStr).should('exist')