@thednp/shorty 2.0.2 → 2.0.4

package/test/misc.test.ts

@@ -0,0 +1,352 @@
+import { expect, it, describe, vi, afterEach } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
+import * as SHORTY from '../src/index';
+import "./fixtures/style.css";
+
+describe('Shorty Library Tests - MISC', () => {
+  const wrapper = document.createElement('div');
+  document.body.append(wrapper);
+  afterEach(async () => {
+    wrapper.innerHTML = '';
+  });
+
+  it('Test misc folder - emulateTransitionEnd - no transition', () => {
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const {
+      dispatchEvent,
+      emulateTransitionEnd,
+      createCustomEvent,
+      reflow,
+      querySelector,
+      setElementStyle,
+      getElementStyle,
+      removeClass,
+      addClass,
+      one,
+    } = SHORTY;
+
+    const el = querySelector('.alert', container) as HTMLElement;
+    const btn = querySelector('.btn-close', el) as HTMLButtonElement;
+    const alertHideEvent = createCustomEvent('hide-alert',);
+
+    setElementStyle(el, {
+      transition: 'none',
+      transitionProperty: 'none',
+      transitionDuration: '0s',
+      'transition-delay': '0s',
+      '--transition-prop': 'none',
+    });
+
+    expect(getElementStyle(el, 'transitionProperty')).to.equal('none');
+    expect(getElementStyle(el, 'transition-duration')).to.equal('0s');
+    expect(getElementStyle(el, 'transitionDelay')).to.equal('0s');
+    expect(getElementStyle(el, '--transition-prop')).to.equal('none');
+
+    one(el, 'hide-alert', function hideHandler(e: typeof alertHideEvent) {
+      expect(e.target).to.equal(el);
+      expect(e.relatedTarget).to.equal(btn);
+    });
+
+    one(btn, 'click', function handleBtn(e) {
+      expect(e.target).to.equal(btn);
+      removeClass(el, 'show');
+      reflow(el);
+      alertHideEvent.relatedTarget = btn;
+      dispatchEvent(el, alertHideEvent);
+      emulateTransitionEnd(el, function () {
+        addClass(el, 'show');
+      });
+    });
+
+    btn.click();
+  });
+
+  it('Test misc folder - emulateTransitionEnd - default', () => {
+    vi.useFakeTimers();
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const {
+      dispatchEvent,
+      emulateTransitionEnd,
+      createCustomEvent,
+      reflow,
+      querySelector,
+      removeClass,
+      addClass,
+      one,
+      focus,
+    } = SHORTY;
+
+    const el = querySelector('.alert', container) as HTMLElement;
+    const btn = querySelector('.btn-close', el) as HTMLButtonElement;
+    const alertHideEvent = createCustomEvent('hide-alert', { relatedTarget: null });
+
+    one(el, 'hide-alert', function hideHandler(e: typeof alertHideEvent) {
+      expect(e.target).to.equal(el);
+      expect(e.relatedTarget).to.equal(btn);
+    });
+
+    one(btn, 'click', function handleBtn(e) {
+      expect(e.target).to.equal(btn);
+      removeClass(el, 'show');
+      reflow(el);
+      alertHideEvent.relatedTarget = btn;
+      dispatchEvent(el, alertHideEvent);
+      emulateTransitionEnd(el, function () {
+        addClass(el, 'show');
+        focus(btn, { preventScroll: false });
+        console.log('transitionend triggered');
+      });
+      vi.advanceTimersByTime(350);
+    });
+
+    btn!.click();
+
+  });
+
+  it('Test misc folder - emulateAnimationEnd - default', async () => {
+    vi.useFakeTimers();
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const { emulateAnimationEnd, getElementStyle, querySelector, addClass } = SHORTY;
+
+    const el = querySelector('.alert') as HTMLElement;
+
+    addClass(el, 'animate-test');
+    emulateAnimationEnd(el, () => {
+      console.log('animationend fired - default');
+      expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
+      expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0.3s');
+      expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
+    });
+    vi.advanceTimersByTime(350);
+
+  });
+
+  it('Test misc folder - emulateAnimationEnd - no duration', () => {
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const { emulateAnimationEnd, setElementStyle, getElementStyle, querySelector, addClass } =
+      SHORTY;
+
+    const el = querySelector('.alert', container)!;
+    setElementStyle(el, { animationDuration: '0.1s' });
+
+    addClass(el, 'animate-test');
+
+
+    emulateAnimationEnd(el, () => {
+      // await vi.waitUntil(() => {
+      console.log('animationend fired no duration');
+      expect(getElementStyle(el, 'animationName'), 'animationName').to.equal('animate-test');
+      expect(getElementStyle(el, 'animationDuration'), 'animationDuration').to.equal('0s');
+      expect(getElementStyle(el, 'animationDelay'), 'animationDelay').to.equal('0s');
+
+      // }, { timeout: 150 })
+    });
+
+  });
+
+  it('Test misc folder - everything else', () => {
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const {
+      ArrayFrom,
+      Float32ArrayFrom,
+      Float64ArrayFrom,
+      distinct,
+      noop,
+      ObjectHasOwn,
+      ObjectEntries,
+      ObjectAssign,
+      ObjectKeys,
+      ObjectValues,
+      // ObjectDefineProperty,
+      ObjectFromEntries,
+      createElement,
+      createElementNS,
+      Data,
+      getInstance,
+      normalizeOptions,
+      Timer,
+      toLowerCase,
+      toUpperCase,
+      querySelector,
+      getElementsByClassName,
+    } = SHORTY;
+
+
+    const el = querySelector('.alert', container)!;
+    const table = querySelector('.table', container)!;
+
+    const defaults = { op1: true, op2: true, op3: 5, title: null };
+    const jsOps = { op1: false, op2: false, op3: 8, title: 'something' };
+    expect(ObjectHasOwn(jsOps, 'op3')).to.be.true;
+    expect(ObjectHasOwn(jsOps, 'momo')).to.be.false;
+    // @ts-expect-error
+    expect(ObjectHasOwn(null, 'momo')).to.be.false;
+    expect(normalizeOptions(el, defaults, {}, 'bs'), 'normalizeOptions(data)').to.deep.equal({
+      op1: false,
+      op2: true,
+      op3: 10,
+      title: null,
+    });
+    // @ts-expect-error
+    expect(normalizeOptions(el, defaults, jsOps, 'bs'), 'normalizeOptions(js)').to.deep.equal({
+      op1: false,
+      op2: false,
+      op3: 8,
+      title: 'something',
+    });
+    expect(noop()).to.be.undefined;
+
+    // @ts-expect-error
+    Timer.set('el', noop, 150);
+    Timer.set(el, () => console.log(el.tagName + ' has timer of 150'), 150, 'alert');
+    // @ts-expect-error
+    expect(Timer.get('el', 'alert')).to.be.null;
+    expect(Timer.get(el, 'alert')).to.not.be.undefined;
+    // @ts-expect-error
+    Timer.clear('el', 'alert');
+    Timer.clear(el, 'alert');
+    expect(Timer.get(el, 'alert')).to.be.null;
+
+    Timer.set(el, () => console.log(el.tagName + ' has timer of 250'), 250);
+    expect(Timer.get(el)).to.not.be.null;
+    Timer.clear(el);
+    expect(Timer.get(el)).to.be.null;
+
+    expect([0, 1, 1, 2, 3, 3].filter(distinct), 'filter(DISTINCT)').to.deep.equal([0, 1, 2, 3]);
+
+    expect(toLowerCase('textSample'), 'toLowerCase(string)').to.equal('textsample');
+    expect(toUpperCase('textSample'), 'toUpperCase(string)').to.equal('TEXTSAMPLE');
+
+    // expect(
+    //   Object.defineProperty({ c: 3}, 'a', { value: {b: 1}, writable: true }),
+    //   'ObjectDefineProperty(object1, prop, value)',
+    // ).to.deep.equal({ c: 3, a: {b: 1} });
+    expect(
+      ObjectAssign({ c: 3 }, { a: 1, b: 2 }),
+      'ObjectAssign(object1, object2)',
+    ).to.deep.equal({ a: 1, b: 2, c: 3 });
+    expect(ObjectEntries({ a: 1, b: 2 }), 'ObjectEntries(object)').to.deep.equal([
+      ['a', 1],
+      ['b', 2],
+    ]);
+    expect(ObjectKeys({ a: 1, b: 2 }), 'ObjectKeys(object)').to.deep.equal(['a', 'b']);
+    expect(ObjectValues({ a: 1, b: 2 }), 'ObjectValues(object)').to.deep.equal([1, 2]);
+
+    expect(Float32ArrayFrom([0, 1, 2, 3]), 'Float32ArrayFrom(array)').to.be.instanceOf(
+      Float32Array,
+    );
+    expect(Float64ArrayFrom([0, 1, 2, 3]), 'Float64ArrayFrom(array)').to.be.instanceOf(
+      Float64Array,
+    );
+    expect(Float64ArrayFrom([0, 1, 2, 3]).length, 'Float64ArrayFrom(array)').to.eq(4);
+
+    expect(
+      ArrayFrom(new Float32Array([0, 1, 2, 3])),
+      'ArrayFrom(Float32Array)',
+    ).to.be.instanceOf(Array);
+    expect(ArrayFrom(new Float64Array([0, 1, 2, 3])), 'Array(Float64Array)').to.be.instanceOf(
+      Array,
+    );
+    expect(
+      ArrayFrom(getElementsByClassName('table', container)),
+      'ArrayFrom(HTMLCollection)',
+    ).to.deep.equal([table]);
+
+    expect(createElement(), 'createElement()').to.be.undefined;
+    expect(createElement('input'), 'createElement(string)').to.be.instanceOf(HTMLInputElement);
+    const parag = createElement({
+      tagName: 'p',
+      className: 'lead',
+      innerText: 'This is a newly created paragraph.',
+    });
+    expect(parag).to.be.instanceOf(HTMLParagraphElement)
+    expect(parag?.className).to.contain('lead')
+    expect(parag?.innerHTML).to.contain('This is a newly created paragraph.');
+    expect(
+      createElement({
+        tagName: 'p',
+        textContent: 'This is a newly created paragraph.',
+      }),
+      'createElement(object)',
+    ).to.be.instanceOf(HTMLParagraphElement)
+    // .and.contain('This is a newly created paragraph.');
+
+    expect(
+      createElement({
+        className: 'lead',
+        innerText: 'This is a newly created paragraph.',
+      }),
+      'createElement(incompleteObject)',
+    ).to.be.undefined;
+
+    expect(createElementNS(''), 'createElementNS()').to.be.undefined;
+    expect(
+      createElementNS('http://www.w3.org/2000/svg', 'svg'),
+      'createElementNS(ns, string)',
+    ).to.be.instanceOf(SVGElement);
+    expect(
+      createElementNS<HTMLButtonElement>('http://www.w3.org/1999/xhtml', {
+        tagName: 'button',
+        className: 'btn',
+        innerText: 'New Item',
+        textContent: 'New Item',
+      }),
+      'createElementNS(ns, object)',
+    )
+      .to.be.instanceOf(HTMLButtonElement)
+    // .and.contain('btn')
+    // .and.contain('New Item');
+
+    expect(
+      createElementNS<SVGPathElement & { d: string }>('http://www.w3.org/2000/svg', {
+        tagName: 'path',
+        d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
+      }),
+      'createElementNS(ns, object)',
+    ).to.be.instanceOf(SVGPathElement)
+      .and.have.property('d').equal('M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
+
+    expect(
+      createElementNS<SVGPathElement & { d: string }>('http://www.w3.org/2000/svg', {
+        tagName: '',
+        className: 'icon',
+        d: 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z',
+      }),
+      'createElementNS(ns, incompleteObject)',
+    ).to.be.undefined;
+
+    // @ts-expect-error
+    Data.set(el);
+    // @ts-expect-error
+    expect(Data.get(el), 'not enough params - Data.get(node)').to.be.null;
+
+    // @ts-expect-error
+    Data.set('str', 'strKey', 'data');
+    // @ts-expect-error
+    expect(Data.get('str', 'strKey'), 'not HTMLElement - Data.get(string, string, string)').to
+      .be.null;
+
+    Data.set(el, 'Alert', { element: el });
+    expect(Data.get(el, 'Alert'), 'Data.get(node, key)').to.deep.equal({ element: el });
+    expect(getInstance(el, 'Alert'), 'getInstance(node, key)').to.deep.equal({ element: el });
+    expect(Data.getAllFor('Alert')?.size, 'Data.getAllFor(string).size').to.equal(1);
+
+    Data.remove(el, 'Alert');
+    expect(Data.get(el, 'Alert'), 'removed - Data.get(node, string)').to.be.null;
+    expect(getInstance(el, 'Alert'), 'removed - getInstance(node, string)').to.be.null;
+    expect(Data.getAllFor('Alert'), 'removed - Data.getAllFor(string)').to.be.null;
+    Data.remove(el, 'Alert');
+
+    expect(ObjectFromEntries([['a', 1], ['b', 2]])).to.deep.equal({ a: 1, b: 2 })
+  });
+});

package/test/selectors.test.ts

@@ -0,0 +1,90 @@
+import { expect, it, describe, vi, afterEach } from 'vitest';
+import { getExampleDOM } from './fixtures/getExampleDom';
+import * as SHORTY from '../src/index';
+import CustomElem from './fixtures/custom-elem';
+import "./fixtures/style.css";
+
+describe('Shorty Library Tests', () => {
+  const wrapper = document.createElement('div');
+  document.body.append(wrapper);
+  afterEach(async () => {
+    wrapper.innerHTML = '';
+  });
+
+  it('Test selectors folder', () => {
+    const container = getExampleDOM();
+    wrapper.append(container);
+
+    const {
+      closest,
+      getCustomElements,
+      getElementById,
+      getElementsByClassName,
+      getElementsByTagName,
+      matches,
+      querySelector,
+      querySelectorAll,
+    } = SHORTY;
+
+    const el = querySelector('.alert', container);
+    if (!el) return;
+    const win = window;
+
+    const CE = new CustomElem();
+    win.document.body.append(CE);
+
+    expect(querySelectorAll('div'), 'querySelectorAll(div)').to.have.length(3);
+    expect(querySelectorAll('div', win.document), 'querySelectorAll(div, parent)').to.have.length(3);
+
+    // @ts-expect-error
+    expect(querySelector(), 'querySelector()').to.be.null;
+    expect(querySelector(el), 'querySelector(node)').to.equal(el);
+    expect(querySelector('.alert'), 'querySelector(selector)').to.not.be.null;
+    expect(querySelector('.alert', win.document), 'querySelector(selector, parent)').to.eq(el);
+    // @ts-expect-error
+    expect(closest(), 'closest()').to.be.null;
+    // @ts-expect-error
+    expect(closest(el)).to.be.null;
+    expect(closest(el, 'wombat'), 'closest(el, invalidTagSelector)').to.be.null;
+    expect(closest(el, 'body'), 'closest(body)').to.eq(win.document.body);
+
+    expect(getCustomElements(), 'getCustomElements()').to.have.lengthOf(1);
+    expect(getCustomElements(win.document), 'getCustomElements(expected)').to.deep.equal([CE]);
+
+    // @ts-expect-error
+    expect(getElementById(), 'getElementById()').to.be.null;
+    expect(getElementById('alertDemo'), 'getElementById(id)').to.not.be.null;
+    expect(
+      getElementById('alertDemo', win.document),
+      'getElementById(id, parent)',
+    ).to.be.instanceOf(win.HTMLDivElement);
+
+    // @ts-expect-error
+    expect(getElementsByClassName(), 'getElementsByClassName()').to.be.instanceOf(
+      HTMLCollection,
+    );
+    expect(
+      getElementsByClassName('alert'),
+      'getElementsByClassName(selector)',
+    ).to.be.instanceOf(HTMLCollection);
+    expect(
+      getElementsByClassName('alert', win.document),
+      'getElementsByClassName(selector, parent)',
+    ).to.be.instanceOf(win.HTMLCollection);
+
+    // @ts-expect-error
+    expect(getElementsByTagName(), 'getElementsByTagName()').to.be.instanceOf(HTMLCollection);
+    expect(getElementsByTagName('div'), 'getElementsByTagName(selector)').to.be.instanceOf(
+      HTMLCollection,
+    );
+    expect(
+      getElementsByTagName('div', win.document),
+      'getElementsByTagName(selector, parent)',
+    ).to.be.instanceOf(win.HTMLCollection);
+
+    expect(
+      [...getElementsByClassName('alert', win.document)].filter(x => matches(x, 'div')),
+      'matches(node, selector)',
+    ).to.deep.equal([el]);
+  });
+});

package/tsconfig.json

@@ -23,7 +23,12 @@
     "allowSyntheticDefaultImports": true,
     "noEmit": true,
     "checkJs": true,
-    "skipLibCheck": true // allows dts-bundle-generator to import from package.json
+    "skipLibCheck": true, // allows dts-bundle-generator to import from package.json
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ],
+    }
   },
   "include": ["src/*", "src/**/*"],
   "exclude": ["node_modules", "experiments", "coverage", "dist"],

