test: add address book

cypress.json

@@ -1,3 +1,4 @@
 {
-  "baseUrl": "http://localhost:3000/app"
+  "baseUrl": "http://localhost:3000/app",
+  "trashAssetsBeforeRuns" : true
 }

cypress/downloads/gnosis-safe-address-book-2022-04-27.csv

@@ -0,0 +1,5 @@
+address,name,chainId
+0x730F87dA2A3C6721e2196DFB990759e9bdfc5083,rinkeby user 1,4
+0xFD71c1ABadBD37F60E4C8F208386dDFC4d2Bf01f,rinkeby user 2,4
+0x61a0c717d18232711bC788F19C9Cd56a43cc8872,gno user 1,100
+0x66bE167c36B3b75D1130BBbDec69f9f04E7DA4fC,gno user 2,100

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/address_book.spec.js

@@ -0,0 +1,67 @@
+import 'cypress-file-upload'
+import { deleteDownloadsFolder } from '../utils/deleteDownloadsFolder'
+const path = require('path')
+
+const NAME = 'Owner1'
+const EDITED_NAME = 'Edited Owner1'
+const ADDRESS = '0x61a0c717d18232711bC788F19C9Cd56a43cc8872'
+const ENS_NAME = 'francotest.eth'
+const RINKEBY_TEST_SAFE = 'rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac'
+const GNO_TEST_SAFE = 'gno:0xB8d760a90a5ed54D3c2b3EFC231277e99188642A'
+const RINKEBY_CSV_ENTRY = {
+  name: 'rinkeby user 1',
+  address: '0x730F87dA2A3C6721e2196DFB990759e9bdfc5083',
+}
+const GNO_CSV_ENTRY = {
+  name: 'gno user 1',
+  address: '0x61a0c717d18232711bC788F19C9Cd56a43cc8872',
+}
+
+describe('Address book', () => {
+  beforeEach(deleteDownloadsFolder)
+
+  it('should add and remove Address Book entries', () => {
+    cy.visit(`/${RINKEBY_TEST_SAFE}/address-book`)
+
+    cy.findByText('Create entry', { timeout: 6000 }).click()
+    cy.findByTestId('create-entry-input-name').type(NAME)
+    cy.findByTestId('create-entry-input-address').type(ENS_NAME)
+    cy.findByTestId('save-new-entry-btn-id').click()
+
+    cy.findByText(NAME).should('exist')
+    cy.findByText(ADDRESS).should('exist')
+
+    cy.get('[title="Edit entry"]').click({ force: true }) //This is because the button is hidden
+    cy.findByTestId('create-entry-input-name').clear().type(EDITED_NAME)
+    cy.findByTestId('save-new-entry-btn-id').click()
+    cy.findByText(NAME).should('not.exist')
+    cy.findByText(EDITED_NAME).should('exist')
+
+    cy.get('[title="Delete entry"]').click({ force: true }) //This is because the button is hidden
+    cy.findByText('Delete').should('exist').click()
+    cy.findByText(EDITED_NAME).should('not.exist')
+
+    cy.wait(4000) // Waiting for notifications to dissapear before clicking "Import"
+    cy.get('[data-track="address-book: Import"]').click()
+    cy.get('[type="file"]').attachFile('../utils/files/address_book_test.csv')
+    cy.get('.modal-footer').findByText('Import').click()
+    cy.findByText(RINKEBY_CSV_ENTRY.name).should('exist')
+    cy.findByText(RINKEBY_CSV_ENTRY.address).should('exist')
+    cy.get('nav').findByText('Rinkeby').click()
+    cy.findByText('Gnosis Chain').click()
+    cy.visit(`/${GNO_TEST_SAFE}/address-book`)
+    cy.findByText(GNO_CSV_ENTRY.name).should('exist')
+    cy.findByText(GNO_CSV_ENTRY.address).should('exist')
+
+    const date = new Date()
+    const day = date.getUTCDate() < 10 ? `0${date.getUTCDate()}` : date.getUTCMonth()
+    const month = date.getUTCMonth() + 1 < 10 ? `0${date.getUTCMonth() + 1}` : date.getUTCMonth() + 1
+    const year = date.getUTCFullYear()
+    const fileName = `gnosis-safe-address-book-${year}-${month}-${day}.csv`
+
+    cy.get('[data-track="address-book: Export"]').click()
+    cy.findByText('Download').click()
+    const downloadsFolder = Cypress.config('downloadsFolder')
+    cy.readFile(path.join(downloadsFolder, fileName)).should('exist')
+  })
+})

