UI/UX: Fix blockchain-blocks skeleton. (#697)

* Fix blockchain-blocks skeleton.

* Fix blockchain skeleton background.

* Fix mempool blockchain skeleton.

* Add e2e testing.
Add tsconfig.
Fix mempool fit to screen.

* Fix wrong return.
Fix e2e testing.

* Fix blockchainblocks connectionstate.
Add init action to websocket mock.
Add e2e testing for droping websock connection.

* Ref e2e code for websocket connection.
Fix blockchain blocks skeleton.

* Fix state connections.
Remove .only e2e tests.

* Fix mempool blocks skeleton.

* Add fit screen to empty blocks.

frontend/cypress/integration/mainnet/mainnet.spec.ts

@@ -1,4 +1,4 @@
-import { emitMempoolInfo, emitWithoutMempoolInfo } from "../../support/websocket";
+import { emitMempoolInfo, dropWebSocket } from "../../support/websocket";
 
 describe('Mainnet', () => {
     beforeEach(() => {
@@ -31,6 +31,23 @@ describe('Mainnet', () => {
         });
     });
 
+    it('loads dashboard, drop websocket and reconnect', () => {
+        cy.viewport('macbook-16');
+        cy.mockMempoolSocket();
+        cy.visit('/');
+        cy.get('.badge').should('not.exist');
+        dropWebSocket();
+        cy.get('.badge').should('be.visible');        
+        cy.get('.badge', {timeout: 25000}).should('not.exist');
+        emitMempoolInfo({
+            'params': {
+              loaded: true
+            }
+        });
+        cy.get(':nth-child(1) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(2) > #bitcoin-block-0').should('not.exist');
+        cy.get(':nth-child(3) > #bitcoin-block-0').should('not.exist');
+    });
 
     it('loads the dashboard', () => {
         cy.visit('/');

frontend/cypress/support/index.d.ts

@@ -0,0 +1,10 @@
+
+/// <reference types="cypress" />
+declare namespace Cypress {
+    interface Chainable<Subject> {
+        waitForSkeletonGone(): Chainable<any>
+        waitForPageIdle(): Chainable<any>
+        mockMempoolSocket(): Chainable<any>
+        changeNetwork(network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet"): Chainable<any>
+    }
+}

frontend/cypress/support/websocket.ts

@@ -38,6 +38,7 @@ export const mockWebSocket = () => {
 				win.mockServer = server;
 				win.mockServer.on('connection', (socket) => {
 					win.mockSocket = socket;
+                    win.mockSocket.send('{"action":"init"}');
 				});
 
                 win.mockServer.on('message', (message) => {
@@ -81,4 +82,11 @@ export const emitMempoolInfo = ({
 	});
     cy.waitForSkeletonGone();
     return cy.get('#mempool-block-0');
-};
+};
+
+export const dropWebSocket = (() => {
+    cy.window().then((win) => {
+        win.mockServer.simulate("error");
+    });
+    return cy.wait(500);
+});

frontend/cypress/tsconfig.json

@@ -2,7 +2,9 @@
   "extends": "../tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
-    "sourceMap": false,
-    "types": ["cypress"]
+    "types": ["cypress"],
+    "lib": ["es2015", "dom"],
+    "allowJs": true,
+    "noEmit": true,
   }
 }