Tests: update message tests (#3715)

* tests: update message tests

* tests: disable eslint for localstorage file

* tests: update test titles

cypress/e2e/pages/create_tx.pages.js

@@ -31,7 +31,7 @@ const spamTokenWarningIcon = '[data-testid="warning"]'
 const untrustedTokenWarningModal = '[data-testid="untrusted-token-warning"]'
 const sendTokensBtn = '[data-testid="send-tokens-btn"]'
 export const replacementNewSigner = '[data-testid="new-owner"]'
-const messageItem = '[data-testid="message-item"]'
+export const messageItem = '[data-testid="message-item"]'
 
 const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'

cypress/e2e/pages/main.page.js

@@ -300,3 +300,7 @@ export function verifyTextVisibility(stringsArray) {
     cy.contains(string).should('be.visible')
   })
 }
+
+export function getIframeBody(iframe) {
+  return cy.get(iframe).its('0.contentDocument.body').should('not.be.empty').then(cy.wrap)
+}

cypress/e2e/pages/messages.pages.js

@@ -0,0 +1,14 @@
+import { messageItem } from './create_tx.pages'
+const onchainMsgInput = 'input[placeholder*="Message"]'
+
+export function enterOnchainMessage(msg) {
+  cy.get(onchainMsgInput).type(msg)
+}
+
+export function clickOnMessageSignBtn(index) {
+  cy.get(messageItem)
+    .eq(index)
+    .within(() => {
+      cy.get('button').contains('Sign').click()
+    })
+}

cypress/e2e/pages/modals.page.js

