@thednp/shorty 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
@@ -32,25 +32,27 @@
   },
   "homepage": "https://github.com/thednp/shorty",
   "devDependencies": {
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.1",
-    "@cypress/code-coverage": "^3.12.44",
-    "@types/istanbul-lib-instrument": "^1.7.7",
-    "@types/node": "^20.14.11",
+    "@types/node": "^20.16.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "cypress": "^13.13.1",
+    "@vitest/browser": "^2.1.1",
+    "@vitest/coverage-istanbul": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "dts-bundle-generator": "^9.5.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
+    "happy-dom": "^15.7.4",
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-instrument": "^5.2.1",
     "nyc": "^15.1.0",
+    "playwright": "^1.47.1",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.9",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4"
+    "rimraf": "^5.0.10",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vitest": "^2.1.1"
   },
   "engines": {
     "node": ">=16",
@@ -58,12 +60,12 @@
   },
   "scripts": {
     "pre-test": "pnpm clean-coverage",
-    "badges": "npx -p dependency-version-badge update-badge typescript prettier cypress eslint vite",
-    "test": "pnpm pre-test && npx cypress run",
-    "clean-coverage": "rimraf coverage .nyc_output",
-    "cypress": "pnpm pre-test && npx cypress open",
-    "coverage:report": "nyc report --reporter=lcov --reporter=json --reporter=text --reporter=json-summary",
+    "badges": "npx -p dependency-version-badge update-badge typescript prettier eslint vitest vite",
+    "test": "pnpm pre-test && vitest --config vitest.config.ts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.ts",
+    "clean-coverage": "rm -rf coverage .nyc_output",
     "format": "prettier --write \"src/**/*.ts\"",
+    "lint": "pnpm lint:ts && pnpm check:ts",
     "lint:ts": "eslint -c .eslintrc.cjs --ext .ts src",
     "fix:ts": "eslint -c .eslintrc.cjs --ext .ts src --fix",
     "check:ts": "tsc -noEmit",

package/src/boolean/isApple.ts

@@ -9,6 +9,6 @@ const appleBrands = /(iPhone|iPod|iPad)/;
  */
 const isApple: boolean = userAgentData
   ? userAgentData.brands.some((x: NavigatorUABrand) => appleBrands.test(x.brand))
-  : /* istanbul ignore next */ appleBrands.test(userAgent);
+  : /* istanbul ignore next @preserve */ appleBrands.test(userAgent);
 
 export default isApple;

package/src/boolean/isFirefox.ts

@@ -4,6 +4,8 @@ import userAgent from '../strings/userAgent';
  * A global boolean for Gecko browsers. When writing this file,
  * Gecko was not supporting `userAgentData`.
  */
-const isFirefox = userAgent ? userAgent.includes('Firefox') : /* istanbul ignore next */ false;
+const isFirefox = userAgent
+  ? userAgent.includes('Firefox')
+  : /* istanbul ignore next @preserve */ false;
 
 export default isFirefox;

package/src/boolean/isMobile.ts

@@ -4,7 +4,7 @@ import userAgent from '../strings/userAgent';
 const mobileBrands = /iPhone|iPad|iPod|Android/i;
 let isMobileCheck = false;
 
-/* istanbul ignore else */
+/* istanbul ignore else @preserve */
 if (userAgentData) {
   isMobileCheck = userAgentData.brands.some(x => mobileBrands.test(x.brand));
 } else {

package/src/event/one.ts

@@ -14,7 +14,7 @@ const one = <T extends EventTarget, L = EventListener>(
 ) => {
   /** Wrap the listener for easy on -> off */
   const handlerWrapper: NativeEventHandler<T> = e => {
-    /* istanbul ignore else */
+    /* istanbul ignore else @preserve */
     if (e.target === element || e.currentTarget === element) {
       (listener as NativeEventHandler<T>).apply(element, [e]);
       off(element, eventName, handlerWrapper, options);

package/src/get/getRectRelativeToOffsetParent.ts

@@ -22,7 +22,7 @@ const getRectRelativeToOffsetParent = (
   const rect = getBoundingClientRect(element, isParentAnElement && isScaledElement(offsetParent));
   const offsets = { x: 0, y: 0 };
 
-  /* istanbul ignore next */
+  /* istanbul ignore else @preserve */
   if (isParentAnElement) {
     const offsetRect = getBoundingClientRect(offsetParent, true);
     offsets.x = offsetRect.x + offsetParent.clientLeft;

package/src/misc/createCustomEvent.ts

@@ -9,16 +9,16 @@ import ObjectAssign from './ObjectAssign';
  * @param config Event.options | Event.properties
  * @returns a new namespaced event
  */
-const createCustomEvent = <T extends OriginalEvent>(
+const createCustomEvent = <O extends Record<string, unknown>, T extends OriginalEvent>(
   eventType: string,
-  config?: CustomEventInit<any>,
+  config?: O,
 ): T => {
-  const OriginalCustomEvent = new CustomEvent<any>(eventType, {
+  const OriginalCustomEvent = new CustomEvent<O>(eventType, {
     cancelable: true,
     bubbles: true,
-  } as CustomEventInit<any>) as T;
+  }) as T;
 
-  /* istanbul ignore else */
+  /* istanbul ignore else @preserve */
   if (isObject(config)) {
     ObjectAssign(OriginalCustomEvent, config);
   }

package/src/misc/createElementNS.ts

@@ -16,7 +16,7 @@ import isString from '../is/isString';
  * @param param `tagName` or object
  * @return a new `HTMLElement`
  */
-const createElementNS = <T extends HTMLElement>(
+const createElementNS = <T extends Element = HTMLElement>(
   ns: string,
   param?: string | Partial<T>,
 ): T | undefined => {

package/src/misc/emulateAnimationEnd.ts

@@ -19,7 +19,7 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
   if (duration) {
     /** Wrap the handler in on -> off callback */
     const animationEndWrapper = (e: Event): void => {
-      /* istanbul ignore else */
+      /* istanbul ignore else @preserve */
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(animationEndEvent, animationEndWrapper);
@@ -28,10 +28,11 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
     };
     element.addEventListener(animationEndEvent, animationEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next */
+      /* istanbul ignore next @preserve */
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {
+    /* istanbul ignore next @preserve */
     handler.apply(element, [endEvent]);
   }
 };

package/src/misc/emulateTransitionEnd.ts

@@ -19,7 +19,7 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
   if (duration) {
     /** Wrap the handler in on -> off callback */
     const transitionEndWrapper = (e: Event): void => {
-      /* istanbul ignore else */
+      /* istanbul ignore else @preserve */
       if (e.target === element) {
         handler.apply(element, [e]);
         element.removeEventListener(transitionEndEvent, transitionEndWrapper);
@@ -28,7 +28,7 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
     };
     element.addEventListener(transitionEndEvent, transitionEndWrapper);
     setTimeout(() => {
-      /* istanbul ignore next */
+      /* istanbul ignore next @preserve */
       if (!called) dispatchEvent(element, endEvent);
     }, duration + delay + 17);
   } else {

package/src/selectors/closest.ts

@@ -9,11 +9,14 @@
  * @param selector the selector name
  * @return the query result
  */
-const closest = (element: HTMLElement, selector: string): HTMLElement | null => {
+const closest = <T extends Element = HTMLElement>(
+  element: T,
+  selector: string,
+): HTMLElement | null => {
   return element
     ? element.closest(selector) ||
         // break out of `ShadowRoot`
-        closest((element.getRootNode() as HTMLElement & { host: HTMLElement }).host, selector)
+        closest((element.getRootNode() as ShadowRoot).host, selector)
     : null;
 };
 

package/test/att.test.ts

@@ -0,0 +1,43 @@
+import { expect, it, describe, afterEach } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
+import * as SHORTY from '../src/index';
+import "./fixtures/style.css";
+
+describe('Shorty Library Tests - ATT', () => {
+  const wrapper = document.createElement('div');
+  afterEach(async () => {
+    wrapper.innerHTML = '';
+  });
+
+  it('Test attr folder', () => {
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const {
+      getAttribute,
+      setAttribute,
+      hasAttribute,
+      removeAttribute,
+      getAttributeNS,
+      setAttributeNS,
+      hasAttributeNS,
+      removeAttributeNS,
+      querySelector,
+    } = SHORTY;
+
+    const el = querySelector('.alert', container)!;
+    expect(getAttribute(el, 'class')).to.have.length.above(0);
+    setAttribute(el, 'data-att', 'momo');
+    expect(hasAttribute(el, 'data-att')).to.be.true;
+    removeAttribute(el, 'data-att');
+    expect(hasAttribute(el, 'data-att')).to.be.false;
+
+    const svg = querySelector('svg', container)!;
+    const ns = 'http://www.w3.org/2000/svg';
+    expect(hasAttributeNS(ns, svg, 'transform')).to.be.false;
+    setAttributeNS(ns, svg, 'transform', 'scale(0.99)');
+    expect(getAttributeNS(ns, svg, 'transform')).to.eq('scale(0.99)');
+    removeAttributeNS(ns, svg, 'transform');
+    expect(getAttributeNS(ns, svg, 'transform')).to.be.null;
+  });
+});

package/test/boolean.test.ts

@@ -0,0 +1,30 @@
+import { expect, it, describe } from 'vitest';
+import * as SHORTY from '../src/index';
+
+describe('Shorty Library Tests - BOOL', () => {
+  it('Test boolean folder', () => {
+    const {
+      // these are impossible to test 100% of the branches
+      isApple,
+      isMobile,
+      isFirefox,
+      support3DTransform,
+      supportAnimation,
+      supportPassive,
+      supportTouch,
+      supportTransform,
+      supportTransition,
+      // querySelectorAll, getWindow
+    } = SHORTY;
+
+    expect(isApple, 'isApple').to.be.false;
+    expect(isMobile, 'isMobile').to.be.false;
+    expect(isFirefox, 'isFirefox').to.be.false;
+    expect(support3DTransform, 'support3DTransform').to.be.true;
+    expect(supportAnimation, 'supportAnimation').to.be.true;
+    expect(supportPassive, 'supportPassive').to.be.true;
+    expect(supportTouch, 'supportTouch').to.be.false;
+    expect(supportTransform, 'supportTransform').to.be.true;
+    expect(supportTransition, 'supportTransition').to.be.true;
+  });
+});

package/test/class.test.ts

@@ -0,0 +1,26 @@
+import { expect, it, describe, beforeEach, vi, afterEach } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
+import * as SHORTY from '../src/index';
+import "./fixtures/style.css";
+
+describe('Shorty Library Tests - CLASS', () => {
+  const wrapper = document.createElement('div');
+  document.body.append(wrapper);
+  afterEach(async () => {
+    wrapper.innerHTML = '';
+  });
+
+  it('Test class folder', () => {
+    const { addClass, hasClass, removeClass, querySelector } = SHORTY;
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const alert = querySelector('.alert', container);
+    if (!alert) return;
+
+    addClass(alert, 'to-be-removed');
+    expect(hasClass(alert, 'to-be-removed')).to.be.true;
+    removeClass(alert, 'show');
+    expect(hasClass(alert, 'show')).to.be.false;
+  });
+});

package/test/event.test.ts

@@ -0,0 +1,39 @@
+import { expect, it, describe, afterEach, beforeEach, vi } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
+import * as SHORTY from '../src/index';
+import "./fixtures/style.css";
+
+describe('Shorty Library Tests - EVENT', () => {
+  const wrapper = document.createElement('div');
+  document.body.append(wrapper);
+  afterEach(async () => {
+    wrapper.innerHTML = '';
+  });
+
+  it('Test event folder', () => {
+    const {
+      // on, off are called by one
+      one,
+      querySelector,
+    } = SHORTY;
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const el = querySelector('.alert', container);
+    const btn = querySelector('button', container);
+
+    if (!el || !btn) return;
+
+    one(el, 'click', function handle(e) {
+      el.innerText += 'click fired for ' + (e.currentTarget as HTMLElement).tagName;
+      expect(el.innerText).toContain('click fired for DIV')
+
+    });
+
+    one(btn, 'click', function handle(e) {
+      el.innerText += 'click fired for ' + (e.target as HTMLElement).tagName;
+      expect(el.innerText).toContain('click fired for BUTTON')
+    });
+    btn.click();
+  });
+});

package/{cypress/test.html → test/fixtures/getExampleDom.ts}

@@ -1,36 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>BSN Testing Page</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
-  <style>
-    @keyframes animate-me {
-      0% { opacity: 1; }
-      50% { opacity: 0; }
-      100% { opacity: 1; }
-    }
-    @keyframes animate-test {
-      from { left: 0px; }
-      to { left: 150px; }
-    }
-    .animate-test {
-      animation-name: animate-test;
-      animation-duration: 0.3s;
-      animation-timing-function: ease-out;
-      animation-delay: 0s;
-    }
-  </style>
-</head>
-<body class="container p-5">
-  <h3>Shorty Examples</h3>
-  <div id="alertDemo" class="alert alert-warning alert-dismissible fade show" data-cy="alert" data-bs-op1="false" data-bs-op2="true" data-bs-op3="10" data-bs-title="" role="alert">
-    <button type="button" class="btn-close bg-none" data-bs-target="alertDemo" data-bs-dismiss="alert" aria-label="Close">
-      <svg viewBox="0 0 16 16" class="align-top"><path name="x" d="M4.646 4.646a0.5 0.5 0 0 1 0.708 0L8 7.293l2.646 -2.647a0.5 0.5 0 0 1 0.708 0.708L8.707 8l2.647 2.646a0.5 0.5 0 0 1 -0.708 0.708L8 8.707l-2.646 2.647A0.5 0.5 0 0 1 4.646 10.646L7.293 8L4.646 5.354a0.5 0.5 0 0 1 0 -0.708z"></path></svg>
+export const getExampleDOM = () => {
+  const div = document.createElement('div');
+  div.className = 'm-4';
+  const tempDocument = new DOMParser().parseFromString(`
+<div id="alertDemo" class="alert alert-warning alert-dismissible fade show" data-bs-op1="false" data-bs-op2="true" data-bs-op3="10" data-bs-title="" role="alert">
+    <button role="button" type="button" class="btn-close bg-none" data-bs-target="alertDemo" data-bs-dismiss="alert" aria-label="Close">
+      <svg viewBox="0 0 16 16" class="align-top">
+        <title>Delete</title>
+        <path name="x" d="M4.646 4.646a0.5 0.5 0 0 1 0.708 0L8 7.293l2.646 -2.647a0.5 0.5 0 0 1 0.708 0.708L8.707 8l2.647 2.646a0.5 0.5 0 0 1 -0.708 0.708L8 8.707l-2.646 2.647A0.5 0.5 0 0 1 4.646 10.646L7.293 8L4.646 5.354a0.5 0.5 0 0 1 0 -0.708z"></path>
+      </svg>
     </button>
     <p><b>Holy guacamole!</b> Best check yo self, you're not looking too good.</p>
     <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" alt="Image">
-  </div>
+</div>
   <table class="table">
     <thead>
       <tr>
@@ -59,5 +40,9 @@
       </tr>
     </tbody>
   </table>
-</body>
-</html>
+`, 'text/html');
+  // console.log(tempDocument.body.children)
+  div.append(...tempDocument.body.children);
+
+  return div;
+};