@thednp/shorty 2.0.3 → 2.0.5

package/dts.config.ts

@@ -1,14 +1,8 @@
-const packageJson = require("./package.json");
-
-const getPackageName = () => {
-  return packageJson.name.includes('@') ? packageJson.name.split('/')[1] : packageJson.name;
-};
-
 const config = {
   entries: [
     {
       filePath: "./src/index.ts",
-      outFile: `./dist/${getPackageName()}.d.ts`,
+      outFile: `./dist/shorty.d.ts`,
       noCheck: false,
       output: {
         exportReferencedTypes: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/shorty",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "TypeScript shorties for the web",
   "source": "./src/index.ts",
   "main": "./dist/shorty.js",
@@ -32,25 +32,25 @@
   },
   "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.15",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "cypress": "^13.13.1",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/coverage-istanbul": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
     "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",
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-instrument": "^5.2.1",
     "nyc": "^15.1.0",
+    "playwright": "^1.48.1",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.9",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.4"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3"
   },
   "engines": {
     "node": ">=16",
@@ -58,16 +58,16 @@
   },
   "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.mts",
+    "test-ui": "pnpm pre-test && vitest --config vitest.config-ui.mts",
+    "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",
-    "build": "pnpm check:ts && pnpm lint:ts && vite build && pnpm dts",
+    "build": "vite build && pnpm dts",
     "dts": "dts-bundle-generator --config ./dts.config.ts"
   }
 }

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/boolean/supportPassive.ts

@@ -17,7 +17,7 @@ const supportPassive = (() => {
         return result;
       },
     });
