mempool/frontend/cypress/support/commands.ts

// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
// declare namespace Cypress {
//   interface Chainable<Subject = any> {
//     customCommand(param: any): typeof customCommand;
//   }
// }
//
// function customCommand(param: any): void {
//   console.warn(param);
// }
//
// NOTE: You can use it like so:
// Cypress.Commands.add('customCommand', customCommand);
//
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

'use strict'

import 'cypress-wait-until';
import { PageIdleDetector } from './PageIdleDetector';
import { mockWebSocket } from './websocket';

/* global Cypress */
const codes = {
    ArrowLeft: 37,
    ArrowUp: 38,
    ArrowRight: 39,
    ArrowDown: 40
}

Cypress.Commands.add('waitForSkeletonGone', () => {
    cy.waitUntil(() => {
        return Cypress.$('.skeleton-loader').length === 0;
    }, { verbose: true, description: "waitForSkeletonGone", errorMsg: "skeleton loaders never went away", timeout: 15000, interval: 50});
});

Cypress.Commands.add(
    "waitForPageIdle",
    () => {
        console.warn("Waiting for page idle state");
        const pageIdleDetector = new PageIdleDetector();
        pageIdleDetector.WaitForPageToBeIdle();
    }
);

Cypress.Commands.add('mockMempoolSocket', () => {
  mockWebSocket();
});

Cypress.Commands.add('changeNetwork', (network: "testnet"|"signet"|"liquid"|"bisq"|"mainnet" ) => {
    cy.get('.dropdown-toggle').click().then(() => {
        cy.get(`.${network}`).click().then(() => {
            cy.waitForPageIdle();
            if(network !== 'bisq'){
                cy.waitForSkeletonGone();
            }
        });
    });
});

// https://github.com/bahmutov/cypress-arrows/blob/8f0303842a343550fbeaf01528d01d1ff213b70c/src/index.js
function keydownCommand ($el, key) {
    const message = `sending the "${key}" keydown event`
    const log = Cypress.log({
      name: `keydown: ${key}`,
      message: message,
      consoleProps: function () {
        return {
          Subject: $el
        }
      }
    })
  
    const e = $el.createEvent('KeyboardEvent')
  
    Object.defineProperty(e, 'key', {
      get: function () {
        return key
      }
    })
  
    Object.defineProperty(e, 'keyCode', {
      get: function () {
        return this.keyCodeVal
      }
    })
    Object.defineProperty(e, 'which', {
      get: function () {
        return this.keyCodeVal
      }
    })
    var metaKey = false
  
    Object.defineProperty(e, 'metaKey', {
      get: function () {
        return metaKey
      }
    })
  
    Object.defineProperty(e, 'shiftKey', {
      get: function () {
        return false
      }
    })
    e.keyCodeVal = codes[key]
  
    e.initKeyboardEvent('keydown', true, true,
      $el.defaultView, false, false, false, false, e.keyCodeVal, e.keyCodeVal)
  
    $el.dispatchEvent(e)
    log.snapshot().end()
    return $el
  }
  
  Cypress.Commands.add('keydown', { prevSubject: "dom" }, keydownCommand)
  Cypress.Commands.add('left', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowLeft'))
  Cypress.Commands.add('right', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowRight'))
  Cypress.Commands.add('up', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowUp'))
  Cypress.Commands.add('down', { prevSubject: "dom" }, $el => keydownCommand($el, 'ArrowDown'))