Tests: Cypress seedless google flow (#2812)

* Add seedless google flow happy path tests

cypress/e2e/pages/create_wallet.pages.js

@@ -1,4 +1,5 @@
 import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
 
 const welcomeLoginScreen = '[data-testid="welcome-login"]'
 const expandMoreIcon = 'svg[data-testid="ExpandMoreIcon"]'
@@ -11,12 +12,64 @@ export const removeOwnerBtn = 'button[aria-label="Remove owner"]'
 const connectingContainer = 'div[class*="connecting-container"]'
 const createNewSafeBtn = 'span[data-track="create-safe: Continue to creation"]'
 const connectWalletBtn = 'Connect wallet'
-
+const googleConnectBtn = '[data-testid="google-connect-btn"]'
+const googleSignedinBtn = '[data-testid="signed-in-account-btn"]'
+const googleAccountInfoHeader = '[data-testid="open-account-center"]'
+const reviewStepOwnerInfo = '[data-testid="review-step-owner-info"]'
+const reviewStepNextBtn = '[data-testid="review-step-next-btn"]'
+const safeCreationStatusInfo = '[data-testid="safe-status-info"]'
+const startUsingSafeBtn = '[data-testid="start-using-safe-btn"]'
+const sponsorIcon = '[data-testid="sponsor-icon"]'
+const networkFeeSection = '[data-tetid="network-fee-section"]'
+
+const sponsorStr = 'Your account is sponsored by Goerli'
+const safeCreationProcessing = 'Transaction is being executed'
+const safeCreationComplete = 'Your Safe Account is being indexed'
 const changeNetworkWarningStr = 'Change your wallet network'
 const safeAccountSetupStr = 'Safe Account setup'
 const policy1_2 = '1/1 policy'
 export const walletName = 'test1-sepolia-safe'
 export const defaltSepoliaPlaceholder = 'Sepolia Safe'
+const welcomeToSafeStr = 'Welcome to Safe'
+
+export function verifySafeIsBeingCreated() {
+  cy.get(safeCreationStatusInfo).should('have.text', safeCreationProcessing)
+}
+
+export function verifySafeCreationIsComplete() {
+  cy.get(safeCreationStatusInfo).should('exist').and('have.text', safeCreationComplete)
+  cy.get(startUsingSafeBtn).should('exist').click()
+  cy.get(welcomeToSafeStr).should('exist')
+}
+
+export function clickOnReviewStepNextBtn() {
+  cy.get(reviewStepNextBtn).click()
+}
+export function verifyOwnerInfoIsPresent() {
+  return cy.get(reviewStepOwnerInfo).shoul('exist')
+}
+
+export function verifySponsorMessageIsPresent() {
+  main.verifyElementsExist([sponsorIcon, networkFeeSection])
+  // Goerli is generated
+  cy.get(networkFeeSection).contains(sponsorStr).should('exist')
+}
+
+export function verifyGoogleConnectBtnIsDisabled() {
+  cy.get(googleConnectBtn).should('be.disabled')
+}
+
+export function verifyGoogleConnectBtnIsEnabled() {
+  cy.get(googleConnectBtn).should('not.be.disabled')
+}
+
+export function verifyGoogleSignin() {
+  return cy.get(googleSignedinBtn).should('exist')
+}
+
+export function verifyGoogleAccountInfoInHeader() {
+  return cy.get(googleAccountInfoHeader).should('exist')
+}
 
 export function verifyPolicy1_1() {
   cy.contains(policy1_2).should('exist')

cypress/e2e/pages/main.page.js

@@ -1,8 +1,12 @@
 import * as constants from '../../support/constants'
 
 const acceptSelection = 'Accept selection'
+const executeStr = 'Execute'
 export const modalDialogCloseBtn = '[data-testid="modal-dialog-close-btn"]'
 
+export function clickOnExecuteBtn() {
+  cy.get('button').contains(executeStr).click()
+}
 export function clickOnSideMenuItem(item) {
   cy.get('p').contains(item).click()
 }

cypress/e2e/pages/navigation.page.js

@@ -0,0 +1,5 @@
+export const sideNavSettingsIcon = '[data-testid="settings-nav-icon"]'
+
+export function clickOnSideNavigation(option) {
+  cy.get(option).should('exist').click()
+}

cypress/e2e/pages/owners.pages.js

@@ -20,6 +20,7 @@ const thresholdOption = 'li[role="option"]'
 const existingOwnerAddressInput = (index) => `input[name="owners.${index}.address"]`
 const existingOwnerNameInput = (index) => `input[name="owners.${index}.name"]`
 const singleOwnerNameInput = 'input[name="name"]'
+const finishTransactionBtn = '[data-testid="finish-transaction-btn"]'
 
 const disconnectBtnStr = 'Disconnect'
 const notConnectedStatus = 'Connect'
@@ -31,11 +32,16 @@ const backbtnStr = 'Back'
 const removeOwnerStr = 'Remove owner'
 const selectedOwnerStr = 'Selected owner'
 const addNewOwnerStr = 'Add new owner'
+const processedTransactionStr = 'Transaction was successful'
 
 export const safeAccountNonceStr = 'Safe Account nonce'
 export const nonOwnerErrorMsg = 'Your connected wallet is not an owner of this Safe Account'
 export const disconnectedUserErrorMsg = 'Please connect your wallet'
 
+export function verifyOwnerTransactionComplted() {
+  cy.get(processedTransactionStr).should('exist')
+  cy.get(finishTransactionBtn).should('exist')
+}
 export function verifyNumberOfOwners(count) {
   const indices = Array.from({ length: count }, (_, index) => index)
   const names = indices.map(existingOwnerNameInput)

cypress/e2e/pages/safeapps.pages.js

@@ -7,6 +7,7 @@ export const contractMethodIndex = '[name="contractMethodIndex"]'
 export const saveToLibraryBtn = 'button[title="Save to Library"]'
 export const downloadBatchBtn = 'button[title="Download batch"]'
 export const deleteBatchBtn = 'button[title="Delete Batch"]'
+const appModal = '[data-testid="app-info-modal"]'
 
 const addBtnStr = /add/i
 const noAppsStr = /no Safe Apps found/i
@@ -208,9 +209,16 @@ function verifyDisclaimerIsVisible() {
 }
 
 export function clickOnContinueBtn() {
+  cy.get(appModal).should('exist')
   return cy.findByRole('button', { name: continueBtnStr }).click().wait(1000)
 }
 
+export function checkLocalStorage() {
+  clickOnContinueBtn().should(() => {
+    expect(window.localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY)).to.eq(localStorageItem)
+  })
+}
+
 export function verifyCameraCheckBoxExists() {
   cy.findByRole('checkbox', { name: cameraCheckBoxStr }).should('exist')
 }

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

@@ -30,8 +30,6 @@ describe('Browser permissions tests', () => {
     safeapps.verifyWarningDefaultAppMsgIsDisplayed()
     safeapps.verifyCameraCheckBoxExists()
     safeapps.clickOnContinueBtn()
-    safeapps.clickOnContinueBtn().should(() => {
-      expect(window.localStorage.getItem(constants.BROWSER_PERMISSIONS_KEY)).to.eq(safeapps.localStorageItem)
-    })
+    safeapps.checkLocalStorage()
   })
 })

