GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add UI tests for the recent transactions page

Browse source
This commit is contained in:
Felipe Knorr Kuhn 2026-04-05 17:33:39 +09:00
parent abf9091c07
commit f8efb7e32b
No known key found for this signature in database
GPG key ID: 79619B52BB097C1A
2 changed files with 62 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/cypress/e2e/mainnet/recent-transactions.spec.ts Normal file
View file

@ -0,0 +1,59 @@
const baseModule = Cypress.env('BASE_MODULE');
describe('Recent Transactions Page', () => {
if (baseModule === 'mempool') {
it('updates the transaction list over time', () => {
cy.visit('/txs');
cy.waitForSkeletonGone();
cy.get('[data-cy="transactions-list"] tr').should('have.length.greaterThan', 0);
cy.get('[data-cy="transactions-list"] tr .table-cell-txid a').then(($rows) => {
const initialTxids = [...$rows].map((el) => el.textContent.trim());
cy.wait(15000);
cy.get('[data-cy="transactions-list"] tr .table-cell-txid a').then(($updatedRows) => {
const updatedTxids = [...$updatedRows].map((el) => el.textContent.trim());
expect(updatedTxids).to.not.deep.equal(initialTxids);
});
});
});
it('pauses updates when clicking the clock icon', () => {
cy.visit('/txs');
cy.waitForSkeletonGone();
cy.get('[data-cy="transactions-list"] tr').should('have.length.greaterThan', 0);
cy.get('[data-cy="btn-pause"]').click();
cy.get('[data-cy="transactions-list"] tr .table-cell-txid a').then(($rows) => {
const pausedTxids = [...$rows].map((el) => el.textContent.trim());
cy.wait(10000);
cy.get('[data-cy="transactions-list"] tr .table-cell-txid a').then(($updatedRows) => {
const updatedTxids = [...$updatedRows].map((el) => el.textContent.trim());
expect(updatedTxids).to.deep.equal(pausedTxids);
});
});
});
it('caps the list when changing the limit to 10', () => {
cy.visit('/txs');
cy.waitForSkeletonGone();
cy.get('[data-cy="transactions-list"] tr').should('have.length.greaterThan', 0);
// Wait for the list to accumulate transactions
cy.get('[data-cy="transactions-list"] tr', { timeout: 30000 }).should('have.length.greaterThan', 10);
cy.get('[data-cy="limit-10"]').click();
cy.get('[data-cy="transactions-list"] tr').should('have.length.at.most', 10);
});
}
});

5
frontend/src/app/components/recent-transactions-list/recent-transactions-list.component.html
View file

@ -8,11 +8,12 @@
type="button"
class="btn btn-primary btn-sm"
[class.active]="txLimit === limit"
[attr.data-cy]="'limit-' + limit"
(click)="setLimit(limit)">
{{ limit }}
</button>
</div>
<button class="btn btn-primary btn-sm btn-pause" [class.active]="isPaused" (click)="togglePause()" title="Pause/Resume">
<button class="btn btn-primary btn-sm btn-pause" [class.active]="isPaused" (click)="togglePause()" title="Pause/Resume" data-cy="btn-pause">
<fa-icon [icon]="['fas', 'clock']" [fixedWidth]="true"></fa-icon>
</button>
</div>
@ -26,7 +27,7 @@
<th class="table-cell-vsize" i18n="transaction.vsize|Transaction Virtual Size">vSize</th>
<th class="table-cell-fees" i18n="transaction.fee|Transaction fee">Fee</th>
</thead>
<tbody *ngIf="transactions$ | async as transactions; else loadingSkeleton">
<tbody data-cy="transactions-list" *ngIf="transactions$ | async as transactions; else loadingSkeleton">
<tr *ngFor="let transaction of transactions; trackBy: trackByTxid">
<td class="table-cell-txid">
<a [routerLink]="['/tx' | relativeUrl, transaction.txid]">