Tests: Add share block tests (#4869)

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

@@ -53,6 +53,9 @@ const signBtn = '[data-testid="sign-btn"]'
 export const altImgDai = 'img[alt="DAI"]'
 export const altImgCow = 'img[alt="COW"]'
 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"]'
 
 const viewTransactionBtn = 'View transaction'
 const transactionDetailsTitle = 'Transaction details'
@@ -94,6 +97,26 @@ export const filterTypes = {
   outgoing: 'Outgoing',
   module: 'Module-based',
 }
+export function clickOnCopyLinkBtn() {
+  cy.get(copyLinkBtn).click()
+}
+
+export function verifyCopiedURL() {
+  cy.window().then((win) => {
+    cy.stub(win.navigator.clipboard, 'writeText').as('clipboardWrite')
+  })
+
+  cy.url().then((currentUrl) => {
+    clickOnCopyLinkBtn()
+
+    cy.get('@clipboardWrite').should('have.been.calledWith', currentUrl)
+  })
+}
+
+export function expandTxShareBlock() {
+  cy.get(txShareBlock).click()
+  cy.get(txShareBlockDetails).should('be.visible')
+}
 
 function clickOnRejectBtn() {
   cy.get(rejectTxBtn).click()

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

@@ -19,8 +19,8 @@ const exploreAppsBtn = '[data-testid="explore-apps-btn"]'
 const viewAllLink = '[data-testid="view-all-link"][href^="/transactions/queue"]'
 const noTxIcon = '[data-testid="no-tx-icon"]'
 const noTxText = '[data-testid="no-tx-text"]'
-const pendingTxWidget = '[data-testid="pending-tx-widget"]'
-const pendingTxItem = '[data-testid="tx-pending-item"]'
+export const pendingTxWidget = '[data-testid="pending-tx-widget"]'
+export const pendingTxItem = '[data-testid="tx-pending-item"]'
 const singleTxDetailsHeader = '[data-testid="tx-details"]'
 
 export function clickOnTxByIndex(index) {

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

@@ -49,6 +49,7 @@ export function enterProposerData(address, name) {
 
 export function clickOnSubmitProposerBtn() {
   cy.get(submitProposerBtn).click()
+  verifyProposerSuccessMsgDisplayed()
 }
 
 export function checkCreatorAddress(data) {

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

@@ -0,0 +1,70 @@
+import * as constants from '../../support/constants.js'
+import * as main from '../pages/main.page.js'
+import * as create_tx from '../pages/create_tx.pages.js'
+import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
+import { getEvents, events, checkDataLayerEvents } from '../../support/utils/gtag.js'
+
+let staticSafes = []
+
+const txs = {
+  tx1: '&id=multisig_0x5912f6616c84024cD1aff0D5b55bb36F5180fFdb_0xcfbe040521dd80d43f408c7fd3ce7d80f21e8916a04a56ff0fe5cd14eb1a508f',
+  tx2: '&id=multisig_0xBf30F749FC027a5d79c4710D988F0D3C8e217A4F_0x329f5c9429ec366e99b4f7c981417267b6718e4896182d614fbc86673e0dd39c',
+  tx3: '&id=multisig_0x09725D3c2f9bE905F8f9f1b11a771122cf9C9f35_0xd70f2f8b31ae98a7e3064f6cdb437e71d3df083a0709fb82c915fa82767a19eb',
+}
+
+describe('Transaction share block tests', { defaultCommandTimeout: 30000 }, () => {
+  before(async () => {
+    staticSafes = await getSafes(CATEGORIES.static)
+  })
+
+  it('Verify share tx block URL exists on Tx details in Queued list when additional signature is required', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_7 + txs.tx1)
+    main.verifyElementsExist([create_tx.txShareBlock])
+    create_tx.expandTxShareBlock()
+  })
+
+  it('Verify that the share block is not displayed for the executed tx', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_6 + txs.tx2)
+    main.verifyElementsCount(create_tx.txShareBlock, 0)
+  })
+
+  it('Verify that share block is displayed for the proposed for signing txs', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_31 + txs.tx3)
+    main.verifyElementsExist([create_tx.txShareBlock])
+    create_tx.expandTxShareBlock()
+  })
+
+  it('Verify click on the Copy link, copies the correct URL', () => {
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_31 + txs.tx3)
+    main.verifyElementsExist([create_tx.txShareBlock])
+    create_tx.expandTxShareBlock()
+    create_tx.verifyCopiedURL()
+  })
+
+  it('Verify the tracking for the Share block. GA: Open share block, Copy deeplink', () => {
+    const shareBlockExpanded = [
+      {
+        eventAction: events.txOpenShareBlock.action,
+        eventCategory: events.txOpenShareBlock.category,
+        event: events.txOpenShareBlock.event,
+        safeAddress: staticSafes.SEP_STATIC_SAFE_31.slice(6),
+      },
+    ]
+    const shareBlockCopiedLink = [
+      {
+        eventAction: events.txCopyShareBlockLink.action,
+        eventCategory: events.txCopyShareBlockLink.category,
+        event: events.txCopyShareBlockLink.event,
+        safeAddress: staticSafes.SEP_STATIC_SAFE_31.slice(6),
+      },
+    ]
+    cy.visit(constants.transactionUrl + staticSafes.SEP_STATIC_SAFE_31 + txs.tx3)
+    main.verifyElementsExist([create_tx.txShareBlock])
+    create_tx.expandTxShareBlock()
+    create_tx.verifyCopiedURL()
+
+    getEvents()
+    checkDataLayerEvents(shareBlockExpanded)
+    checkDataLayerEvents(shareBlockCopiedLink)
+  })
+})

