Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[E2E] Add Safe - qr code + ENS name + name validation #2820

Merged
merged 10 commits into from
Nov 24, 2023
Merged

[E2E] Add Safe - qr code + ENS name + name validation #2820

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
23032bf
qr code + ENS name + name validation
francovenica Nov 20, 2023
2b11616
fix QR code test
francovenica Nov 22, 2023
1c2a243
adding locators at the top
francovenica Nov 22, 2023
1f53512
merging with dev only this file
francovenica Nov 23, 2023
92ab6b4
Merge branch 'dev' into load-test-fixes
francovenica Nov 23, 2023
abe72eb
Merge branch 'dev' into load-test-fixes
francovenica Nov 24, 2023
7864234
error message testid
francovenica Nov 24, 2023
b7f122d
removing wrong id test
francovenica Nov 24, 2023
d08545d
remove constant
francovenica Nov 24, 2023
22cb3b6
empty commit for signing purposes
francovenica Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions cypress/e2e/pages/load_safe.pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ import * as constants from '../../support/constants'
const addExistingAccountBtnStr = 'Add existing one'
const contactStr = 'Name, address & network'
const invalidAddressFormatErrorMsg = 'Invalid address format'
const invalidAddressNameLengthErrorMsg = 'Maximum 50 symbols'

const safeDataForm = '[data-testid=load-safe-form]'
const nameInput = 'input[name="name"]'
const addressInput = 'input[name="address"]'
const sideBarIcon = '[data-testid=ChevronRightIcon]'
const sidebarCheckIcon = '[data-testid=CheckIcon]'
const sideBarIcon = '[data-testid="ChevronRightIcon"]'
const sidebarCheckIcon = '[data-testid="CheckIcon"]'
const addressStepNextBtn = '[data-testid="load-safe-next-btn"]'
const qrCodeBtn = '[data-testid="address-qr-scan"]'
const nextBtnStr = 'Next'
const addBtnStr = 'Add'
const settingsBtnStr = 'Settings'
Expand Down Expand Up @@ -52,13 +55,23 @@ export function verifyIncorrectAddressErrorMessage() {
cy.get(addressInput).parent().prev('label').contains(invalidAddressFormatErrorMsg)
}

export function verifyNameLengthErrorMessage() {
cy.get(nameInput).parent().prev('label').contains(invalidAddressNameLengthErrorMsg)
}

export function ScanQRCode(image) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move locators to top of the document to follow established practise and reuse them in the code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them at the top

cy.get('[data-testid="address-qr-scan"]').click()
cy.contains('Upload an image').click()
cy.get('[type="file"]').attachFile(image)
}

export function inputAddress(address) {
cy.get(addressInput).clear().type(address)
}

export function verifyAddressInputValue() {
export function verifyAddressInputValue(safeAddress) {
// The address field should be filled with the "bare" QR code's address
const [, address] = constants.SEPOLIA_TEST_SAFE_1.split(':')
const [, address] = safeAddress.split(':')
cy.get('input[name="address"]').should('have.value', address)
}

Expand Down Expand Up @@ -119,3 +132,7 @@ export function verifyTransactionSectionIsVisible() {
export function verifyNumberOfTransactions(startNumber, endNumber) {
cy.get(`span:contains("${startNumber} out of ${endNumber}")`).should('have.length', 1)
}

export function verifyNextButtonStatus(param) {
cy.get(addressStepNextBtn).should(param)
}
43 changes: 26 additions & 17 deletions cypress/e2e/smoke/load_safe.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,26 +42,35 @@
safe.verifyIncorrectAddressErrorMessage()
safe.inputNameAndAddress(testSafeName, constants.SEPOLIA_TEST_SAFE_1)

// Type an invalid address
// cy.get('input[name="address"]').clear().type(EOA_ADDRESS)
// cy.get('@addressLabel').contains(INVALID_ADDRESS_ERROR_MSG)

// Type a ENS name
// TODO: register a goerli ENS name for the test Safe
// cy.get('input[name="address"]').clear().type(SAFE_ENS_NAME)
// giving time to the ENS name to be translated
// cy.get('input[name="address"]', { timeout: 10000 }).should('have.value', `rin:${SAFE_ENS_NAME_TRANSLATED}`)

// Uploading a QR code
// TODO: fix this
// cy.findByTestId('QrCodeIcon').click()
// cy.contains('Upload an image').click()
// cy.get('[type="file"]').attachFile('../fixtures/goerli_safe_QR.png')

safe.verifyAddressInputValue()
safe.verifyAddressInputValue(constants.SEPOLIA_TEST_SAFE_1)
safe.verifyNextButtonStatus('be.enabled')
safe.clickOnNextBtn()
})

it('Verify names cannot have more than 50 chars', () => {
safe.inputName(main.generateRandomString(51))
safe.verifyNameLengthErrorMessage()
})

it('Verify ENS name is translated to a valid address', () => {
safe.inputAddress(constants.ENS_TEST_ETH)
safe.verifyAddressInputValue(constants.ETH_ENS_SAFE_ADDRESS_7)
safe.verifyNextButtonStatus('be.enabled')
safe.clickOnNextBtn()
})