-    /* istanbul ignore next */
+    // istanbul ignore next @preserve
     one(document, DOMContentLoadedEvent, noop, opts);
   } catch (e) {
     // throw Error('Passive events are not supported');

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/index.ts

@@ -77,6 +77,7 @@ import focusEvents from './strings/focusEvents';
 import focusEvent from './strings/focusEvent';
 import focusinEvent from './strings/focusinEvent';
 import focusoutEvent from './strings/focusoutEvent';
+import focusableSelector from './strings/focusableSelector';
 
 import gesturechangeEvent from './strings/gesturechangeEvent';
 import gestureendEvent from './strings/gestureendEvent';
@@ -194,6 +195,7 @@ import setElementStyle from './misc/setElementStyle';
 import Timer from './misc/timer';
 import toLowerCase from './misc/toLowerCase';
 import toUpperCase from './misc/toUpperCase';
+import { type FocusableElement, hasFocusTrap, toggleFocusTrap } from './misc/focusTrap';
 
 // get
 import getBoundingClientRect from './get/getBoundingClientRect';
@@ -397,6 +399,9 @@ export {
   createCustomEvent,
   toUpperCase,
   toLowerCase,
+  focusableSelector,
+  hasFocusTrap,
+  toggleFocusTrap,
   Timer,
   emulateAnimationEnd,
   emulateTransitionEnd,
@@ -480,6 +485,7 @@ export {
 export * from './interface/navigatorUA.d';
 export * from './interface/offsetRect.d';
 
+export type { FocusableElement };
 export type { OriginalEvent } from './interface/originalEvent.d';
 
 export type { BoundingClientRect } from './interface/boundingClientRect.d';

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 unknown & 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/data.ts

@@ -19,7 +19,7 @@ const Data = {
   set: <T>(element: HTMLElement, component: string, instance: T): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (!componentData.has(component)) {
       componentData.set(component, new Map<HTMLElement, T>());
     }
@@ -51,11 +51,9 @@ const Data = {
   get: <T>(element: HTMLElement, component: string): T | null => {
     if (!isHTMLElement(element) || !component) return null;
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     const instance = element && instanceMap && instanceMap.get(element);
 
-    // return (instance as T) || null;
     return instance || null;
   },
 
@@ -67,13 +65,12 @@ const Data = {
    */
   remove: <T>(element: HTMLElement, component: string): void => {
     const instanceMap = Data.getAllFor<T>(component);
-    // const instanceMap = componentData.get(component) as Map<HTMLElement, InstanceType<T>>;
 
     if (!instanceMap || !isHTMLElement(element)) return;
 
     instanceMap.delete(element);
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (instanceMap.size === 0) {
       componentData.delete(component);
     }

package/src/misc/emulateAnimationEnd.ts

@@ -17,9 +17,9 @@ const emulateAnimationEnd = (element: HTMLElement, handler: EventListener): void
   const delay = getElementAnimationDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // 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

@@ -17,9 +17,9 @@ const emulateTransitionEnd = (element: HTMLElement, handler: EventListener): voi
   const delay = getElementTransitionDelay(element);
 
   if (duration) {
-    /** Wrap the handler in on -> off callback */
+    // 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/misc/focusTrap.ts

@@ -0,0 +1,64 @@
+import ariaHidden from '../strings/ariaHidden';
+import focusableSelector from '../strings/focusableSelector';
+import querySelectorAll from '../selectors/querySelectorAll';
+import getAttribute from '../attr/getAttribute';
+import hasAttribute from '../attr/hasAttribute';
+import off from '../event/off';
+import on from '../event/on';
+import getDocument from '../get/getDocument';
+import { KeyboardEvent } from '../interface/event';
+
+const focusTrapMap = new Map<HTMLElement, boolean>();
+
+export type FocusableElement =
+  | HTMLAnchorElement
+  | HTMLButtonElement
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLDataListElement
+  | HTMLDetailsElement
+  | HTMLSelectElement;
+
+function handleKeyboardNavigation<T extends HTMLElement & EventTarget>(
+  this: T,
+  event: KeyboardEvent<T>,
+) {
+  const { shiftKey, code } = event;
+  const doc = getDocument(this);
+  const focusableElements = [...querySelectorAll<FocusableElement>(focusableSelector, this)].filter(
+    el => !hasAttribute(el, 'disabled') && !getAttribute(el, ariaHidden),
+  );
+
+  if (!focusableElements.length) return;
+  const firstFocusable = focusableElements[0];
+  const lastFocusable = focusableElements[focusableElements.length - 1];
+
+  // istanbul ignore else @preserve
+  if (code === 'Tab') {
+    if (shiftKey && doc.activeElement === firstFocusable) {
+      lastFocusable.focus();
+      event.preventDefault();
+    } else if (!shiftKey && doc.activeElement === lastFocusable) {
+      firstFocusable.focus();
+      event.preventDefault();
+    }
+  }
+}
+
+/**
+ * Utility to check if a designated element is affected by focus trap;
+ * @param target
+ */
+export const hasFocusTrap = (target: HTMLElement) => focusTrapMap.has(target) === true;
+
+/**
+ * Utility to toggle focus trap inside a designated target element;
+ * @param target
+ */
+export const toggleFocusTrap = (target: HTMLElement) => {
+  const isCurrentlyTrapped = hasFocusTrap(target);
+  const action = !isCurrentlyTrapped ? on : off;
+  action(target, 'keydown', handleKeyboardNavigation);
+  if (isCurrentlyTrapped) focusTrapMap.delete(target);
+  else focusTrapMap.set(target, true);
+};

package/src/misc/normalizeOptions.ts

@@ -29,7 +29,7 @@ const normalizeOptions = <T extends { [key: string]: any }>(
     const key: keyof T =
       ns && typeof k === 'string' && k.includes(ns)
         ? k.replace(ns, '').replace(/[A-Z]/g, (match: string) => toLowerCase(match))
-        : k;
+        : /* istanbul ignore next @preserve */ k;
 
     dataOps[key] = normalizeValue(v) as T[keyof T];
   });
@@ -39,7 +39,7 @@ const normalizeOptions = <T extends { [key: string]: any }>(
   });
 
   ObjectEntries(defaultOps).forEach(([k, v]) => {
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (k in INPUT) {
       normalOps[k] = INPUT[k] as T[keyof T];
     } else if (k in dataOps) {

package/src/misc/timer.ts

@@ -23,9 +23,9 @@ const Timer = {
   set: (element: HTMLElement, callback: TimerHandler, delay: number, key?: string): void => {
     if (!isHTMLElement(element)) return;
 
-    /* istanbul ignore else */
+    // istanbul ignore else @preserve
     if (key && key.length) {
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if (!TimeCache.has(element)) {
         TimeCache.set(element, new Map());
       }
@@ -70,7 +70,7 @@ const Timer = {
     if (key && key.length && isMap(keyTimers as KeyMap)) {
       clearTimeout((keyTimers as KeyMap).get(key));
       (keyTimers as KeyMap).delete(key);
-      /* istanbul ignore else */
+      // istanbul ignore else @preserve
       if ((keyTimers as KeyMap).size === 0) {
         TimeCache.delete(element);
       }

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/src/selectors/getCustomElements.ts

@@ -1,6 +1,5 @@
 import isCustomElement from '../is/isCustomElement';
 import getElementsByTagName from './getElementsByTagName';
-import type { CustomElement } from '../interface/customElement';
 
 /**
  * Returns an `Array` of `Node` elements that are registered as
@@ -11,7 +10,7 @@ import type { CustomElement } from '../interface/customElement';
  * @param parent parent to look into
  * @returns the query result
  */
-const getCustomElements = (parent?: ParentNode): CustomElement[] => {
+const getCustomElements = (parent?: ParentNode) => {
   const collection = getElementsByTagName('*', parent);
 
   return [...collection].filter(isCustomElement);

package/src/selectors/getElementById.ts

@@ -9,8 +9,8 @@ import getDocument from '../get/getDocument';
  * @param context an element in it's document or document
  * @returns the requested element
  */
-const getElementById = (id: string, context?: Node): HTMLElement | null => {
-  return getDocument(context).getElementById(id) || null;
+const getElementById = <T extends HTMLElement>(id: string, context?: Node) => {
+  return (getDocument(context).getElementById(id) as T) || null;
 };
 
 export default getElementById;

package/src/selectors/getElementsByClassName.ts

@@ -9,14 +9,9 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByClassName = (
-  selector: string,
-  parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+const getElementsByClassName = <T extends HTMLElement>(selector: string, parent?: ParentNode) => {
   const lookUp = parent && isNode(parent) ? parent : getDocument();
-  return (lookUp as HTMLElement | Document).getElementsByClassName(
-    selector,
-  ) as HTMLCollectionOf<HTMLElement>;
+  return (lookUp as HTMLElement | Document).getElementsByClassName(selector) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByClassName;

package/src/selectors/getElementsByTagName.ts

@@ -9,12 +9,9 @@ import isNode from '../is/isNode';
  * @param parent optional Element to look into
  * @return the 'HTMLCollection'
  */
-const getElementsByTagName = (
-  selector: string,
-  parent?: ParentNode,
-): HTMLCollectionOf<HTMLElement> => {
+const getElementsByTagName = <T extends HTMLElement>(selector: string, parent?: ParentNode) => {
   const lookUp = isNode(parent) ? parent : getDocument();
-  return (lookUp as Document).getElementsByTagName(selector) as HTMLCollectionOf<HTMLElement>;
+  return (lookUp as Document).getElementsByTagName(selector) as HTMLCollectionOf<T>;
 };
 
 export default getElementsByTagName;

package/src/selectors/querySelector.ts

@@ -10,13 +10,16 @@ import isHTMLElement from '../is/isHTMLElement';
  * @param parent optional node to look into
  * @return the `HTMLElement` or `querySelector` result
  */
-const querySelector = (selector: HTMLElement | string, parent?: ParentNode): HTMLElement | null => {
+const querySelector = <T extends HTMLElement>(
+  selector: HTMLElement | string,
+  parent?: ParentNode,
+): T | null => {
   if (isHTMLElement(selector)) {
-    return selector;
+    return selector as T;
   }
   const lookUp = isNode(parent) ? parent : getDocument();
 
-  return lookUp.querySelector(selector);
+  return lookUp.querySelector<T>(selector);
 };
 
 export default querySelector;

package/src/selectors/querySelectorAll.ts

@@ -8,7 +8,10 @@ import isNode from '../is/isNode';
  * @param parent optional node to look into
  * @return the query result
  */
-const querySelectorAll = (selector: string, parent?: ParentNode): NodeListOf<HTMLElement> => {
+const querySelectorAll = <T extends HTMLElement>(
+  selector: string,
+  parent?: ParentNode,
+): NodeListOf<T> => {
   const lookUp = isNode(parent) ? parent : getDocument();
   return lookUp.querySelectorAll(selector);
 };

package/src/strings/focusableSelector.ts

@@ -0,0 +1,4 @@
+const focusableSelector =
+  'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]';
+
+export default focusableSelector;

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;
+  });
+});