Fixed cypress tests dapps.cy.ts and transfer.cy.ts

cypress.config.ts

@@ -1,72 +1,73 @@
-import { defineConfig } from "cypress"
-import { ImapFlow } from 'imapflow'
+import { defineConfig } from "cypress";
+import { ImapFlow } from 'imapflow';
 
 // Cypress doesn't work very well with cross-origin testing (different domains).
 // In order to test dApp connection, we need to get WalletConnect uri from the dApp page and pass it to the Wallet.
 // Because of that - we have this variable here, and we set/get its value through setWcUrl/getWcUrl tasks in the tests.
-let wcUrl
+let wcUrl;
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3000/#',
+    baseUrl: 'http://localhost:3000/',
     experimentalSessionAndOrigin: true,
+    includeShadowDom: true,
     // macbook 13
     viewportWidth: 1280,
     viewportHeight: 800,
     setupNodeEvents(on, config) {
       on("task", {
         "get-confirm-code": async () => {
-          const [{ email }] = config.env.ACCOUNTS
+          const [{ email }] = config.env.ACCOUNTS;
 
           const client = new ImapFlow({
             host: 'mail.devlabs.bg',
             port: 993,
             secure: true,
             auth: {
               user: email,
-              pass: config.env.EMAIL_PASSWORD
+              pass: config.env.EMAIL_PASSWORD,
             },
-            logger: false
-          })
+            logger: false,
+          });
 
-          return new Promise( async resolve => {
+          return new Promise(async resolve => {
             // Wait until client connects and authorizes
-            await client.connect()
+            await client.connect();
 
-            await client.mailboxOpen('INBOX')
+            await client.mailboxOpen('INBOX');
 
             // It returns all the emails' sequences (email index) matching the search criteria
             const confirmEmails = await client.search({
               from: '[email protected]',
               subject: 'Transaction confirmation code',
-            })
+            });
 
             // Most recent email is the email having the highest sequence
-            const mostRecentConfEmail = Math.max(...confirmEmails)
+            const mostRecentConfEmail = Math.max(...confirmEmails);
 
             // Get most recent email content
-            const { content } = await client.download(mostRecentConfEmail)
+            const { content } = await client.download(mostRecentConfEmail);
 
             content.on('data', chunk => {
-              const body = chunk.toString()
+              const body = chunk.toString();
               // Extract the code from the following msg 'Please copy this confirmation code to sign it: {code}.'
-              const code = body.match(/Please copy this confirmation code to sign it: (.*)\./)[1]
+              const code = body.match(/Please copy this confirmation code to sign it: (.*)\./)[1];
 
-              resolve(code)
-            })
+              resolve(code);
+            });
 
             // Log out and close connection
-            await client.logout()
-          })
+            await client.logout();
+          });
         },
         setWcUrl: url => {
-          return (wcUrl = url)
+          return (wcUrl = url);
         },
 
         getWcUrl: () => {
           return wcUrl;
-        }
+        },
       });
     },
   },
-});
+});

cypress/e2e/dapps.cy.ts

@@ -2,51 +2,57 @@ describe('dApps', () => {
   before(() => {
     cy.login();
     cy.saveLocalStorage();
-  })
+  });
 
   beforeEach(() => {
     cy.restoreLocalStorage();
 
     // First we get WalletConnect URI and store it at `wcUrl` variable
-    cy.origin('https://example.walletconnect.org/', () => {
+    cy.origin('https://se-sdk-dapp.vercel.app/', () => {
       cy.visit('/', {
         onBeforeLoad(win) {
-          cy.stub(win.console, 'log').as('consoleLog')
-          cy.stub(win, 'prompt').returns(null)
+          cy.stub(win.console, 'log').as('consoleLog');
         }
-      })
-
-      cy.contains('Connect to WalletConnect').click()
-      cy.contains('Copy to clipboard').click()
+      });
 
+      cy.contains('eip155:80001').click();
       // Before adding the wait time here, the WalletConnect uri was expiring in 3/10 cases,
       // and we couldn't establish a connection between the dApp and Wallet.
       // The assumption is that WalletConnect QR modal kills the uri in the case we close the dApp page very quickly.
       cy.wait(1000)
 
+      cy.get('wcm-modal-header')
+        .shadow()
+        .find('[class="wcm-action-btn"]')
+        .click();
+
+      cy.wait(1000);
+
       cy.get('@consoleLog')
-          .invoke('getCalls')
-          .then((calls) => {
-            cy.task('setWcUrl', calls[0].lastArg)
-          })
-    })
-  })
+        .invoke('getCalls')
+        .then((calls) => {
+          cy.task('setWcUrl', calls[1].lastArg);
+        });
+    });
+  });
 
-  it('Connects to a dApp', async() => {
-    const wcUrl = await cy.task('getWcUrl')
+  it('Connects to a dApp', () => {
+    cy.task('getWcUrl').then((wcUrl) => {
+      cy.visit('/wallet/dashboard');
 
-    cy.visit('/wallet/dashboard')
+      cy.url().should('include', '/wallet/dashboard'); // Wait for URL to include '/wallet/dashboard'
 
-    // Wait for the initial wallet load
-    cy.wait(1000)
+      cy.window().then(win => {
+        cy.stub(win, 'prompt').returns(wcUrl);
+      });
 
-    cy.window().then(win => {
-      cy.stub(win, 'prompt').returns(wcUrl)
-    })
+      cy.get('[data-testid="dapp-dropdown"]').click();
+      cy.wait(1000);
 
-    cy.get('[data-testid="dapp-dropdown"]').click()
-    cy.get('[data-testid="connect-btn"]').click()
+      cy.get('[data-testid="connect-btn"]').click();
+      cy.wait(1000);
 
-    cy.contains('Successfully connected to WalletConnect Example').should('be.visible')
-  })
-})
+      cy.contains('React App with ethers').should('be.visible');
+    });
+  });
+});

cypress/e2e/transfer.cy.ts

@@ -11,7 +11,8 @@ describe('Transfering funds', () => {
   })
 
   it('Sends funds via Quick account', () => {
-    cy.visit('/wallet/transfer')
+    cy.visit('/wallet/dashboards')
+    cy.contains('Transfer').click();
 
     // Wait for the initial wallet load.
     // There are a lot of fetch requests under the hood.