@@ -5,6 +5,8 @@ export const modalTitiles = {
   editEntry: 'Edit entry',
   deleteEntry: 'Delete entry',
   dataImport: 'Data import',
+  confirmTx: 'Confirm transaction',
+  confirmMsg: 'Confirm message',
 }
 
 export function verifyModalTitle(title) {

cypress/e2e/pages/modals/message_confirmation.pages.js

@@ -0,0 +1,46 @@
+import * as modal from '../modals.page'
+import * as checkers from '../../../support/utils/checkers'
+import * as main from '../main.page'
+
+const messageHash = '[data-testid="message-hash"]'
+const messageDetails = '[data-testid="message-details"]'
+const messageInfobox = '[data-testid="message-infobox"]'
+
+const messageInfoBoxData = [
+  'Collect all the confirmations',
+  'Confirmations (1 of 2)',
+  'The signature will be submitted to the Safe App when the message is fully signed',
+]
+
+export function verifyConfirmationWindowTitle(title) {
+  cy.get(modal.modalTitle).should('contain', title)
+}
+
+export function verifyMessagePresent(msg) {
+  cy.get('textarea').should('contain', msg)
+}
+
+export function verifySafeAppInPopupWindow(safeApp) {
+  cy.contains(safeApp)
+}
+
+export function verifyOffchainMessageHash(index) {
+  cy.get(messageHash)
+    .eq(index)
+    .invoke('text')
+    .then((text) => {
+      if (!checkers.startsWith0x(text)) {
+        throw new Error(`Message at index ${index} does not start with '0x': ${text}`)
+      }
+    })
+}
+
+export function checkMessageInfobox() {
+  cy.get(messageInfobox).within(() => {
+    main.verifyTextVisibility(messageInfoBoxData)
+  })
+}
+
+export function clickOnMessageDetails() {
+  cy.get(messageDetails).click()
+}

cypress/e2e/pages/safeapps.pages.js

@@ -89,6 +89,8 @@ export const transferStr = 'Transfer'
 export const successStr = 'Success'
 export const failedStr = 'Failed'
 
+export const dummyTxStr = 'Trigger dummy tx (safe.txs.send)'
+export const signOnchainMsgStr = 'Sign message (on-chain)'
 export const pinWalletConnectStr = /pin walletconnect/i
 export const transactionBuilderStr = 'Transaction Builder'
 export const testAddressValueStr = 'testAddressValue'
@@ -126,6 +128,14 @@ export const permissionCheckboxNames = {
   fullscreen: 'Fullscreen',
 }
 
+export function triggetOffChainTx() {
+  cy.contains(dummyTxStr).click()
+}
+
+export function triggetOnChainTx() {
+  cy.contains(signOnchainMsgStr).click()
+}
+
 export function verifyWarningDefaultAppMsgIsDisplayed() {
   cy.get('p').contains(warningDefaultAppStr).should('be.visible')
   cy.wait(1000)
@@ -145,6 +155,7 @@ export function verifyLinkName(name) {
 
 export function clickOnApp(app) {
   cy.contains(app).click()
+  cy.wait(2000)
 }
 
 export function verifyNoAppsTextPresent() {

cypress/e2e/regression/messages_offchain.cy.js

@@ -3,8 +3,12 @@ import * as main from '../pages/main.page.js'
 import * as createTx from '../pages/create_tx.pages.js'
 import * as msg_data from '../../fixtures/txmessages_data.json'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as modal from '../pages/modals.page'
+import * as messages from '../pages/messages.pages.js'
+import * as msg_confirmation_modal from '../pages/modals/message_confirmation.pages.js'
 
 let staticSafes = []
+const offchainMessage = 'Test message 2 off-chain'
 
 const typeMessagesGeneral = msg_data.type.general
 const typeMessagesOffchain = msg_data.type.offChain
@@ -46,7 +50,7 @@ describe('Offchain Messages tests', () => {
     )
   })
 
-  it('Verify exapanded details for simple off-chain message', () => {
+  it('Verify exapanded details for EIP 191 off-chain message', () => {
     createTx.clickOnTransactionItemByIndex(2)
     cy.contains(typeMessagesOffchain.message2).should('be.visible')
   })
@@ -71,4 +75,14 @@ describe('Offchain Messages tests', () => {
 
     main.verifyTextVisibility(values)
   })
+
+  it('Verify confirmation window is displayed for unsigned message', () => {
+    messages.clickOnMessageSignBtn(2)
+    msg_confirmation_modal.verifyConfirmationWindowTitle(modal.modalTitiles.confirmMsg)
+    msg_confirmation_modal.verifyMessagePresent(offchainMessage)
+    msg_confirmation_modal.clickOnMessageDetails()
+    msg_confirmation_modal.verifyOffchainMessageHash(0)
+    msg_confirmation_modal.verifyOffchainMessageHash(1)
+    msg_confirmation_modal.checkMessageInfobox()
+  })
 })

cypress/e2e/regression/messages_popup.cy.js

@@ -0,0 +1,72 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as modal from '../pages/modals.page.js'
+import * as apps from '../pages/safeapps.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import * as ls from '../../support/localstorage_data.js'
+import * as messages from '../pages/messages.pages.js'
+import * as msg_confirmation_modal from '../pages/modals/message_confirmation.pages.js'
+
+let staticSafes = []
+const safeApp = 'Safe Test App'
+const onchainMessage = 'Message 1'
+let iframeSelector
+
+describe('Messages popup window tests', () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  beforeEach(() => {
+    cy.clearLocalStorage()
+    cy.visit(constants.appsCustomUrl + staticSafes.SEP_STATIC_SAFE_10)
+    main.acceptCookies()
+    iframeSelector = `iframe[id="iframe-${constants.safeTestAppurl}"]`
+  })
+
+  it('Verify off-chain message popup window can be triggered', () => {
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__customSafeApps_11155111,
+      ls.customApps(constants.safeTestAppurl).safeTestApp,
+    )
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__SafeApps__browserPermissions,
+      ls.appPermissions(constants.safeTestAppurl).grantedPermissions,
+    )
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__SafeApps__infoModal,
+      ls.appPermissions(constants.safeTestAppurl).infoModalAccepted,
+    )
+    cy.reload()
+    apps.clickOnApp(safeApp)
+    main.getIframeBody(iframeSelector).within(() => {
+      apps.triggetOffChainTx()
+    })
+    msg_confirmation_modal.verifyConfirmationWindowTitle(modal.modalTitiles.confirmTx)
+    msg_confirmation_modal.verifySafeAppInPopupWindow(safeApp)
+  })
+
+  it('Verify on-chain message popup window can be triggered', () => {
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__customSafeApps_11155111,
+      ls.customApps(constants.safeTestAppurl).safeTestApp,
+    )
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__SafeApps__browserPermissions,
+      ls.appPermissions(constants.safeTestAppurl).grantedPermissions,
+    )
+    main.addToLocalStorage(
+      constants.localStorageKeys.SAFE_v2__SafeApps__infoModal,
+      ls.appPermissions(constants.safeTestAppurl).infoModalAccepted,
+    )
+    cy.reload()
+    apps.clickOnApp(safeApp)
+    main.getIframeBody(iframeSelector).within(() => {
+      messages.enterOnchainMessage(onchainMessage)
+      apps.triggetOnChainTx()
+    })
+    msg_confirmation_modal.verifyConfirmationWindowTitle(modal.modalTitiles.confirmMsg)
+    msg_confirmation_modal.verifySafeAppInPopupWindow(safeApp)
+    msg_confirmation_modal.verifyMessagePresent(onchainMessage)
+  })
+})