cypress/integration/adv_options.spec.js

@@ -0,0 +1,12 @@
+describe('Advanced Options', () => {
+  it('Advanced options and gas estimation/price', () => {
+    cy.visit('/rin:0x1a42dfaF749B4Cc1Ca904038F30cA771AFC8B6ae/settings/advanced')
+    cy.findByText('Accept selection').click
+    cy.get('[data-testid="current-nonce"]').invoke('text').as('theNumber')
+    cy.get('@theNumber').then((theNumber) => {
+      cy.log(theNumber)
+    })
+    cy.get('[data-testid="sidebar"]').findByText('Apps').click()
+    cy.get('[alt="Transaction Builder Logo"]').scrollIntoView({ duration: 1000 }).click()
+  })
+})

cypress/integration/app_layout.spec.js

@@ -1,20 +1,20 @@
-const { createArrayTypeNode } = require("typescript")
+const { createArrayTypeNode } = require('typescript')
 
-describe('App layout', () =>{
-    it('Check footer presence', () =>{
-        cy.visit("/")
-        cy.get('footer').should('exist')
-
-        cy.visit("/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/settings/details")
-        cy.get('footer').should('exist')
-
-        cy.visit("/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/transactions/history")
-        cy.get('footer').should('not.exist')
+describe('App layout', () => {
+  it('Check footer presence', () => {
+    cy.visit('/')
+    cy.get('footer').should('exist')
 
-        cy.visit("/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/balances")
-        cy.get('footer').should('not.exist')
+    cy.visit('/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/settings/details')
+    cy.get('footer').should('exist')
 
-        cy.visit("/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/apps")
-        cy.get('footer').should('not.exist')
-    })
-})
+    cy.visit('/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/transactions/history')
+    cy.get('footer').should('not.exist')
+
+    cy.visit('/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/balances')
+    cy.get('footer').should('not.exist')
+
+    cy.visit('/rin:0xFfDC1BcdeC18b1196e7FA04246295DE3A17972Ac/apps')
+    cy.get('footer').should('not.exist')
+  })
+})

cypress/integration/load_safe.spec.js

@@ -1,5 +1,5 @@
-import 'cypress-file-upload';
-const path = require('path');
+import 'cypress-file-upload'
+const path = require('path')
 
 const SAFE_ENS_NAME = 'safe.test'
 const SAFE_ENS_NAME_TRANSLATED = '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
