domUtils.ts

import { ClientFunction } from 'testcafe';

const STYLESHEET_RULES_ID = 'stylesheetRules';

function createElement(
  tagName: string,
  id: string,
  style: Partial<CSSStyleDeclaration>,
): HTMLElement {
  const element = document.createElement(tagName);

  element.setAttribute('id', id);
  Object.keys(style).forEach((key) => { element.style[key] = style[key]; });

  return element;
}

export const setAttribute = ClientFunction((selector, attribute, value) => {
  const element = document.querySelector(selector);

  element.setAttribute(attribute, value);
});

export const removeAttribute = ClientFunction((selector, attribute) => {
  const element = document.querySelector(selector);

  element.removeAttribute(attribute);
});

export const getStyleAttribute = ClientFunction((selector) => {
  const element = selector();
  return element.getAttribute('style');
});

export const setStyleAttribute = ClientFunction((selector, styleValue) => {
  const element = selector();

  const styles = element.getAttribute('style') ?? '';
  const updatedStyles = `${styles} ${styleValue}`;

  element.setAttribute('style', updatedStyles);
});

export const setClassAttribute = ClientFunction((selector, styleValue) => {
  const element = selector();

  const styles = element.getAttribute('class') ?? '';
  const updatedClasses = `${styles} ${styleValue}`;

  element.setAttribute('class', updatedClasses);
});

export const removeClassAttribute = ClientFunction((selector, styleValue) => {
  const element = selector();

  const styles = element.getAttribute('class') ?? '';
  const updatedClasses = `${styles.replace(styleValue, '')}`;

  element.setAttribute('class', updatedClasses);
});

export const insertStylesheetRulesToPage = ClientFunction((
  rule: string,
): void => {
  const styleEl = document.createElement('style');
  styleEl.setAttribute('id', STYLESHEET_RULES_ID);

  styleEl.innerHTML = rule;

  document.head.appendChild(styleEl);
}, { dependencies: { STYLESHEET_RULES_ID } });

export const removeStylesheetRulesFromPage = ClientFunction((): void => {
  const stylesheetRulesEl = document.querySelector(`#${STYLESHEET_RULES_ID}`);
  stylesheetRulesEl?.remove();
}, { dependencies: { STYLESHEET_RULES_ID } });

export const appendElementTo = ClientFunction((
  targetContainerSelector: string,
  tagName: string,
  elementId,
  additionalStyles?: Partial<CSSStyleDeclaration>,
) => {
  const containerElement = document.querySelector(targetContainerSelector);
  const element = createElement(tagName, elementId, additionalStyles ?? {});

  containerElement?.appendChild(element);
}, { dependencies: { createElement } });

export const getComputedPropertyValue = ClientFunction((selector, property) => {
  const element = document.querySelector(selector);

  return window.getComputedStyle(element).getPropertyValue(property);
});

export const getDocumentScrollTop = ClientFunction(() => document.documentElement.scrollTop);

export const setStylePropertyValue = ClientFunction((selector, property, value) => {
  const element = document.querySelector(selector);

  element.style[property] = value;
});

export const getPropertyValue = ClientFunction((selector, property) => {
  const element = selector();

  return element.style[property];
});

export const addCaptionTo = ClientFunction((
  elementSelector: string,
  caption: string,
  where: InsertPosition = 'beforebegin',
) => {
  const element = document.querySelector(elementSelector);

  element?.insertAdjacentText(where, caption);
});

export const addFocusableElementBefore = ClientFunction((
  targetSelector: string,
  elementId = 'focusable-start',
) => {
  const existing = document.getElementById(elementId);
  existing?.remove();

  const target = document.querySelector(targetSelector);
  const button = document.createElement('button');
  button.id = elementId;
  button.textContent = 'Start';
  button.style.position = 'fixed';
  button.style.top = '0';
  button.style.left = '0';
  button.style.zIndex = '-1';
  button.style.opacity = '0';
  target?.parentElement?.insertBefore(button, target);
  return button.id;
});

export const addFocusableElementAfter = ClientFunction((
  targetSelector: string,
  elementId = 'focusable-end',
) => {
  const existing = document.getElementById(elementId);
  existing?.remove();

  const target = document.querySelector(targetSelector);
  const button = document.createElement('button');
  button.id = elementId;
  button.textContent = 'End';
  target?.parentElement?.insertBefore(button, target.nextElementSibling);
  return button.id;
});

export const hasHorizontalScroll = ClientFunction((selector) => {
  const element = selector();

  return element.scrollWidth > element.clientWidth;
});