feat: E2E testing

README.md

@@ -116,9 +116,10 @@ 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 [Applitools Visual AI](https://cypress.io/) for e2e testing.
+Locally can be run by ```cypress open```
 
 ## Contribution
 
@@ -134,7 +135,7 @@ get involved!
 Stay up-to-date on the latest developments in the æternity ecosystem by following us on social media.
 
 - [Forum](https://forum.aeternity.com/)
-- [X](https://x.com/aeternity)
+  - [X](https://x.com/aeternity)
 - [Youtube](https://www.youtube.com/@aeternityblockchain)
 - [Reddit](https://www.reddit.com/r/Aeternity/)
 - [Linkedin](https://www.linkedin.com/company/aeternity)

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

@@ -56,6 +56,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",