feat: cypress

.github/workflows/node.js.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
 name: Node.js CI
 
 on:
@@ -16,17 +13,29 @@ jobs:
         node-version: [18.x]
 
     steps:
-      - uses: szenius/[email protected]
+      - name: Set Timezone
+        uses: szenius/[email protected]
         with:
           timezoneLinux: 'America/Sao_Paulo'
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
+
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js ${{ matrix.node-version }}
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn build
-      # - run: yarn test:debug-heap
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build project
+        run: yarn build
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn start

cypress.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    supportFile: false,
   },
   video: false,
   screenshotOnRunFailure: false,

cypress/e2e/navigation_overview.cy.ts

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+
+describe('Navigation Test', () => {
+  const pages = [
+    '/',
+    '/transactions',
+    '/accounts',
+    '/assets',
+    '/blocks',
+    '/validators',
+    '/proposals',
+    '/ito',
+    '/marketplaces',
+    '/create-transaction',
+  ];
+
+  pages.forEach(page => {
+    it(`should navigate to ${page} and not break`, () => {
+      cy.visit(page);
+      cy.contains('404').should('not.exist'); // Ensure no 404 error
+      cy.get('body').should('be.visible'); // Ensure body is visible
+    });
+  });
+});

cypress/e2e/pages/accounts.cy.ts

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+
+const accountsLinks: string[] = [];
+const accountsAmount: number = 10;
+
+describe('Accounts Page', () => {
+  beforeEach(() => {
+    cy.visit('/accounts');
+  });
+
+  it('should load the accounts page', () => {
+    cy.get('h1').contains('Accounts').should('be.visible');
+  });
+
+  Array.from({ length: accountsAmount }).forEach((_, index) => {
+    it(`Should find account #${index + 1} from list`, () => {
+      cy.get(`[data-testid="table-row-${index}"]`)
+        .first()
+        .find('a')
+        .invoke('attr', 'href')
+        .then(href => {
+          href && accountsLinks.push(href);
+        });
+    });
+  });
+});
+
+describe('Account Details Page', () => {
+  Array.from({ length: accountsAmount }).forEach((_, index) => {
+    it(`should load the account page #${index + 1} and check it's tabs`, () => {
+      cy.visit(accountsLinks[index]);
+
+      cy.get('h1').contains('Account').should('be.visible');
+
+      cy.get('[data-testid="klv-balance"]').should('be.visible');
+
+      cy.get(`[data-testid="tab"]`).each(($tab, index) => {
+        cy.wrap($tab).click();
+        cy.get(`[data-testid="tab-content-${index}"]`).should('be.visible');
+      });
+    });
+  });
+});

cypress/e2e/pages/transactions.cy.ts

@@ -0,0 +1,51 @@
+/// <reference types="cypress" />
+
+import { ContractsIndex } from '../../../src/types/contracts';
+
+const transaction_links: string[] = [];
+
+describe('Transactions Page', () => {
+  beforeEach(() => {
+    cy.visit('/transactions');
+  });
+
+  it('should load the transactions page', () => {
+    cy.get('h1').contains('Transactions').should('be.visible');
+  });
+
+  Object.values(ContractsIndex).forEach(type => {
+    if (typeof type !== 'string') return;
+
+    it(`should filter transactions by type - ${type}`, () => {
+      const statusFilter = cy
+        .get(':nth-child(2) > [data-testid="selector"]')
+        .click();
+      statusFilter.contains('Success').click();
+
+      const typeFilter = cy.get(':nth-child(3) > [data-testid="selector"]');
+      typeFilter.click();
+
+      typeFilter.contains(type).click();
+
+      cy.get('[data-testid="table-row-0"]')
+        .first()
+        .find('a')
+        .invoke('attr', 'href')
+        .then(href => {
+          href && transaction_links.push(href);
+        });
+    });
+  });
+});
+
+describe('Transaction Details Page', () => {
+  Object.values(ContractsIndex).forEach((type, index) => {
+    if (typeof type !== 'string') return;
+
+    it(`should load the transaction details page - ${type}`, () => {
+      cy.visit(transaction_links[index]);
+
+      cy.get('h1').contains('Transaction Details').should('be.visible');
+    });
+  });
+});

