From 771825f2242b8ce70f1c9a2bec3ed745cdadd149 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:57:39 -0800
Subject: [PATCH 1/2] Add offset to blockchain blocks classes and locators

---
 .../blockchain-blocks.component.html          | 66 ++++++++++++-------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 29df378a4..17c5709fd 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -1,64 +1,86 @@
-<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [style.left]="static ? (offset || 0) + 'px' : null" *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
+<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr"
+  [style.left]="static ? (offset || 0) + 'px' : null"
+  *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
     <ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
-      <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]" [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
+      <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
+        class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
+        id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
+        [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
         <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
           class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
         <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
-          <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
+          <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
+            }}</a>
         </div>
         <div class="block-body">
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-fees'" class="fees">
-            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
+            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
+              i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
           </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="block?.extras?.feeRange">
-            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{ block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
+          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
+            *ngIf="block?.extras?.feeRange">
+            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{
+            block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container
+              i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
           </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-fee-span'" class="fee-span" *ngIf="!block?.extras?.feeRange">
+          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
+            *ngIf="!block?.extras?.feeRange">
             &nbsp;
           </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-total-fees'" *ngIf="showMiningInfo" class="block-size">
+          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
+            class="block-size">
             <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
           </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + 'block-size'" *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
+          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
+            class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
           <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
-            <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
-            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+            <ng-container
+              *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }}
+              transaction</ng-template>
+            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }}
+              transactions</ng-template>
           </div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-time'" class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
+          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
+            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
         </div>
         <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
-          <a [attr.data-cy]="'bitcoin-block-' + i + '-pool'" class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+          <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge badge-primary"
+            [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
             {{ block.extras.pool.name}}</a>
         </div>
       </div>
     </ng-container>
     <ng-template #placeholderBlock>
       <ng-container *ngIf="block && block.placeholder; else loadingBlock">
-        <div [attr.data-cy]="'bitcoin-block-' + i" class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
- 
+        <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i"
+          class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}"
+          id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
+
         </div>
       </ng-container>
     </ng-template>
     <ng-template #loadingBlock>
       <ng-container *ngIf="block && block.loading">
         <div class="flashing">
-          <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"></div>
+          <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
+            [ngStyle]="blockStyles[i]"></div>
         </div>
       </ng-container>
     </ng-template>
   </div>
-<div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="arrowTransition" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
+  <div [hidden]="!arrowVisible" id="arrow-up" [style.transition]="arrowTransition"
+    [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
 </div>
 
 <ng-template #loadingBlocksTemplate>
   <div class="blocks-container" [class.time-ltr]="timeLtr">
     <div class="flashing">
-      <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn" >
-        <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}" [ngStyle]="emptyBlockStyles[i]"></div>
+      <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn">
+        <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
+          [ngStyle]="emptyBlockStyles[i]"></div>
       </div>
     </div>
   </div>
 </ng-template>
-

From 635fadd13f39b83deba8953fe7cdf58b958645d0 Mon Sep 17 00:00:00 2001
From: Felipe Knorr Kuhn <100320+knorrium@users.noreply.github.com>
Date: Mon, 13 Feb 2023 16:58:25 -0800
Subject: [PATCH 2/2] Update mainnet tests: increase blocks to 22, update
 locators and skip a test

---
 frontend/cypress/e2e/mainnet/mainnet.spec.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/cypress/e2e/mainnet/mainnet.spec.ts b/frontend/cypress/e2e/mainnet/mainnet.spec.ts
index d6fe94dac..5ab3f9ce9 100644
--- a/frontend/cypress/e2e/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/e2e/mainnet/mainnet.spec.ts
@@ -64,7 +64,7 @@ describe('Mainnet', () => {
     it('loads the status screen', () => {
       cy.visit('/status');
       cy.get('#mempool-block-0').should('be.visible');
-      cy.get('[id^="bitcoin-block-"]').should('have.length', 8);
+      cy.get('[id^="bitcoin-block-"]').should('have.length', 22);
       cy.get('.footer').should('be.visible');
       cy.get('.row > :nth-child(1)').invoke('text').then((text) => {
         expect(text).to.match(/Incoming transactions.* vB\/s/);
@@ -219,11 +219,11 @@ describe('Mainnet', () => {
     describe('blocks navigation', () => {
 
       describe('keyboard events', () => {
-        it('loads first blockchain blocks visible and keypress arrow right', () => {
+        it('loads first blockchain block visible and keypress arrow right', () => {
           cy.viewport('macbook-16');
           cy.visit('/');
           cy.waitForSkeletonGone();
-          cy.get('.blockchain-blocks-0 > a').click().then(() => {
+          cy.get('[data-cy="bitcoin-block-offset-0-index-0"]').click().then(() => {
             cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
             cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
             cy.waitForPageIdle();
@@ -233,11 +233,11 @@ describe('Mainnet', () => {
           });
         });
 
-        it('loads first blockchain blocks visible and keypress arrow left', () => {
+        it('loads first blockchain block visible and keypress arrow left', () => {
           cy.viewport('macbook-16');
           cy.visit('/');
           cy.waitForSkeletonGone();
-          cy.get('.blockchain-blocks-0 > a').click().then(() => {
+          cy.get('[data-cy="bitcoin-block-offset-0-index-0"]').click().then(() => {
             cy.waitForPageIdle();
             cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
             cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');
@@ -246,11 +246,11 @@ describe('Mainnet', () => {
           });
         });
 
-        it('loads last blockchain blocks and keypress arrow right', () => {
+        it.skip('loads last blockchain block and keypress arrow right', () => { //Skip for now as "last" doesn't really work with infinite scrolling
           cy.viewport('macbook-16');
           cy.visit('/');
           cy.waitForSkeletonGone();
-          cy.get('.blockchain-blocks-4 > a').click().then(() => {
+          cy.get('bitcoin-block-offset-0-index-7').click().then(() => {
             cy.waitForPageIdle();
 
             // block 6
@@ -309,7 +309,7 @@ describe('Mainnet', () => {
           cy.viewport('macbook-16');
           cy.visit('/');
           cy.waitForSkeletonGone();
-          cy.get('.blockchain-blocks-0 > a').click().then(() => {
+          cy.get('[data-cy="bitcoin-block-offset-0-index-0"]').click().then(() => {
             cy.waitForPageIdle();
             cy.get('[ngbtooltip="Next Block"] > .ng-fa-icon > .svg-inline--fa').should('not.exist');
             cy.get('[ngbtooltip="Previous Block"] > .ng-fa-icon > .svg-inline--fa').should('be.visible');