feat: E2E testing (#780)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>

README.md

@@ -116,9 +116,9 @@ Supports [evergreen](https://nuxt.com/blog/v3#the-browser-and-nodejs-support) br
 The core browser set targets the 2 most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari
 on a yearly basis.
 
-## Tooling
+## Testing
 
-This project uses [Applitools Visual AI](https://applitools.com/) as part of its automated testing.
+This project uses [Cypress](https://cypress.io/) for e2e testing. Tests can be executed using the command ```yarn e2e:open```.
 
 ## Contribution
 

cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  env: {
+    accountAddress: 'ak_gZ55FLJoGEfF5gJ2xJU7j9uSH3fEjoTZq3ygQG8gYA4no6GFW',
+    contractAddress: 'ct_s5ZB6cGCqS5QbUboQBK8CWwpknKRSajrt8b1EQRp4t4R5D47e',
+    microblockAddress: 'mh_27HKqcut9U9xDwEAf3Lz6evTxY4rfy7odKeSnQaqu45iQesjyj',
+    nftAddress: 'ct_2UVjVLvt2NycqbfJWywixyYm68iVvkiVS9wubiQRjp9WeQtfpK',
+    transactionAddress: 'th_2Yafj84tsuxskvJnzqGcvthrpDUX8gZE84RXVUwXvkSJxmxbc1',
+    oracleAddress: 'ok_2w2Gkp9mwThn6jWdJi5Leuh3P5Zj7oJ6gyoHa8KnKzWwEVSnKf',
+    tokenAddress: 'ct_2qyFRzXzTyPCtPKZQ32EPXqxxAcgiWqtADV3amcBVVPYQRKZm7',
+    stateChannelAddress: 'ch_2Qo4r6u3Bq1ZMnPL7GpjLLsATaEgMK5BnYnoi68hzLL5QuKbev',
+    name: 'testaensrawpointers.chain',
+    keyblockId: '947025',
+  },
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    experimentalRunAllSpecs: true,
+  },
+  viewportWidth: 1280,
+  viewportHeight: 720,
+  defaultCommandTimeout: 30000,
+})

cypress/e2e/app/accountDetail.cy.js

@@ -0,0 +1,17 @@
+describe('account detail', () => {
+  it('should display account detail', () => {
+    cy.visit(`/accounts/${Cypress.env('accountAddress')}`)
+
+    cy.get('.account-details-panel').should('be.visible')
+    cy.get('.account-activities-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Transactions').click()
+    cy.get('.account-transactions-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'AENS Names').click()
+    cy.get('.account-names-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Tokens').click()
+    cy.get('.account-tokens-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/contractDetail.cy.js

@@ -0,0 +1,15 @@
+describe('contract detail', () => {
+  it('should display contract detail', () => {
+    cy.visit(`/contracts/${Cypress.env('contractAddress')}`)
+
+    cy.get('.contract-details-panel').should('be.visible')
+    cy.get('.contract-call-transactions-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Events').click()
+    cy.get('.contract-events-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Contract').click()
+    cy.get('.contract-verified-table').should('be.visible')
+    cy.get('.code-editor').should('be.visible')
+  })
+})

cypress/e2e/app/contracts.cy.js

@@ -0,0 +1,8 @@
+describe('contracts', () => {
+  it('should display contracts', () => {
+    cy.visit('/contracts')
+
+    cy.get('.contracts-table').should('be.visible')
+    cy.get('.line-chart').should('be.visible')
+  })
+})

cypress/e2e/app/homepage.cy.js

@@ -0,0 +1,12 @@
+describe('homepage', () => {
+  it('should display homepage', () => {
+    cy.visit('/')
+
+    cy.get('.stats-panel').should('be.visible')
+    cy.get('.dashboard-state-channels-panel table').should('be.visible')
+    cy.get('.dashboard-auctions-panel table').should('be.visible')
+    cy.get('.dashboard-names-panel table').should('be.visible')
+    cy.get('.dashboard-keyblock-panel table').should('be.visible')
+    cy.get('.search-bar').should('be.visible')
+  })
+})

cypress/e2e/app/keyblockDetail.cy.js

@@ -0,0 +1,8 @@
+describe('keyblock details', () => {
+  it('should display keyblock detail', () => {
+    cy.visit(`/keyblocks/${Cypress.env('keyblockId')}`)
+
+    cy.get('.keyblock-details-panel__controls').should('be.visible')
+    cy.get('.keyblock-microblock-panel').should('be.visible')
+  })
+})

cypress/e2e/app/microblockDetail.cy.js

@@ -0,0 +1,8 @@
+describe('microblock details', () => {
+  it('should display microblock detail', () => {
+    cy.visit(`/microblocks/${Cypress.env('microblockAddress')}`)
+
+    cy.get('.microblock-details-panel table').should('be.visible')
+    cy.get('.microblock-transactions-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/nameDetail.cy.js

@@ -0,0 +1,9 @@
+describe('name detail', () => {
+  it('should display name detail', () => {
+    cy.visit(`/names/${Cypress.env('name')}`)
+
+    cy.get('.name-details-panel').should('be.visible')
+    cy.get('.name-pointers-special-panel table').should('be.visible')
+    cy.get('.name-history-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/names.cy.js

@@ -0,0 +1,14 @@
+describe('names', () => {
+  it('should display names', () => {
+    cy.visit('/names')
+
+    cy.get('.line-chart').should('be.visible')
+    cy.get('.names-active-table').should('be.visible')
+
+    cy.contains('.tabs__item', 'In Auction').click()
+    cy.get('.names-in-auction-table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Expired').click()
+    cy.get('.names-expired-table').should('be.visible')
+  })
+})

cypress/e2e/app/nftDetail.cy.js

@@ -0,0 +1,11 @@
+describe('nft detail', () => {
+  it('should display nft detail', () => {
+    cy.visit(`/nfts/${Cypress.env('nftAddress')}`)
+
+    cy.get('.nfts-details-panel table').should('be.visible')
+    cy.get('.nfts-transfers-table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Inventory').click()
+    cy.get('.nfts-owners-panel__table').should('be.visible')
+  })
+})

cypress/e2e/app/nfts.cy.js

@@ -0,0 +1,7 @@
+describe('nfts', () => {
+  it('should display nfts', () => {
+    cy.visit('/nfts')
+
+    cy.get('.nfts-table').should('be.visible')
+  })
+})

cypress/e2e/app/oracleDetail.cy.js

@@ -0,0 +1,8 @@
+describe('oracle detail', () => {
+  it('should display oracle detail', () => {
+    cy.visit(`/oracles/${Cypress.env('oracleAddress')}`)
+
+    cy.get('.oracle-details-panel table').should('be.visible')
+    cy.get('.oracle-events-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/oracles.cy.js

@@ -0,0 +1,7 @@
+describe('oracles', () => {
+  it('should display oracles', () => {
+    cy.visit('/oracles')
+
+    cy.get('.oracles-table').should('be.visible')
+  })
+})

cypress/e2e/app/search.cy.js

@@ -0,0 +1,19 @@
+describe('search', () => {
+  it('should display search', () => {
+    cy.visit('/')
+
+    // loading waiting workaround
+    cy.get('.stats-panel').should('be.visible')
+
+    cy.get('.search-bar__input').type('c')
+    cy.get('.search-bar__submit').click()
+
+    cy.get('.search-names-table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Tokens').click()
+    cy.get('.search-tokens-table').should('be.visible')
+
+    cy.contains('.tabs__item', 'NFTs').click()
+    cy.get('.search-nfts-table').should('be.visible')
+  })
+})

cypress/e2e/app/stateChannelDetail.cy.js

@@ -0,0 +1,8 @@
+describe('state channel detail', () => {
+  it('should display state channel detail', () => {
+    cy.visit(`/state-channels/${Cypress.env('stateChannelAddress')}`)
+
+    cy.get('.state-channel-details-panel table').should('be.visible')
+    cy.get('.state-channel-transactions-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/stateChannels.cy.js

@@ -0,0 +1,7 @@
+describe('state channels', () => {
+  it('should display oracles', () => {
+    cy.visit('/state-channels')
+
+    cy.get('.state-channels-table').should('be.visible')
+  })
+})

cypress/e2e/app/tokenDetail.cy.js

@@ -0,0 +1,11 @@
+describe('token detail', () => {
+  it('should display token detail', () => {
+    cy.visit(`/tokens/${Cypress.env('tokenAddress')}`)
+
+    cy.get('.token-details-panel table').should('be.visible')
+    cy.get('.token-holders-panel table').should('be.visible')
+
+    cy.contains('.tabs__item', 'Events').click()
+    cy.get('.token-events-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/tokens.cy.js

@@ -0,0 +1,7 @@
+describe('tokens', () => {
+  it('should display tokens', () => {
+    cy.visit('/tokens')
+
+    cy.get('.tokens-panel').should('be.visible')
+  })
+})

cypress/e2e/app/transactionDetail.cy.js

@@ -0,0 +1,8 @@
+describe('transaction detail', () => {
+  it('transaction detail', () => {
+    cy.visit(`/transactions/${Cypress.env('transactionAddress')}`)
+
+    cy.get('.transaction-general-panel table').should('be.visible')
+    cy.get('.transaction-type-panel table').should('be.visible')
+  })
+})

cypress/e2e/app/transactions.cy.js

@@ -0,0 +1,9 @@
+describe('transactions', () => {
+  it('should display transactions', () => {
+    cy.visit('/transactions')
+
+    cy.get('.transactions-table').should('be.visible')
+    cy.get('.line-chart').should('be.visible')
+    cy.get('.transaction-statistics__panel').should('be.visible')
+  })
+})

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/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -23,7 +23,9 @@
     "lint:fix": "yarn lint:js --fix && yarn lint:style --fix",
     "lint:js": "eslint --ext .ts,.js,.vue src",
     "lint:style": "stylelint \"./src/**/*.vue\" \"src/**/*.css\"",
-    "reinstall": "rm -rf node_modules/ && yarn cache clean && yarn install"
+    "reinstall": "rm -rf node_modules/ && yarn cache clean && yarn install",
+    "e2e:run": "cypress run",
+    "e2e:open": "cypress open"
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "^13.3.2",
@@ -56,6 +58,7 @@
     "@nuxtjs/plausible": "^0.2.4",
     "@pinia/nuxt": "^0.5.1",
     "@vitejs/plugin-vue": "^5.0.4",
+    "cypress": "^13.8.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",

src/components/ContractVerifiedTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <table class="contract-verified-table__table">
+  <table class="contract-verified-table">
     <tr class="contract-verified-table__row">
       <th class="contract-verified-table__header">
         License
@@ -74,10 +74,8 @@ defineProps({
 
 <style scoped>
 .contract-verified-table {
-  &__table {
-    padding: 0 var(--space-1) var(--space-7);
-    margin-bottom: var(--space-5);
-  }
+  padding: 0 var(--space-1) var(--space-7);
+  margin-bottom: var(--space-5);
 
   &__header {
     border-bottom: 1px solid var(--color-midnight-25);
@@ -90,6 +88,5 @@ defineProps({
   &__data {
     text-align: right;
   }
-
 }
 </style>

src/components/DashboardNamesPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-panel class="names-panel">
+  <app-panel class="dashboard-names-panel">
     <dashboard-panel-header
       level="h3"
       title="NAMES RECENTLY ACTIVATED"

src/components/TheFooter.vue

@@ -116,7 +116,6 @@ const links = {
     { label: 'Middleware API documentation', url: `${MIDDLEWARE_URL}/swagger` },
     { label: 'Contribute on Github', url: 'https://github.com/aeternity/aescan' },
     { label: 'Join the Forum', url: 'https://forum.aeternity.com' },
-
   ],
 }
 </script>

src/components/TokenHoldersPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-panel>
+  <app-panel class="token-holders-panel">
     <paginated-content
       :entities="tokenHolders"
       @prev-clicked="loadPrevHolders"

src/pages/transactions/index.vue

@@ -10,7 +10,7 @@
     </template>
   </page-header>
   <template v-if="!isLoading">
-    <transactions-stats class="transactions-panel"/>
+    <transactions-statistics class="transactions-panel"/>
     <transactions-chart-panel
       :has-select="false"
       :range="CHART_INTERVALS_OPTIONS[0]"