From 3598c18c584ff0e24a4672c0193f4f787f8260d3 Mon Sep 17 00:00:00 2001 From: Michael <30682308+mike10ca@users.noreply.github.com> Date: Wed, 15 Nov 2023 14:14:17 +0100 Subject: [PATCH] Tests: Cypress seedless google flow (#2812) * Add seedless google flow happy path tests --- cypress/e2e/pages/create_wallet.pages.js | 55 ++++++++++++++++++- cypress/e2e/pages/main.page.js | 4 ++ cypress/e2e/pages/navigation.page.js | 5 ++ cypress/e2e/pages/owners.pages.js | 6 ++ cypress/e2e/pages/safeapps.pages.js | 8 +++ .../e2e/safe-apps/browser_permissions.cy.js | 4 +- cypress/e2e/smoke/create_safe_google.cy.js | 50 +++++++++++++++++ src/components/common/SocialSigner/index.tsx | 2 + .../create/steps/ReviewStep/index.tsx | 21 +++++-- .../create/steps/StatusStep/StatusMessage.tsx | 2 +- .../create/steps/StatusStep/index.tsx | 2 +- .../safe-apps/SafeAppsInfoModal/index.tsx | 1 + .../sidebar/SidebarNavigation/config.tsx | 2 +- .../tx-flow/flows/SuccessScreen/index.tsx | 4 +- 14 files changed, 153 insertions(+), 13 deletions(-) create mode 100644 cypress/e2e/pages/navigation.page.js create mode 100644 cypress/e2e/smoke/create_safe_google.cy.js diff --git a/cypress/e2e/pages/create_wallet.pages.js b/cypress/e2e/pages/create_wallet.pages.js index ba4f9f8599..ed5fa6db89 100644 --- a/cypress/e2e/pages/create_wallet.pages.js +++ b/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') diff --git a/cypress/e2e/pages/main.page.js b/cypress/e2e/pages/main.page.js index 2c6df5a423..b3a4c2de03 100644 --- a/cypress/e2e/pages/main.page.js +++ b/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() } diff --git a/cypress/e2e/pages/navigation.page.js b/cypress/e2e/pages/navigation.page.js new file mode 100644 index 0000000000..e5deb73c08 --- /dev/null +++ b/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() +} diff --git a/cypress/e2e/pages/owners.pages.js b/cypress/e2e/pages/owners.pages.js index 6e2e30aef3..cb4c521b67 100644 --- a/cypress/e2e/pages/owners.pages.js +++ b/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) diff --git a/cypress/e2e/pages/safeapps.pages.js b/cypress/e2e/pages/safeapps.pages.js index fb7401609b..f349d2034e 100644 --- a/cypress/e2e/pages/safeapps.pages.js +++ b/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') } diff --git a/cypress/e2e/safe-apps/browser_permissions.cy.js b/cypress/e2e/safe-apps/browser_permissions.cy.js index 59cbceffed..97f816dc75 100644 --- a/cypress/e2e/safe-apps/browser_permissions.cy.js +++ b/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() }) }) diff --git a/cypress/e2e/smoke/create_safe_google.cy.js b/cypress/e2e/smoke/create_safe_google.cy.js new file mode 100644 index 0000000000..f29ded27e1 --- /dev/null +++ b/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() + }) +}) diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx index bef9d919b6..0282008027 100644 --- a/src/components/common/SocialSigner/index.tsx +++ b/src/components/common/SocialSigner/index.tsx @@ -114,6 +114,7 @@ export const SocialSigner = ({ {isSocialLogin && userInfo ? ( - diff --git a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx index f9b469476e..90300a14bc 100644 --- a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx +++ b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx @@ -64,7 +64,7 @@ const StatusMessage = ({ status, isError }: { status: SafeCreationStatus; isErro return ( <> - + {stepInfo.description} diff --git a/src/components/new-safe/create/steps/StatusStep/index.tsx b/src/components/new-safe/create/steps/StatusStep/index.tsx index 642b2ccd05..30c1cba83f 100644 --- a/src/components/new-safe/create/steps/StatusStep/index.tsx +++ b/src/components/new-safe/create/steps/StatusStep/index.tsx @@ -105,7 +105,7 @@ export const CreateSafeStatus = ({ data, setProgressColor, setStep }: StepRender - diff --git a/src/components/safe-apps/SafeAppsInfoModal/index.tsx b/src/components/safe-apps/SafeAppsInfoModal/index.tsx index 5cf4ba7f35..924c2597fc 100644 --- a/src/components/safe-apps/SafeAppsInfoModal/index.tsx +++ b/src/components/safe-apps/SafeAppsInfoModal/index.tsx @@ -112,6 +112,7 @@ const SafeAppsInfoModal = ({ return ( ({ width: '450px', backgroundColor: palette.background.paper, diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx index 359ec63826..cb613e1f8c 100644 --- a/src/components/sidebar/SidebarNavigation/config.tsx +++ b/src/components/sidebar/SidebarNavigation/config.tsx @@ -44,7 +44,7 @@ export const navItems: NavItem[] = [ }, { label: 'Settings', - icon: , + icon: , href: AppRoutes.settings.setup, }, ] diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx index c7556fc201..6ee5b332c6 100644 --- a/src/components/tx-flow/flows/SuccessScreen/index.tsx +++ b/src/components/tx-flow/flows/SuccessScreen/index.tsx @@ -71,13 +71,13 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
{txLink && ( - )} -