@@ -11,55 +11,58 @@ const OWNER_ENS_DEFAULT_NAME = 'francoledger.eth'
 const OWNER_ADDRESS = '0x6f965E48347AF3Df65c14CCc176A9CbeCEa0eDb5'
 
 describe('Load Safe', () => {
-    it('Should load an existing Safe', () => {
-        cy.visit('/')
-        cy.findByText('Accept selection').click()
+  it('Should load an existing Safe', () => {
+    cy.visit('/')
+    cy.findByText('Accept selection').click()
 
-        cy.get('[data-track="load-safe: Open stepper"]').click()
-        cy.findByText('Add existing Safe').should('exist')
-        cy.wait(1000) //Have to wait because clicking the switch network fails sometimes if not
+    cy.get('[data-track="load-safe: Open stepper"]').click()
+    cy.findByText('Add existing Safe').should('exist')
+    cy.wait(1000) //Have to wait because clicking the switch network fails sometimes if not
 
-        //Step 1
-        cy.findByTestId('select-network-step').find('button').click()
-        cy.get('[aria-labelledby="select-network"]').should('exist')
-        cy.findByText('Ethereum').click()
-        cy.get('nav').findByText('Ethereum').should('exist')
-        cy.findByTestId('select-network-step').findByText('Ethereum').should('exist')
-        cy.findByTestId('select-network-step').find('button').click()
-        cy.findByText('Rinkeby').click()
-        cy.get('[data-track="load-safe: Continue"]').click()
+    //Step 1
+    cy.findByTestId('select-network-step').find('button').click()
+    cy.get('[aria-labelledby="select-network"]').should('exist')
+    cy.findByText('Ethereum').click()
+    cy.get('nav').findByText('Ethereum').should('exist')
+    cy.findByTestId('select-network-step').findByText('Ethereum').should('exist')
+    cy.findByTestId('select-network-step').find('button').click()
+    cy.findByText('Rinkeby').click()
+    cy.get('[data-track="load-safe: Continue"]').click()
 
-        //Step2
-        cy.findByTestId('load-safe-name-field').should('have.attr', 'placeholder').should('contain','rinkeby-safe')
-        cy.findByTestId('load-safe-name-field').type('Test safe name').should('have.value', 'Test safe name')
+    //Step2
+    cy.findByTestId('load-safe-name-field').should('have.attr', 'placeholder').should('contain', 'rinkeby-safe')
+    cy.findByTestId('load-safe-name-field').type('Test safe name').should('have.value', 'Test safe name')
 
-        cy.findByTestId('load-safe-address-field').type('RandomText')
-        cy.findByText(INVALID_INPUT_ERROR_MSG).should('exist')
-        cy.findByTestId('load-safe-address-field').clear().type(NON_CONTRACT_ADDRESS)
-        cy.findByText(INVALID_ADDRESS_ERROR_MSG).should('exist')
-        cy.findByTestId('load-safe-address-field').clear().type(SAFE_ENS_NAME).should('have.value', SAFE_ENS_NAME_TRANSLATED)
-        cy.findByTestId('qr-icon').click()
-        cy.get('[class="paper"]').find('button').contains('Upload an image').click()
-        cy.get('[type="file"]').attachFile('../utils/files/rinkeby_safe_QR.png')
-        cy.findByTestId('load-safe-address-field').should('have.value', SAFE_QR_CODE_ADDRESS)
-        cy.findByTestId('safeAddress-valid-address-adornment').should('exist')
-        cy.wait(3000) //have to wait or after clicking next what loads is the owners of the previous valids safe, not the one from the QR code
-        cy.get('[type="submit"]').click()
+    cy.findByTestId('load-safe-address-field').type('RandomText')
+    cy.findByText(INVALID_INPUT_ERROR_MSG).should('exist')
+    cy.findByTestId('load-safe-address-field').clear().type(NON_CONTRACT_ADDRESS)
+    cy.findByText(INVALID_ADDRESS_ERROR_MSG).should('exist')
+    cy.findByTestId('load-safe-address-field')
+      .clear()
+      .type(SAFE_ENS_NAME)
+      .should('have.value', SAFE_ENS_NAME_TRANSLATED)
+    cy.findByTestId('qr-icon').click()
+    cy.get('[class="paper"]').find('button').contains('Upload an image').click()
+    cy.get('[type="file"]').attachFile('../utils/files/rinkeby_safe_QR.png')
+    cy.findByTestId('load-safe-address-field').should('have.value', SAFE_QR_CODE_ADDRESS)
+    cy.findByTestId('safeAddress-valid-address-adornment').should('exist')
+    cy.wait(3000) //have to wait or after clicking next what loads is the owners of the previous valids safe, not the one from the QR code
+    cy.get('[type="submit"]').click()
 
-        //Step3
-        cy.findByPlaceholderText(OWNER_ENS_DEFAULT_NAME).parents('div[data-testid="owner-row"]').findByText(OWNER_ADDRESS)
-        cy.findByPlaceholderText(OWNER_ENS_DEFAULT_NAME).type('Test Owner Name').should('have.value', 'Test Owner Name')
-        cy.get('[data-track="load-safe: Continue"]').click()
+    //Step3
+    cy.findByPlaceholderText(OWNER_ENS_DEFAULT_NAME).parents('div[data-testid="owner-row"]').findByText(OWNER_ADDRESS)
+    cy.findByPlaceholderText(OWNER_ENS_DEFAULT_NAME).type('Test Owner Name').should('have.value', 'Test Owner Name')
+    cy.get('[data-track="load-safe: Continue"]').click()
 
-        //Review Step
-        cy.findByText('Test safe name').should('exist')
-        cy.findByText('Test Owner Name').should('exist')
-        cy.get('[data-track="load-safe: Add"]').click()
+    //Review Step
+    cy.findByText('Test safe name').should('exist')
+    cy.findByText('Test Owner Name').should('exist')
+    cy.get('[data-track="load-safe: Add"]').click()
 
-        //Safe Loaded
-        cy.findByTestId('sidebar').findByText('Test safe name')
-        cy.findByTestId('sidebar').find('nav').findByText('Settings').click()
-        cy.findByTestId('sidebar').find('nav').findByText('Owners').click()
-        cy.findByText('Test Owner Name')
-    })
-})
+    //Safe Loaded
+    cy.findByTestId('sidebar').findByText('Test safe name')
+    cy.findByTestId('sidebar').find('nav').findByText('Settings').click()
+    cy.findByTestId('sidebar').find('nav').findByText('Owners').click()
+    cy.findByText('Test Owner Name')
+  })
+})