cypress/support/constants.js

@@ -38,11 +38,13 @@ export const goerlySafeName = /g(ö|oe)rli-safe/
 export const sepoliaSafeName = 'sepolia-safe'
 export const goerliToken = /G(ö|oe)rli Ether/
 
+export const safeTestAppurl = 'https://safe-apps-test-app.pages.dev'
 export const TX_Builder_url = 'https://safe-apps.dev.5afe.dev/tx-builder'
 export const drainAccount_url = 'https://safe-apps.dev.5afe.dev/drain-safe'
 export const testAppUrl = 'https://safe-test-app.com'
 export const addressBookUrl = '/address-book?safe='
 export const appsUrlGeneral = '/apps?=safe='
+export const appsCustomUrl = 'apps/custom?safe='
 export const BALANCE_URL = '/balances?safe='
 export const balanceNftsUrl = '/balances/nfts?safe='
 export const transactionQueueUrl = '/transactions/queue?safe='
@@ -230,6 +232,9 @@ export const localStorageKeys = {
   SAFE_v2__safeApps: 'SAFE_v2__safeApps',
   SAFE_v2__cookies: 'SAFE_v2__cookies',
   SAFE_v2__tokenlist_onboarding: 'SAFE_v2__tokenlist_onboarding',
+  SAFE_v2__customSafeApps_11155111: 'SAFE_v2__customSafeApps-11155111',
+  SAFE_v2__SafeApps__browserPermissions: 'SAFE_v2__SafeApps__browserPermissions',
+  SAFE_v2__SafeApps__infoModal: 'SAFE_v2__SafeApps__infoModal',
 }
 
 export const connectWalletNames = {

cypress/support/localstorage_data.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 export const batchData = {
   entry0: {
     11155111: {
@@ -631,6 +632,26 @@ export const pinnedApps = {
   transactionBuilder: { 11155111: { pinned: [24], opened: [] } },
 }
 
+export const customApps = (url) => ({
+  safeTestApp: [{ url: url }],
+  grantedPermissions: {
+    [url]: [
+      { feature: 'camera', status: 'granted' },
+      { feature: 'microphone', status: 'granted' },
+    ],
+  },
+})
+
+export const appPermissions = (url) => ({
+  grantedPermissions: {
+    [url]: [
+      { feature: 'camera', status: 'granted' },
+      { feature: 'microphone', status: 'granted' },
+    ],
+  },
+  infoModalAccepted: { 11155111: { consentsAccepted: true, warningCheckedCustomApps: [] } },
+})
+
 export const cookies = {
   acceptedCookies: { necessary: true, updates: true, analytics: true },
   acceptedTokenListOnboarding: true,

cypress/support/utils/checkers.js

@@ -0,0 +1,4 @@
+export function startsWith0x(str) {
+  const pattern = /^0x/
+  return pattern.test(str)
+}

src/components/safe-messages/InfoBox/index.tsx

@@ -16,7 +16,7 @@ const InfoBox = ({
   className?: string
 }): ReactElement => {
   return (
-    <div className={classNames(css.container, className)}>
+    <div data-testid="message-infobox" className={classNames(css.container, className)}>
       <div className={css.message}>
         <SvgIcon component={InfoIcon} color="info" inheritViewBox fontSize="medium" />
         <div>

src/components/tx-flow/flows/SignMessage/SignMessage.tsx

@@ -79,7 +79,7 @@ const MessageHashField = ({ label, hashValue }: { label: string; hashValue: stri
     <Typography variant="body2" fontWeight={700} mt={2}>
       {label}:
     </Typography>
-    <Typography variant="body2" component="div">
+    <Typography data-testid="message-hash" variant="body2" component="div">
       <EthHashInfo address={hashValue} showAvatar={false} shortAddress={false} showCopyButton />
     </Typography>
   </>
@@ -302,7 +302,9 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
           <DecodedMsg message={decodedMessage} isInModal />
 
           <Accordion sx={{ my: 2, '&.Mui-expanded': { mt: 2 } }}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>SafeMessage details</AccordionSummary>
+            <AccordionSummary data-testid="message-details" expandIcon={<ExpandMoreIcon />}>
+              SafeMessage details
+            </AccordionSummary>
             <AccordionDetails>
               <MessageHashField label="SafeMessage" hashValue={safeMessageMessage} />
               <MessageHashField label="SafeMessage hash" hashValue={safeMessageHash} />