cypress/e2e/pages/validators.cy.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+const validatorsLinks: string[] = [];
+const validatorsAmount: number = 10;
+
+describe('Validators Page', () => {
+  beforeEach(() => {
+    cy.visit('/validators');
+  });
+
+  it('should load the validators page', () => {
+    cy.get('h1').contains('Validators').should('be.visible');
+  });
+
+  Array.from({ length: validatorsAmount }).forEach((_, index) => {
+    it(`Should find validator #${index + 1} from list`, () => {
+      cy.get(`[data-testid="table-row-${index}"]`)
+        .find('a')
+        .invoke('attr', 'href')
+        .then(href => {
+          href && validatorsLinks.push(href);
+        });
+    });
+  });
+});
+
+describe('Validator Details Page', () => {
+  Array.from({ length: validatorsAmount }).forEach((_, index) => {
+    it(`should load the validator page #${index + 1}`, () => {
+      cy.visit(validatorsLinks[index]);
+
+      cy.get('[data-testid="total-stake"]').should('be.visible');
+    });
+  });
+});

cypress/e2e/search_bar.cy.ts

@@ -0,0 +1,46 @@
+/// <reference types="cypress" />
+
+describe('Search bar', () => {
+  it('should search for an asset', () => {
+    cy.visit('/');
+
+    cy.wait(1000);
+
+    cy.get('[data-testid="search"]').type('KLV', { delay: 300 });
+
+    cy.get('[data-testid="card-item"]').contains('KLV');
+    cy.get('[data-testid="search"]').type('{enter}');
+
+    cy.url().should('include', '/asset/KLV');
+  });
+
+  it('should search for a block', () => {
+    cy.visit('/');
+
+    cy.wait(1000);
+
+    cy.get('[data-testid="search"]').type('100', { delay: 300 });
+
+    cy.get('[data-testid="card-item"]').contains('1');
+    cy.get('[data-testid="search"]').type('{enter}');
+    cy.url().should('include', '/block/1');
+  });
+
+  it('should search for an address', () => {
+    cy.visit('/');
+
+    cy.wait(1000);
+
+    cy.get('[data-testid="search"]').type(
+      'klv1nnu8d0mcqnxunqyy5tc7kj7vqtp4auy4a24gv35fn58n2qytl9xsx7wsjl',
+      { delay: 10 },
+    );
+
+    cy.get('[data-testid="card-item"]').contains('wsjl');
+    cy.get('[data-testid="search"]').type('{enter}');
+    cy.url().should(
+      'include',
+      '/account/klv1nnu8d0mcqnxunqyy5tc7kj7vqtp4auy4a24gv35fn58n2qytl9xsx7wsjl',
+    );
+  });
+});

package.json

@@ -8,10 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
-    "test:debug-speed": "jest --config=./jest-slow-report.config.ts",
-    "test:debug-heap": "jest --logHeapUsage",
-    "test-cov": "jest --coverage",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
     "postinstall": "husky install"
   },
   "dependencies": {
@@ -66,38 +64,37 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@sinonjs/fake-timers": "9.1.2",
-    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "14.1.1",
+    "@types/cypress": "^1.1.3",
     "@types/dompurify": "^3.0.5",
     "@types/gtag.js": "^0.0.12",
     "@types/ioredis": "4.28.2",
-    "@types/jest": "27.4.1",
     "@types/nprogress": "0.2.0",
     "@types/react": "18.2.42",
     "@types/react-dom": "^18.3.0",
     "@types/react-i18next": "^8.1.0",
     "@types/react-leaflet": "2.8.2",
     "@types/react-leaflet-markercluster": "3.0.0",
     "@types/react-syntax-highlighter": "15.5.6",
-    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "bech32": "^2.0.0",
+    "cypress": "^13.12.0",
     "eslint": "^9.0.0",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "git-commit-msg-linter": "4.5.0",
     "husky": "8.0.1",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "28.0.2",
-    "jest-slow-test-reporter": "^1.0.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "3.0.1",
     "react-circular-progressbar": "^2.1.0",
     "ts-node": "10.7.0",
     "typescript": "^5.4.4",
     "typescript-eslint": "^7.6.0"
+  },
+  "resolutions": {
+    "jackspeak": "^2.3.5"
   }
 }

src/components/Form/EncodingConverter/styles.ts

@@ -62,7 +62,7 @@ export const ContentButton = styled.div<{ selected?: boolean }>`
       }
     `}
 
-  :active {
+  &:active {
     box-shadow: 0 0 10px 5px ${({ theme }) => theme.border};
   }
 `;

src/components/InputGlobal/index.tsx

@@ -91,7 +91,7 @@ const Input: React.FC<PropsWithChildren<InputGlobal>> = ({
 
   return (
     <Container {...containerProps}>
-      <input {...inputProps} />
+      <input {...inputProps} data-testid="search" />
       <Search onClick={handleSearch} id={'SearchIcon'} />
       {showTooltip && (
         <>

src/components/MultsignComponent/styles.ts

@@ -118,7 +118,7 @@ export const ContentTitle = styled.section`
     font-weight: 400;
     font-size: 0.8rem;
 
-    :visited {
+    &:visited {
       color: ${({ theme }) => theme.gray};
     }
     &:hover {