yet another merge commit

.eslintrc.json

@@ -1,6 +1,12 @@
 {
     "env": { "browser": true, "es2021": true, "jquery": true },
-    "ignorePatterns": ["tests/", "dist/", "node_modules/", "coverage/"],
+    "ignorePatterns": [
+        "tests/",
+        "dist/",
+        "node_modules/",
+        "coverage/",
+        "cypress/"
+    ],
     "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
     "overrides": [],
     "parser": "@typescript-eslint/parser",

.github/workflows/e2e.yaml

@@ -0,0 +1,38 @@
+name: E2E tests
+
+on:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
+  push:
+    branches:
+      - master
+    paths-ignore:
+    - "*.md"
+    - LICENSE
+    - "*.yaml"
+  pull_request:
+    branches:
+      - master
+    paths-ignore:
+    - "*.md"
+    - LICENSE
+    - "*.yaml"
+
+jobs:
+  e2e:
+    name: Run e2e tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install Node.js dependencies
+        run: npm ci
+
+      - name: Run e2e tests
+        run: npm run cy:ci
+

.gitignore

@@ -4,4 +4,6 @@ locale/lang-tools/env
 __pycache__
 coverage/
 coverage.data
-chain_params.json
+chain_params.json
+cypress/snapshots/*/__diff_output__/
+cypress/screenshots/*/*(failed)*

.prettierignore

@@ -7,3 +7,4 @@ LICENSE
 package-lock.json
 dist/
 coverage/
+cypress/snapshots/html

assets/style/style.css

@@ -2733,6 +2733,20 @@ a {
     margin-bottom: 6px;
 }
 
+.giftIcons svg {
+    height:16px;
+    fill:#7A7387;
+    position:relative;
+    top:-4px;
+}
+
+.giftIconsClosed svg {
+    height:16px;
+    fill:#9621FF;
+    position:relative;
+    top:-2px;
+}
+
 .textboxTransparency {
     background-color: rgba(255, 255, 255, 15%);
     color: #fff;

cypress.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+import { existsSync, readFileSync } from 'fs';
+import cypressPlayback from '@oreillymedia/cypress-playback/addTasks.js';
+export default defineConfig({
+    e2e: {
+        baseUrl: 'http://127.0.0.1:5500',
+        defaultCommandTimeout: 10_000,
+        setupNodeEvents(on, config) {
+            cypressPlayback(on, config);
+            on('task', {
+                fileExists(filePath) {
+                    return existsSync(filePath);
+                },
+            });
+        },
+    },
+});

cypress/E2E_TESTING_GUIDE.md

@@ -0,0 +1,43 @@
+## Introduction
+
+MPW uses cypress to do e2e tests.
+To open the gui, run `npm run dev` to open the dev server.
+Then, run `npm run cy:open`. Click on e2e testing and select a browser. From there, you can select a test file to run.
+Alternatively, you can run `npm run cy:ci` to run all the specs in headless mode.
+
+## Commands
+
+Commands are defined in `cypress/support/commands.js` and provide common actions, like `createWallet` and `goToTab`. To add a command, call `Cypress.Commands.add`. To call a command, `cy.[command name]`.
+
+## Playback and snapshots
+
+To avoid relying on the actual blockchain data, we can take a snapshot of the explorer response and play it back on subsequent runs.
+To tell cypress to playback a request, use `cy.playback(METHOD, URL, OPTIONS)`.
+For example:
+```javascript
+cy.playback('GET', /explorer/, { toBeCalledAtLeast: 4 }).as('sync');
+for (let i = 0; i < 4; i++) {
+    cy.wait('@sync');
+}
+```
+Plays back 4 calls to explorer and waits for MPW to make the requests (for example, fetch pages from explorer).
+To tell cypress to record the requests, open it with the environment variable `CYPRESS_PLAYBACK_MODE=record`.
+Do not update other tests' playbacks unless necesarry, as you might have to update the tests.
+
+You can take snapshots with `.matchHtmlSnapshot`, for example:
+```javascript
+cy.get('[data-testid="activity"]')
+    .filter(':visible')
+    .matchHtmlSnapshot('activity');
+```
+Takes the HTML of the visible activity and matches it against the old version.
+If you need to update the snapshots, remove the outdated one and rerun the tests.
+
+You can also run `npm run cy:record`, and then check the appropriate `git diff`.
+
+## Should I write an e2e test?
+E2e tests are very expensive compared to other ones. If you are writing tests for a minor bug, try to write a unit test first.
+You should write e2e tests for:
+- Complex flows, especially if they are often skipped during QC due to the demanding requirements like opening a masternode or creating a proposal.
+- Subtle bugs that are not easily catched in unit testing
+

cypress/e2e/wallet_balance.cy.js

@@ -0,0 +1,33 @@
+describe('Wallet balance tests', () => {
+    beforeEach(() => {
+        cy.clearDb();
+        const now = new Date(2024, 11, 5);
+        cy.clock(now);
+        cy.playback('GET', /address/, {
+            toBeCalledAtLeast: 4,
+            matching: { ignores: ['hostname', 'port'] },
+        }).as('sync');
+        cy.visit('/');
+        cy.importWallet('DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bb');
+    });
+    it('calculates balance correctly', () => {
+        for (let i = 0; i < 5; i++) {
+            cy.wait('@sync');
+        }
+        cy.get('[data-testid="primaryBalance"]').contains('0');
+
+        for (let i = 0; i < 10; i++) {
+            cy.get('[data-testid="activity"]')
+                .filter(':visible')
+                .scrollTo('bottom');
+            cy.get('[data-testid="activityLoadMore"]')
+                .filter(':visible')
+                .click();
+        }
+        cy.get('[data-testid="activity"]')
+            .filter(':visible')
+            .matchHtmlSnapshot();
+
+        cy.goToTab('stake');
+    });
+});