cypress/e2e/smoke/create_safe_google.cy.js

@@ -0,0 +1,50 @@
+import * as constants from '../../support/constants'
+import * as main from '../pages/main.page'
+import * as createwallet from '../pages/create_wallet.pages'
+import * as owner from '../pages/owners.pages'
+import * as navigation from '../pages/navigation.page'
+
+describe('Safe creation Google tests', () => {
+  beforeEach(() => {
+    cy.visit(constants.welcomeUrl + '?chain=gor')
+    cy.clearLocalStorage()
+    main.acceptCookies()
+    // TODO: Need credentials to finish API Google login
+    // createwallet.loginGoogleAPI()
+  })
+
+  it('Verify that "Connect with Google" option is disabled for the networks without Relay on the Welcome page', () => {
+    owner.clickOnWalletExpandMoreIcon()
+    owner.clickOnDisconnectBtn()
+    createwallet.selectNetwork(constants.networks.polygon)
+    createwallet.verifyGoogleConnectBtnIsDisabled()
+  })
+
+  it.skip('Verify a successful connection with google', () => {
+    createwallet.verifyGoogleSignin()
+  })
+
+  it.skip('Verify Google account info in the header after account connection', () => {
+    createwallet.verifyGoogleAccountInfoInHeader()
+  })
+
+  it.skip('Verify a successful safe creation with a Google account', { defaultCommandTimeout: 90000 }, () => {
+    createwallet.verifyGoogleSignin().click()
+    createwallet.verifyOwnerInfoIsPresent()
+    createwallet.clickOnReviewStepNextBtn()
+    createwallet.verifySafeIsBeingCreated()
+    createwallet.verifySafeCreationIsComplete()
+  })
+
+  it.skip('Verify a successful transaction creation with Google account', { defaultCommandTimeout: 90000 }, () => {
+    createwallet.verifyGoogleSignin().click()
+    createwallet.clickOnReviewStepNextBtn()
+    createwallet.verifySafeCreationIsComplete()
+    navigation.clickOnSideNavigation(navigation.sideNavSettingsIcon)
+    owner.openAddOwnerWindow()
+    owner.typeOwnerAddress(constants.SEPOLIA_OWNER_2)
+    owner.clickOnNextBtn()
+    main.clickOnExecuteBtn()
+    owner.verifyOwnerTransactionComplted()
+  })
+})

