Refactor Cypress tests: address book and balance tests (#2502)

* Refactor address book and balnces tests

* Fix tests

.github/workflows/cla.yml

@@ -24,7 +24,7 @@ jobs:
           # branch should not be protected
           branch: 'main'
           # user names of users allowed to contribute without CLA
-          allowlist: lukasschor,rmeissner,germartinez,Uxio0,dasanra,francovenica,tschubotz,luarx,DaniSomoza,iamacook,yagopv,usame-algan,schmanu,DiogoSoaress,JagoFigueroa,fmrsabino,bot*
+          allowlist: lukasschor,rmeissner,germartinez,Uxio0,dasanra,francovenica,tschubotz,luarx,DaniSomoza,iamacook,yagopv,usame-algan,schmanu,DiogoSoaress,JagoFigueroa,fmrsabino,mike10ca,bot*
 
           # the followings are the optional inputs - If the optional inputs are not given, then default values will be taken
           # enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.formatOnSave": true
 }

cypress/e2e/add_owner.cy.js

@@ -1,10 +1,10 @@
-const NEW_OWNER = '0xE297437d6b53890cbf004e401F3acc67c8b39665'
-const TEST_SAFE = 'gor:0x97d314157727D517A706B5D08507A1f9B44AaaE9'
+import * as constants from '../../support/constants'
+
 const offset = 7
 
 describe('Adding an owner', () => {
   before(() => {
-    cy.visit(`/${TEST_SAFE}/settings/setup`)
+    cy.visit(`/${constants.GOERLI_TEST_SAFE}/settings/setup`)
     cy.contains('button', 'Accept selection').click()
 
     // Advanced Settings page is loaded
@@ -21,7 +21,7 @@ describe('Adding an owner', () => {
 
       // Fills new owner data
       cy.get('input[placeholder="New owner"]').type('New Owner Name')
-      cy.get('input[name="address"]').type(NEW_OWNER)
+      cy.get('input[name="address"]').type(constants.EOA)
 
       // Advances to step 2
       cy.contains('Next').click()

cypress/e2e/pages/address_book.page.js

@@ -0,0 +1,93 @@
+export const acceptSelection = 'Accept selection'
+export const addressBook = 'Address book'
+const createEntryBtn = 'Create entry'
+
+const nameInput = 'input[name="name"]'
+const addressInput = 'input[name="address"]'
+const saveBtn = 'Save'
+export const editEntryBtn = 'button[aria-label="Edit entry"]'
+export const deleteEntryBtn = 'button[aria-label="Delete entry"]'
+export const deleteEntryModalBtnSection = '.MuiDialogActions-root'
+export const delteEntryModaldeleteBtn = 'Delete'
+const exportFileModalBtnSection = '.MuiDialogActions-root'
+const exportFileModalExportBtn = 'Export'
+const importBtn = 'Import'
+const exportBtn = 'Export'
+
+export function clickOnImportFileBtn() {
+  cy.contains(importBtn).click()
+}
+
+export function importFile() {
+  cy.get('[type="file"]').attachFile('../fixtures/address_book_test.csv')
+  // Import button should be enabled
+  cy.get('.MuiDialogActions-root').contains('Import').should('not.be.disabled')
+  cy.get('.MuiDialogActions-root').contains('Import').click()
+}
+
+export function verifyImportModalIsClosed() {
+  cy.get('Import address book').should('not.exist')
+}
+
+export function verifyDataImported(name, address) {
+  cy.contains(name).should('exist')
+  cy.contains(address).should('exist')
+}
+
+export function clickOnExportFileBtn() {
+  cy.contains(exportBtn).click()
+}
+
+export function confirmExport() {
+  cy.get(exportFileModalBtnSection).contains(exportFileModalExportBtn).click()
+}
+
+export function clickOnCreateEntryBtn() {
+  cy.contains(createEntryBtn).click()
+}
+
+export function tyeInName(name) {
+  cy.get(nameInput).type(name)
+}
+
+export function typeInAddress(address) {
+  cy.get(addressInput).type(address)
+}
+
+export function clickOnSaveEntryBtn() {
+  cy.contains('button', saveBtn).click()
+}
+
+export function verifyNewEntryAdded(name, address) {
+  cy.contains(name).should('exist')
+  cy.contains(address).should('exist')
+}
+
+export function clickOnEditEntryBtn() {
+  cy.get(editEntryBtn).click({ force: true })
+}
+
+export function typeInNameInput(name) {
+  cy.get(nameInput).clear().type(name).should('have.value', name)
+}
+
+export function clickOnSaveButton() {
+  cy.contains('button', saveBtn).click()
+}
+
+export function verifyNameWasChanged(name, editedName) {
+  cy.get(name).should('not.exist')
+  cy.contains(editedName).should('exist')
+}
+
+export function clickDeleteEntryButton() {
+  cy.get(deleteEntryBtn).click({ force: true })
+}
+
+export function clickDeleteEntryModalDeleteButton() {
+  cy.get(deleteEntryModalBtnSection).contains(delteEntryModaldeleteBtn).click()
+}
+
+export function verifyEditedNameNotExists(name) {
+  cy.get(name).should('not.exist')
+}

cypress/e2e/pages/balances.pages.js

@@ -0,0 +1,157 @@
+const etherscanLink = 'a[aria-label="View on goerli.etherscan.io"]'
+export const balanceSingleRow = '[aria-labelledby="tableTitle"] > tbody tr'
+const currencyDropdown = '[id="currency"]'
+const currencyDropdownList = 'ul[role="listbox"]'
+const currencyDropdownListSelected = 'ul[role="listbox"] li[aria-selected="true"]'
+const hideAssetBtn = 'button[aria-label="Hide asset"]'
+const hiddeTokensBtn = '[data-testid="toggle-hidden-assets"]'
+const hiddenTokenCheckbox = 'input[type="checkbox"]'
+const paginationPageList = 'ul[role="listbox"]'
+const hiddenTokenSaveBtn = 'Save'
+const hideTokenDefaultString = 'Hide tokens'
+
+const pageRowsDefault = '25'
+const rowsPerPage10 = '10'
+const nextPageBtn = 'button[aria-label="Go to next page"]'
+const previousPageBtn = 'button[aria-label="Go to previous page"]'
+const tablePageRage21to28 = '21–28 of'
+const rowsPerPageString = 'Rows per page:'
+const pageCountString1to25 = '1–25 of'
+const pageCountString1to10 = '1–10 of'
+const pageCountString10to20 = '11–20 of'
+
+export const currencyEUR = 'EUR'
+export const currencyUSD = 'USD'
+
+export const currencyDai = 'Dai'
+export const currencyDaiAlttext = 'DAI'
+export const currentcyDaiFormat = '120,496.61 DAI'
+
+export const currencyEther = 'Wrapped Ether'
+export const currencyEtherAlttext = 'WETH'
+export const currentcyEtherFormat = '0.05918 WETH'
+
+export const currencyUSDCoin = 'USD Coin'
+export const currencyUSDAlttext = 'USDC'
+export const currentcyUSDFormat = '131,363 USDC'
+
+export const currencyGörliEther = 'Görli Ether'
+export const currentcyGörliEtherFormat = '0.14 GOR'
+
+export const currencyUniswap = 'Uniswap'
+export const currentcyUniswapFormat = '0.01828 UNI'
+
+export const currencyGnosis = 'Gnosis'
+export const currentcyGnosisFormat = '< 0.00001 GNO'
+
+export const currencyOx = /^0x$/
+export const currentcyOxFormat = '1.003 ZRX'
+
+export function verityTokenAltImageIsVisible(currency, alttext) {
+  cy.contains(currency)
+    .parents('tr')
+    .within(() => {
+      cy.get(`img[alt=${alttext}]`).should('be.visible')
+    })
+}
+
+export function verifyAssetNameHasExplorerLink(currency, columnName) {
+  cy.contains(currency).parents('tr').find('td').eq(columnName).find(etherscanLink).should('be.visible')
+}
+
+export function verifyBalance(currency, tokenAmountColumn, alttext) {
+  cy.contains(currency).parents('tr').find('td').eq(tokenAmountColumn).contains(alttext)
+}
+
+export function verifyTokenBalanceFormat(currency, formatString, tokenAmountColumn, fiatAmountColumn, fiatRegex) {
+  cy.contains(currency)
+    .parents('tr')
+    .within(() => {
+      cy.get('td').eq(tokenAmountColumn).contains(formatString)
+      cy.get('td').eq(fiatAmountColumn).contains(fiatRegex)
+    })
+}
+
+export function verifyFirstRowDoesNotContainCurrency(currency, fiatAmountColumn) {
+  cy.get(balanceSingleRow).first().find('td').eq(fiatAmountColumn).should('not.contain', currency)
+}
+
+export function verifyFirstRowContainsCurrency(currency, fiatAmountColumn) {
+  cy.get(balanceSingleRow).first().find('td').eq(fiatAmountColumn).contains(currency)
+}
+
+export function clickOnCurrencyDropdown() {
+  cy.get(currencyDropdown).click()
+}
+
+export function selectCurrency(currency) {
+  cy.get(currencyDropdownList).findByText(currency).click({ force: true })
+  cy.get(currencyDropdownList)
+    .findByText(currency)
+    .click({ force: true })
+    .then(() => {
+      cy.get(currencyDropdownListSelected).should('contain', currency)
+    })
+}
+
+export function hideAsset(asset) {
+  cy.contains(asset).parents('tr').find('button[aria-label="Hide asset"]').click()
+  cy.wait(350)
+  cy.contains(asset).should('not.exist')
+}
+
+export function openHideTokenMenu() {
+  cy.get(hiddeTokensBtn).click()
+}
+
+export function clickOnTokenCheckbox(token) {
+  cy.contains(token).parents('tr').find(hiddenTokenCheckbox).click()
+}
+
+export function saveHiddenTokenSelection() {
+  cy.contains(hiddenTokenSaveBtn).click()
+}
+
+export function verifyTokenIsVisible(token) {
+  cy.contains(token)
+}
+
+export function verifyMenuButtonLabelIsDefault() {
+  cy.contains(hideTokenDefaultString)
+}
+
+export function verifyInitialTableState() {
+  cy.contains(rowsPerPageString).next().contains(pageRowsDefault)
+  cy.contains(pageCountString1to25)
+  cy.get(balanceSingleRow).should('have.length', 25)
+}
+
+export function changeTo10RowsPerPage() {
+  cy.contains(rowsPerPageString).next().contains(pageRowsDefault).click({ force: true })
+  cy.get(paginationPageList).contains(rowsPerPage10).click()
+}
+
+export function verifyTableHas10Rows() {
+  cy.contains(rowsPerPageString).next().contains(rowsPerPage10)
+  cy.contains(pageCountString1to10)
+  cy.get(balanceSingleRow).should('have.length', 10)
+}
+
+export function navigateToNextPage() {
+  cy.get(nextPageBtn).click({ force: true })
+  cy.get(nextPageBtn).click({ force: true })
+}
+
+export function verifyTableHasNRows(assetsLength) {
+  cy.contains(tablePageRage21to28)
+  cy.get(balanceSingleRow).should('have.length', assetsLength)
+}
+
+export function navigateToPreviousPage() {
+  cy.get(previousPageBtn).click({ force: true })
+}
+
+export function verifyTableHas10RowsAgain() {
+  cy.contains(pageCountString10to20)
+  cy.get(balanceSingleRow).should('have.length', 10)
+}

cypress/e2e/pages/main.page.js

@@ -0,0 +1,7 @@
+const acceptSelection = 'Accept selection'
+const gotItBtn = 'Got it'
+
+export function acceptCookies() {
+  cy.contains(acceptSelection).click()
+  cy.contains(acceptSelection).should('not.exist')
+}

cypress/e2e/safe-apps/apps_list.cy.js

@@ -1,8 +1,8 @@
-import { TEST_SAFE } from './constants'
+import * as constants from '../../support/constants'
 
 describe('The Safe Apps list', () => {
   before(() => {
-    cy.visit(`/${TEST_SAFE}/apps`, { failOnStatusCode: false })
+    cy.visit(`/${constants.TEST_SAFE_2}/apps`, { failOnStatusCode: false })
     cy.findByText(/accept selection/i).click()
   })
 

cypress/e2e/safe-apps/browser_permissions.cy.js

@@ -1,12 +1,10 @@
-import { BROWSER_PERMISSIONS_KEY } from './constants'
-
-const appUrl = 'https://safe-test-app.com'
+import * as constants from '../../support/constants'
 
 describe('The Browser permissions system', () => {
   describe('When the safe app requires permissions', () => {
     beforeEach(() => {
       cy.fixture('safe-app').then((html) => {
-        cy.intercept('GET', `${appUrl}/*`, html)
+        cy.intercept('GET', `${constants.appUrlProd}/*`, html)
         cy.intercept('GET', `*/manifest.json`, {
           name: 'Cypress Test App',
           description: 'Cypress Test App Description',
@@ -17,7 +15,7 @@ describe('The Browser permissions system', () => {
     })
 
     it('should show a permissions slide to the user', () => {
-      cy.visitSafeApp(`${appUrl}/app`)
+      cy.visitSafeApp(`${constants.appUrlProd}/app`)
 
       cy.findByRole('checkbox', { name: /camera/i }).should('exist')
       cy.findByRole('checkbox', { name: /microphone/i }).should('exist')
@@ -30,7 +28,7 @@ describe('The Browser permissions system', () => {
       cy.findByRole('button', { name: /continue/i })
         .click()
         .should(() => {
-          expect(window.localStorage.getItem(BROWSER_PERMISSIONS_KEY)).to.eq(
+          expect(window.localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY)).to.eq(
             '{"https://safe-test-app.com":[{"feature":"camera","status":"granted"},{"feature":"microphone","status":"denied"}]}',
           )
         })

cypress/e2e/safe-apps/info_modal.cy.js

@@ -1,8 +1,8 @@
-import { TEST_SAFE, BROWSER_PERMISSIONS_KEY, INFO_MODAL_KEY } from './constants'
+import * as constants from '../../support/constants'
 
 describe('The Safe Apps info modal', () => {
   before(() => {
-    cy.visit(`/${TEST_SAFE}/apps`, { failOnStatusCode: false })
+    cy.visit(`/${constants.TEST_SAFE_2}/apps`, { failOnStatusCode: false })
     cy.findByText(/accept selection/i).click()
   })
 
@@ -23,9 +23,9 @@ describe('The Safe Apps info modal', () => {
       cy.findByRole('button', { name: /continue/i })
         .click()
         .should(() => {
-          const storedBrowserPermissions = JSON.parse(localStorage.getItem(BROWSER_PERMISSIONS_KEY))
+          const storedBrowserPermissions = JSON.parse(localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY))
           const browserPermissions = Object.values(storedBrowserPermissions)[0][0]
-          const storedInfoModal = JSON.parse(localStorage.getItem(INFO_MODAL_KEY))
+          const storedInfoModal = JSON.parse(localStorage.getItem(constants.INFO_MODAL_KEY))
 
           expect(browserPermissions.feature).to.eq('camera')
           expect(browserPermissions.status).to.eq('granted')