it('Verify a valid QR code is accepted', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need some help here.
If I leave it commented this way then the ScanQRCode function runs just fine. But for some reason if I uncomment all those lines, the function ScanQRCode is ignored, the VerifyAddressInputValue function (that checks if the address in the input is valid) kicks in first and of course fails since the QR code was not uploaded. I don't know why this happens

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason for it is that ETH_ENS_SAFE_ADDRESS_6 does not exist it throws the error as undefined. To fix it add ETH_ENS_SAFE_ADDRESS_6 to constants.js. After this fix everything should work as expected.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wrote the wrong name of the constant. Fixed. Thanks

safe.ScanQRCode(constants.VALID_QR_CODE_PATH)
// safe.verifyAddressInputValue(constants.ETH_ENS_SAFE_ADDRESS_6)
// safe.verifyNextButtonStatus('be.enabled')
// safe.clickOnNextBtn()
})

it.only('Verify a non QR code is not accepted', () => {

Check failure on line 69 in cypress/e2e/smoke/load_safe.cy.js

View workflow job for this annotation

GitHub Actions / ESLint Results

prettier/prettier 

Delete `·`
safe.ScanQRCode(constants.INVALID_QR_CODE_PATH)
cy.contains('The QR could not be read')
})

it('Verify custom name in the first owner an be set', () => {
safe.inputNameAndAddress(testSafeName, constants.SEPOLIA_TEST_SAFE_1)
safe.clickOnNextBtn()
Expand Down
Binary file removed cypress/fixtures/goerli_safe_QR.png
View file
Open in desktop
Binary file not shown.
Binary file added cypress/fixtures/invalid_image_QR_test.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cypress/fixtures/sepolia_test_safe_QR.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions cypress/support/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const SEPOLIA_TEST_SAFE_3 = 'sep:0x6E834E9D04ad6b26e1525dE1a37BFd9b215f40
export const SEPOLIA_TEST_SAFE_4 = 'sep:0x03042B890b99552b60A073F808100517fb148F60'
export const SEPOLIA_TEST_SAFE_5 = 'sep:0xBd69b0a9DC90eB6F9bAc3E4a5875f437348b6415'
export const SEPOLIA_TEST_SAFE_6 = 'sep:0x6d0b6F96f665Bb4490f9ddb2e450Da2f7e546dC1'
export const ETH_ENS_SAFE_ADDRESS_7 = 'eth:0x8675B754342754A30A2AeF474D114d8460bca19b'
export const GNO_TEST_SAFE = 'gno:0xB8d760a90a5ed54D3c2b3EFC231277e99188642A'
export const PAGINATION_TEST_SAFE = 'gor:0x850493a15914aAC05a821A3FAb973b4598889A7b'
export const TEST_SAFE = 'gor:0x04f8b1EA3cBB315b87ced0E32deb5a43cC151a91'
Expand All @@ -25,6 +26,9 @@ export const SIDEBAR_ADDRESS = '0x04f8...1a91'
export const ENS_TEST_SEPOLIA = 'testenssepolia.eth'
export const ENS_TEST_GOERLI = 'goerli-safe-test.eth'
export const ENS_TEST_SEPOLIA_INVALID = 'ivladitestenssepolia.eth'
export const ENS_TEST_ETH = 'mainnetsafe.eth'
export const VALID_QR_CODE_PATH = '../fixtures/sepolia_test_safe_QR.png' //converts to SEPOLIA_TEST_SAFE_6 address
export const INVALID_QR_CODE_PATH = '../fixtures/invalid_image_QR_test.png' //A blank square

export const BROWSER_PERMISSIONS_KEY = `${LS_NAMESPACE}SafeApps__browserPermissions`
export const SAFE_PERMISSIONS_KEY = `${LS_NAMESPACE}SafeApps__safePermissions`
Expand Down Expand Up @@ -152,3 +156,7 @@ export const localStorageKeys = {
export const connectWalletNames = {
e2e: 'E2E Wallet',
}

export const longNames = {
safeName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
}
2 changes: 1 addition & 1 deletion src/components/common/ScanQRModal/ScanQRButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ScanQRButton = ({ onScan }: Props): ReactElement => {
return (
<>
<Track {...MODALS_EVENTS.SCAN_QR}>
<IconButton onClick={openQrModal}>
<IconButton data-testid="address-qr-scan" onClick={openQrModal}>
<SvgIcon component={QrCodeIcon} inheritViewBox color="primary" fontSize="small" />
</IconButton>
</Track>
Expand Down
8 changes: 7 additions & 1 deletion src/components/new-safe/load/steps/SetAddressStep/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,13 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
<Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
Back
</Button>
<Button type="submit" variant="contained" size="stretched" disabled={!isValid}>
<Button
data-testid="load-safe-next-btn"
type="submit"
variant="contained"
size="stretched"
disabled={!isValid}
>
Next
</Button>
</Box>
Expand Down
Loading