Tests: Add tx notes tests (#4884)

apps/web/cypress/e2e/happypath/recovery_hp_1.cy.js

@@ -5,6 +5,7 @@ import * as recovery from '../pages/recovery.pages'
 import * as tx from '../pages/transactions.page'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 import * as wallet from '../../support/utils/wallet.js'
+import * as createtx from '../pages/create_tx.pages.js'
 
 let recoverySafes = []
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
@@ -32,6 +33,7 @@ describe('Recovery happy path tests 1', () => {
     recovery.enterRecovererAddress(constants.SEPOLIA_OWNER_2)
     recovery.agreeToTerms()
     recovery.clickOnNextBtn()
+    main.verifyElementsCount(createtx.noteTextField, 1)
     tx.executeFlow_1()
     recovery.verifyRecovererAdded([constants.SEPOLIA_OWNER_2_SHORT])
     recovery.clearRecoverers()

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

@@ -56,6 +56,11 @@ export const altImgSwaps = 'svg[alt="Swap order"]'
 export const txShareBlock = '[data-testid="share-block"]'
 export const txShareBlockDetails = '[data-testid="share-block-details"]'
 const copyLinkBtn = '[data-testid="copy-link-btn"]'
+export const noteTextField = '[data-testid="tx-note-textfield"]'
+const noteAlert = "[data-testid='tx-note-alert']"
+const recoredTxNote = '[data-testid="tx-note"]'
+const txNoteTooltip = '[data-testid="tx-note-tooltip"]'
+const noteCreator = '[data-testid="note-creator"]'
 
 const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'
@@ -92,11 +97,43 @@ const batchModalTitle = 'Batch'
 export const swapOrder = 'Swap order settlement'
 export const bulkTxs = 'Bulk transactions'
 
+export const txNoteWarningMessage = 'The notes are publicly visible, do not share any private or sensitive details'
+export const recordedTxNote = 'Tx note one'
+
 export const filterTypes = {
   incoming: 'Incoming',
   outgoing: 'Outgoing',
   module: 'Module-based',
 }
+
+export function typeNoteText(text) {
+  cy.get(noteTextField).find('input').clear().type(text)
+}
+
+export function checkMaxNoteLength() {
+  typeNoteText(main.generateRandomString(61))
+  cy.get(noteTextField).contains('60/60').should('be.visible')
+}
+
+export function checkNoteWarningMsg() {
+  cy.get(noteAlert).invoke('text').should('include', txNoteWarningMessage)
+}
+
+export function checkNoteRecordedNote(note) {
+  cy.get(recoredTxNote).should('be.visible').invoke('text').should('include', note)
+}
+
+export function checkNoteCreator(creator) {
+  cy.get(txNoteTooltip).trigger('mouseover', { force: true })
+  cy.get(noteCreator).should('be.visible').invoke('text').should('include', creator)
+}
+
+export function checkNoteRecordedNoteReadOnly() {
+  cy.get(recoredTxNote).then(($p) => {
+    expect($p.prop('tagName')).to.equal('P')
+  })
+}
+
 export function clickOnCopyLinkBtn() {
   cy.get(copyLinkBtn).click()
 }
@@ -332,11 +369,11 @@ export function clickOnExpandableAction(data) {
 export function clickOnAdvancedDetails() {
   cy.get(advancedDetails).click()
 }
-//
+
 export function expandAdvancedDetails(data) {
   clickOnAdvancedDetails()
   data.forEach((row) => {
-    cy.get('div').contains(row).should('be.visible')
+    cy.get(txRowTitle).contains(row).should('be.visible')
   })
 }
 

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

@@ -1,6 +1,8 @@
 import { messageItem } from './create_tx.pages'
 const onchainMsgInput = 'input[placeholder*="Message"]'
 
+export const offchainMessage = 'Test message 2 off-chain'
+
 export function enterOnchainMessage(msg) {
   cy.get(onchainMsgInput).type(msg)
 }

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

@@ -122,12 +122,13 @@ export function clickOnMaxBtn() {
 }
 
 export function selectSpendingLimitOption() {
-  const input = () => {
-    return cy.get(spendingLimitTxOption).find('input')
-  }
-
   cy.get(spendingLimitTxOption).click()
-  main.checkRadioButtonState(input, constants.checkboxStates.checked)
+  cy.get(spendingLimitTxOption).find('input').should('be.checked')
+}
+
+export function selectStandardOption() {
+  cy.get(standardTx).click()
+  cy.get(standardTx).find('input').should('be.checked')
 }
 
 export function verifyTxOptionExist(options) {

apps/web/cypress/e2e/prodhealthcheck/sidebar.cy.js

@@ -21,6 +21,7 @@ describe('[PROD] Sidebar tests', () => {
   })
 
   it('Verify current safe details', () => {
+    wallet.connectSigner(signer)
     sideBar.verifySafeHeaderDetails(sideBar.testSafeHeaderDetails)
   })
 

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

@@ -6,7 +6,6 @@ import * as msg_confirmation_modal from '../pages/modals/message_confirmation.pa
 import * as wallet from '../../support/utils/wallet.js'
 
 let staticSafes = []
-const offchainMessage = 'Test message 2 off-chain'
 
 const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
 const signer2 = walletCredentials.OWNER_1_PRIVATE_KEY
@@ -16,16 +15,12 @@ describe('Offchain Messages tests', () => {
     staticSafes = await getSafes(CATEGORIES.static)
   })
 
-  beforeEach(() => {
-    cy.visit(constants.transactionsMessagesUrl + staticSafes.SEP_STATIC_SAFE_10)
-  })
-
   it('Verify confirmation window is displayed for unsigned message', () => {
     cy.visit(constants.transactionsMessagesUrl + staticSafes.SEP_STATIC_SAFE_26)
     wallet.connectSigner(signer2)
     messages.clickOnMessageSignBtn(0)
     msg_confirmation_modal.verifyConfirmationWindowTitle(modal.modalTitiles.confirmMsg)
-    msg_confirmation_modal.verifyMessagePresent(offchainMessage)
+    msg_confirmation_modal.verifyMessagePresent(messages.offchainMessage)
     msg_confirmation_modal.clickOnMessageDetails()
     msg_confirmation_modal.verifyOffchainMessageHash(0)
     msg_confirmation_modal.verifyOffchainMessageHash(1)

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

@@ -16,7 +16,7 @@ describe('Spending limits non-owner tests', () => {
   })
 
   it('Verify that where there are no spending limits setup, information images are displayed', () => {
-    spendinglimit.verifySpendingLimitsIcons
+    spendinglimit.verifySpendingLimitsIcons()
   })
 
   it('Verify "New spending limit" button only available for owners', () => {

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

@@ -0,0 +1,116 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as createtx from '../pages/create_tx.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as wallet from '../../support/utils/wallet.js'
+import * as messages from '../pages/messages.pages.js'
+import * as msg_confirmation_modal from '../pages/modals/message_confirmation.pages.js'
+import * as navigation from '../pages/navigation.page'
+import * as spendinglimit from '../pages/spending_limits.pages'
+
+let staticSafes = []
+
+const sendValue = 0.00002
+const safe = 'sep:0xF184a243925Bf7fb1D64487339FF4F177Fb75644'
+
+const txs = {
+  oneOfoneTx:
+    '&id=multisig_0xF184a243925Bf7fb1D64487339FF4F177Fb75644_0xccc6945d0d674ceb45f856841bfc3991b4da27ea578ffe9652bbc6835944b323',
+}
+
+const noteCreator = 'sep:0x96D4...5aC5'
+
+const walletCredentials = JSON.parse(Cypress.env('CYPRESS_WALLET_CREDENTIALS'))
+const signer = walletCredentials.OWNER_4_PRIVATE_KEY
+const signer2 = walletCredentials.OWNER_1_PRIVATE_KEY
+const signerAddress = walletCredentials.OWNER_4_WALLET_ADDRESS
+
+function happyPathToStepTwo() {
+  createtx.typeRecipientAddress(constants.EOA)
+  createtx.clickOnTokenselectorAndSelectSepoliaEth()
+  createtx.setSendValue(sendValue)
+  createtx.clickOnNextBtn()
+}
+
+describe('Transaction notes tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify the tx notes field only allows 60 characters', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_6)
+    wallet.connectSigner(signer)
+    createtx.clickOnNewtransactionBtn()
+    createtx.clickOnSendTokensBtn()
+    happyPathToStepTwo()
+    createtx.checkMaxNoteLength()
+  })
+
+  it('Verify the tx note information message', () => {
+    cy.visit(constants.BALANCE_URL + staticSafes.SEP_STATIC_SAFE_6)
+    wallet.connectSigner(signer)
+    createtx.clickOnNewtransactionBtn()
+    createtx.clickOnSendTokensBtn()
+    happyPathToStepTwo()
+    createtx.checkNoteWarningMsg()
+  })
+
+  it('Verify in the transaction details the note is visible', () => {
+    cy.visit(constants.transactionUrl + safe + txs.oneOfoneTx)
+    createtx.checkNoteRecordedNote(createtx.recordedTxNote)
+  })
+
+  it('Verify hovering over the note tooltip shows note originator', () => {
+    cy.visit(constants.transactionUrl + safe + txs.oneOfoneTx)
+    createtx.checkNoteCreator(noteCreator)
+  })
+
+  it('Verify that after a tx was executed, the tx note is not editable', () => {
+    cy.visit(constants.transactionUrl + safe + txs.oneOfoneTx)
+    createtx.checkNoteRecordedNoteReadOnly()
+  })
+
+  it('Verify no tx note field is present when signing a message', () => {
+    cy.visit(constants.transactionsMessagesUrl + staticSafes.SEP_STATIC_SAFE_26)
+    wallet.connectSigner(signer2)
+    messages.clickOnMessageSignBtn(0)
+    msg_confirmation_modal.verifyMessagePresent(messages.offchainMessage)
+    main.verifyElementsCount(createtx.noteTextField, 0)
+  })
+
+  it('Verify no tx note field is present during the use of a spending limit', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_8)
+    wallet.connectSigner(signer)
+    navigation.clickOnNewTxBtn()
+    createtx.clickOnSendTokensBtn()
+    createtx.typeRecipientAddress(constants.EOA)
+    spendinglimit.enterSpendingLimitAmount(0.00001)
+    spendinglimit.selectSpendingLimitOption()
+    createtx.clickOnNextBtn()
+    main.verifyElementsCount(createtx.noteTextField, 0)
+  })
+
+  it('Verify that in a send funds tx the note field shows up in the execution part of the form', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_8)
+    wallet.connectSigner(signer)
+    navigation.clickOnNewTxBtn()
+    createtx.clickOnSendTokensBtn()
+    createtx.typeRecipientAddress(constants.EOA)
+    spendinglimit.enterSpendingLimitAmount(0.00001)
+    spendinglimit.selectStandardOption()
+    createtx.clickOnNextBtn()
+    main.verifyElementsCount(createtx.noteTextField, 1)
+  })
+
+  it('Verify no tx note is present during a recovery tx', () => {
+    cy.visit(constants.setupUrl + staticSafes.SEP_STATIC_SAFE_8)
+    wallet.connectSigner(signer)
+    navigation.clickOnNewTxBtn()
+    createtx.clickOnSendTokensBtn()
+    createtx.typeRecipientAddress(constants.EOA)
+    spendinglimit.enterSpendingLimitAmount(0.00001)
+    spendinglimit.selectStandardOption()
+    createtx.clickOnNextBtn()
+    main.verifyElementsCount(createtx.noteTextField, 1)
+  })
+})

apps/web/src/features/tx-notes/TxNote.tsx

@@ -16,8 +16,9 @@ export function TxNote({ txDetails }: { txDetails: TransactionDetails | undefine
       <Typography variant="h5" display="flex" alignItems="center" justifyItems="center">
         Note
         <Tooltip
+          data-testid="tx-note-tooltip"
           title={
-            <Stack direction="row" gap={1}>
+            <Stack data-testid="note-creator" direction="row" gap={1}>
               <span>By </span>
               {creator ? (
                 <EthHashInfo avatarSize={20} address={creator.value} showName onlyName />
@@ -34,7 +35,7 @@ export function TxNote({ txDetails }: { txDetails: TransactionDetails | undefine
         </Tooltip>
       </Typography>
 
-      <Typography p={2} mt={1} borderRadius={1} bgcolor="background.main">
+      <Typography data-testid="tx-note" p={2} mt={1} borderRadius={1} bgcolor="background.main">
         {note}
       </Typography>
     </div>

apps/web/src/features/tx-notes/TxNoteInput.tsx

@@ -26,11 +26,12 @@ export const TxNoteInput = ({ onChange }: { onChange: (note: string) => void })
         </Typography>
       </Stack>
 
-      <Alert severity="info">
+      <Alert data-testid="tx-note-alert" severity="info">
         The notes are <b>publicly visible</b>, do not share any private or sensitive details.
       </Alert>
 
       <TextField
+        data-testid="tx-note-textfield"
         name="note"
         label="Note"
         fullWidth