src/components/common/SocialSigner/index.tsx

@@ -114,6 +114,7 @@ export const SocialSigner = ({
         {isSocialLogin && userInfo ? (
           <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
             <Button
+              data-testid="signed-in-account-btn"
               variant="outlined"
               sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
               onClick={onLogin}
@@ -148,6 +149,7 @@ export const SocialSigner = ({
         ) : (
           <Track {...MPC_WALLET_EVENTS.CONNECT_GOOGLE} label={isWelcomePage ? 'welcomePage' : 'navBar'}>
             <Button
+              data-testid="google-connect-btn"
               variant="outlined"
               onClick={login}
               size="small"

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -72,6 +72,7 @@ export const NetworkFee = ({
         <Typography variant="body2">
           Your account is sponsored by
           <Image
+            data-testid="sponsor-icon"
             src={SPONSOR_LOGOS[chain?.chainId || '']}
             alt={chain?.chainName || ''}
             width={16}
@@ -180,7 +181,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
           <ReviewRow
             name="Owners"
             value={
-              <Box className={css.ownersArray}>
+              <Box data-testid="review-step-owner-info" className={css.ownersArray}>
                 {data.owners.map((owner, index) => (
                   <EthHashInfo
                     address={owner.address}
@@ -224,7 +225,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
           </Grid>
         )}
 
-        <Grid container spacing={3}>
+        <Grid data-testid="network-fee-section" container spacing={3}>
           <ReviewRow
             name="Est. network fee"
             value={
@@ -248,10 +249,22 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
 
       <Box className={layoutCss.row}>
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
-          <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
+          <Button
+            data-testid="review-step-back-btn"
+            variant="outlined"
+            size="small"
+            onClick={handleBack}
+            startIcon={<ArrowBackIcon fontSize="small" />}
+          >
             Back
           </Button>
-          <Button onClick={createSafe} variant="contained" size="stretched" disabled={isDisabled}>
+          <Button
+            data-testid="review-step-next-btn"
+            onClick={createSafe}
+            variant="contained"
+            size="stretched"
+            disabled={isDisabled}
+          >
             Next
           </Button>
         </Box>

src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx

@@ -64,7 +64,7 @@ const StatusMessage = ({ status, isError }: { status: SafeCreationStatus; isErro
 
   return (
     <>
-      <Box paddingX={3} mt={3}>
+      <Box data-testid="safe-status-info" paddingX={3} mt={3}>
         <LoadingSpinner status={spinnerStatus} />
         <Typography variant="h6" marginTop={2} fontWeight={700}>
           {stepInfo.description}

src/components/new-safe/create/steps/StatusStep/index.tsx

@@ -105,7 +105,7 @@ export const CreateSafeStatus = ({ data, setProgressColor, setStep }: StepRender
           <Divider />
           <Box className={layoutCss.row}>
             <Track {...CREATE_SAFE_EVENTS.GO_TO_SAFE}>
-              <Button variant="contained" onClick={onFinish}>
+              <Button data-testid="start-using-safe-btn" variant="contained" onClick={onFinish}>
                 Start using {'Safe{Wallet}'}
               </Button>
             </Track>

src/components/safe-apps/SafeAppsInfoModal/index.tsx

@@ -112,6 +112,7 @@ const SafeAppsInfoModal = ({
   return (
     <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" height="calc(100vh - 52px)">
       <Box
+        data-testid="app-info-modal"
         sx={({ palette }) => ({
           width: '450px',
           backgroundColor: palette.background.paper,

src/components/sidebar/SidebarNavigation/config.tsx

@@ -44,7 +44,7 @@ export const navItems: NavItem[] = [
   },
   {
     label: 'Settings',
-    icon: <SvgIcon component={SettingsIcon} inheritViewBox />,
+    icon: <SvgIcon data-testid="settings-nav-icon" component={SettingsIcon} inheritViewBox />,
     href: AppRoutes.settings.setup,
   },
 ]

src/components/tx-flow/flows/SuccessScreen/index.tsx

@@ -71,13 +71,13 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
       <div className={classnames(css.row, css.buttons)}>
         {txLink && (
           <Link {...txLink} passHref target="_blank" rel="noreferrer" legacyBehavior>
-            <Button variant="outlined" size="small">
+            <Button data-testid="view-transaction-btn" variant="outlined" size="small">
               View transaction
             </Button>
           </Link>
         )}
 
-        <Button variant="contained" size="small" onClick={onFinishClick}>
+        <Button data-testid="finish-transaction-btn" variant="contained" size="small" onClick={onFinishClick}>
           Finish
         </Button>
       </div>