package/vitest.config-ui.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    css: true,
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      // provider: 'webdriverio', // or 'preview'
+      enabled: true,
+      headless: false,
+      name: 'chrome', // browser name is required
+      // enableUI: true
+    },
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    css: true,
+    globals: true,
+    coverage: {
+      provider: "istanbul",
+      reporter: ["html", "text", "lcov"],
+      enabled: true,
+      include: ["src/**/*.{ts,tsx}"],
+    },
+    browser: {
+      provider: 'playwright', // or 'webdriverio'
+      enabled: true,
+      headless: true,
+      name: 'chromium', // browser name is required
+    },
+  },
+});

package/cypress/e2e/att.cy.ts

@@ -1,46 +0,0 @@
-/// <reference types="cypress" />
-// @ts-nocheck
-
-// import SHORTY from '../../src/index';
-import * as SHORTY from '../../src/index';
-
-describe('Shorty Library Tests', () => {
-  before(() => {
-    cy.visit('cypress/test.html');
-  });
-
-  it('Test attr folder', () => {
-    const {
-      getAttribute,
-      setAttribute,
-      hasAttribute,
-      removeAttribute,
-      getAttributeNS,
-      setAttributeNS,
-      hasAttributeNS,
-      removeAttributeNS,
-      querySelector,
-    } = SHORTY;
-
-    cy
-      .get('.alert')
-      .should($element => {
-        const el = $element[0];
-        expect(getAttribute(el, 'class'), 'getAttribute').to.have.length.above(0);
-        setAttribute(el, 'data-att', 'momo');
-        expect(hasAttribute(el, 'data-att'), 'hasAttribute').to.be.true;
-        removeAttribute(el, 'data-att');
-        expect(hasAttribute(el, 'data-att'), 'hasAttribute').to.be.false;
-      });
-    cy.get('svg').should($svg => {
-      console.log(querySelector('svg'));
-      const svg = $svg[0] as HTMLElement;
-      const ns = 'http://www.w3.org/2000/svg';
-      expect(hasAttributeNS(ns, svg, 'transform'), 'hasAttributeNS').to.be.false;
-      setAttributeNS(ns, svg, 'transform', 'scale(0.99)');
-      expect(getAttributeNS(ns, svg, 'transform'), 'getAttributeNS').to.eq('scale(0.99)');
-      removeAttributeNS(ns, svg, 'transform');
-      expect(getAttributeNS(ns, svg, 'transform'), 'getAttributeNS').to.be.null;
-    });
-  });
-});

