Skip to content

Commit

Permalink
Merge branch 'master' into ordered_array
Browse files Browse the repository at this point in the history
  • Loading branch information
panleone authored Nov 8, 2024
2 parents 1fee3d8 + 6307592 commit 249f3a3
Show file tree
Hide file tree
Showing 18 changed files with 2,729 additions and 40 deletions.
8 changes: 7 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
38 changes: 38 additions & 0 deletions .github/workflows/e2e.yaml
Original file line number Diff line number Diff line change
@@ -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

4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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)*
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ LICENSE
package-lock.json
dist/
coverage/
cypress/snapshots/html
17 changes: 17 additions & 0 deletions cypress.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { defineConfig } from 'cypress';
import { existsSync, readFileSync } from 'fs';

Check warning on line 2 in cypress.config.js

View workflow job for this annotation

GitHub Actions / Run linters

'readFileSync' is defined but never used
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);
},
});
},
},
});
41 changes: 41 additions & 0 deletions cypress/E2E_TESTING_GUIDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
## 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.

## 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

30 changes: 30 additions & 0 deletions cypress/e2e/wallet_balance.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
describe('Wallet balance tests', () => {
beforeEach(() => {
cy.clearDb();
const now = new Date(2024, 11, 5);
cy.clock(now);
cy.playback('GET', /explorer/, { toBeCalledAtLeast: 4 }).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('1,297');

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');
});
});
Binary file not shown.
Loading

0 comments on commit 249f3a3

Please sign in to comment.