apps/web/cypress/e2e/smoke/dashboard.cy.js

@@ -1,5 +1,6 @@
 import * as constants from '../../support/constants'
 import * as dashboard from '../pages/dashboard.pages'
+import * as main from '../pages/main.page.js'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 
 let staticSafes = []
@@ -40,6 +41,8 @@ describe('[SMOKE] Dashboard tests', { defaultCommandTimeout: 60000 }, () => {
   })
 
   it('[SMOKE] Verify that the last created tx in conflicting tx is showed in the widget', () => {
+    cy.get(dashboard.pendingTxWidget, { timeout: 30000 }).should('be.visible')
+    main.verifyElementsCount(dashboard.pendingTxItem, 1)
     dashboard.verifyDataInPendingTx(txData)
   })
 

apps/web/cypress/support/utils/gtag.js

@@ -1,6 +1,11 @@
 export function getEvents() {
   cy.window().then((win) => {
-    cy.wrap(win.dataLayer).as('dataLayer')
+    cy.wrap(win.dataLayer)
+      .as('dataLayer')
+      .then((dataLayer) => {
+        console.log('DataLayer:', dataLayer)
+        cy.task('log', JSON.stringify(dataLayer, null, 2))
+      })
   })
 }
 
@@ -69,4 +74,16 @@ export const events = {
     eventType: 'tx_confirmed',
     event: 'tx_confirmed',
   },
+
+  txOpenShareBlock: {
+    action: 'Open share block',
+    event: 'customClick',
+    category: 'tx-list',
+  },
+
+  txCopyShareBlockLink: {
+    action: 'Copy deeplink',
+    event: 'customClick',
+    category: 'tx-list',
+  },
 }

apps/web/src/components/transactions/TxShareLink/TxShareBlock.tsx

@@ -16,19 +16,20 @@ export function TxShareBlock({ txId }: { txId: string }): ReactElement | null {
   }
 
   return (
-    <Paper className={css.wrapper}>
+    <Paper data-testid="share-block" className={css.wrapper}>
       <Accordion className={css.accordion} onChange={onExpand}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} className={css.summary}>
           <Typography className={css.header}>Share link with other signers</Typography>
         </AccordionSummary>
-        <AccordionDetails className={css.details}>
+        <AccordionDetails data-testid="share-block-details" className={css.details}>
           If signers have previously subscribed to notifications, they will be notified about signing this transaction.
           You can also share the link with them to speed up the process.
         </AccordionDetails>
       </Accordion>
       <div className={css.copy}>
         <TxShareLink id={txId} eventLabel="share-block">
           <Button
+            data-testid="copy-link-btn"
             variant="outlined"
             size="compact"
             startIcon={<SvgIcon component={ShareIcon} inheritViewBox fontSize="small" className={css.icon} />}