cypress/plugins/index.js

@@ -12,11 +12,25 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+import { rmdir } from 'fs'
+
 /**
  * @type {Cypress.PluginConfig}
  */
-// eslint-disable-next-line no-unused-vars
-module.exports = () => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+module.exports = (on) => {
+  on('task', {
+    deleteFolder(folderName) {
+      console.log('deleting folder %s', folderName)
+
+      return new Promise((resolve, reject) => {
+        rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
+          if (err) {
+            console.error(err)
+            return reject(err)
+          }
+          resolve(null)
+        })
+      })
+    },
+  })
 }

cypress/utils/deleteDownloadsFolder.js

@@ -0,0 +1,7 @@
+/**
+ * @type () => void
+ */
+export const deleteDownloadsFolder = () => {
+  const downloadsFolder = Cypress.config('downloadsFolder')
+  cy.task('deleteFolder', downloadsFolder)
+}

cypress/utils/files/address_book_test.csv

@@ -0,0 +1,5 @@
+address,name,chainId
+0x730F87dA2A3C6721e2196DFB990759e9bdfc5083,rinkeby user 1, 4
+0xFD71c1ABadBD37F60E4C8F208386dDFC4d2Bf01f,rinkeby user 2, 4
+0x61a0c717d18232711bC788F19C9Cd56a43cc8872,gno user 1, 100
+0x66bE167c36B3b75D1130BBbDec69f9f04E7DA4fC,gno user 2, 100

package.json

@@ -26,7 +26,7 @@
     "generate-types:erc721": "cross-env typechain --target=web3-v1 --out-dir './src/types/contracts' './node_modules/@openzeppelin/contracts/build/contracts/ERC721.json'",
     "generate-types:spendingLimit": "cross-env typechain --target=web3-v1 --out-dir './src/types/contracts' ./node_modules/@gnosis.pm/safe-modules-deployments/dist/assets/**/*.json",
     "generate-types:safeDeployments": "cross-env typechain --target=web3-v1 --out-dir './src/types/contracts' ./node_modules/@gnosis.pm/safe-deployments/dist/assets/**/*.json",
-    "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
+    "lint:check": "eslint './src/**/*.{ts,tsx}'",
     "lint:fix": "yarn lint:check --fix",
     "postinstall": "patch-package && yarn generate-types",
     "prettier:check": "yarn prettier --check",
@@ -44,7 +44,7 @@
     "cypress:run": "node ./scripts/cypress.js run"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
+    "*.{ts,tsx}": [
       "eslint --fix",
       "prettier --write"
     ]
@@ -167,7 +167,7 @@
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^9.5.1",
-    "cypress-file-upload":"^5.0.8",
+    "cypress-file-upload": "^5.0.8",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint": "^7.32.0",