package/cypress/e2e/boolean.cy.ts

@@ -1,44 +0,0 @@
-/// <reference types="cypress" />
-// @ts-nocheck
-
-// import SHORTY from '../../src/index';
-import * as SHORTY from '../../src/index';
-
-describe('Shorty Library Tests', () => {
-  before(() => {
-    cy.visit('cypress/test.html');
-  });
-
-  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;
-    cy
-      .window()
-      .then(() => {
-        expect(isApple, 'isApple').to.be.false;
-        expect(isMobile, 'isMobile').to.be.false;
-        if (Cypress.isBrowser('firefox')) {
-          expect(isFirefox, 'isFirefox').to.be.true;
-        } else {
-          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/cypress/e2e/class.cy.ts

@@ -1,28 +0,0 @@
-/// <reference types="cypress" />
-// @ts-nocheck
-
-// import SHORTY from '../../src/index';
-import * as SHORTY from '../../src/index';
-
-describe('Shorty Library Tests', () => {
-  before(() => {
-    cy.visit('cypress/test.html');
-  });
-
-  it('Test class folder', () => {
-    const { addClass, hasClass, removeClass } = SHORTY;
-    cy
-      .get('.alert')
-      .then($alert => {
-        const alert = $alert[0];
-
-        addClass(alert, 'to-be-removed');
-        expect(hasClass(alert, 'to-be-removed')).to.be.true;
-        removeClass(alert, 'show');
-        expect(hasClass(alert, 'show')).to.be.false;
-      })
-      .wait(200)
-      .get('.alert')
-      .should('be.hidden');
-  });
-});

package/cypress/e2e/event.cy.ts

@@ -1,51 +0,0 @@
-/// <reference types="cypress" />
-// @ts-nocheck
-
-// import SHORTY from '../../src/index';
-import * as SHORTY from '../../src/index';
-
-describe('Shorty Library Tests', () => {
-  before(() => {
-    cy.visit('cypress/test.html');
-  });
-
-  it('Test event folder', () => {
-    const {
-      // on, off are called by one
-      one,
-      getElementsByClassName,
-    } = SHORTY;
-
-    cy
-      .get('.alert')
-      .should(($alert) => {
-
-        if ($alert[0]){
-          const [el] = $alert;
-          const [btn] = getElementsByClassName('btn-close', el);
-          const doc = btn.ownerDocument;
-          console.log(doc, btn)
-  
-          one(el, 'click', function handle(e) {
-            const message = doc.createElement('p');
-            message.innerText += 'click fired for ' + (e.currentTarget as HTMLElement).tagName;
-            el.append(message);
-            // console.log(e.target, e.currentTarget);
-          });
-  
-          one(btn, 'click', function handle(e) {
-            const message = doc.createElement('p');
-            message.innerText = 'click fired for ' + (e.target as HTMLElement).tagName;
-            el.append(message);
-          });
-        }
-      })
-      .get('.btn-close')
-      .click({ force: true })
-      .should(btn => {
-        expect(btn[0], 'event target').be.equal((btn[0].ownerDocument as Document).activeElement);
-      })
-      .get('.alert')
-      .should('contain', 'click fired for BUTTON');
-  });
-});