@thednp/shorty 1.0.3 → 2.0.0-alpha10

package/cypress/e2e/boolean.cy.ts

@@ -0,0 +1,44 @@
+/// <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

@@ -0,0 +1,28 @@
+/// <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

@@ -0,0 +1,51 @@
+/// <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');
+  });
+});

package/cypress/e2e/get.cy.ts

@@ -0,0 +1,168 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+import CustomElem from '../fixtures/custom-elem';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test get folder', () => {
+    const {
+      getBoundingClientRect,
+      getDocument,
+      getDocumentBody,
+      getDocumentElement,
+      getDocumentHead,
+      getElementAnimationDelay,
+      getElementAnimationDuration,
+      getElementTransitionDelay,
+      getElementTransitionDuration,
+      getElementStyle,
+      getNodeScroll,
+      getParentNode,
+      getRectRelativeToOffsetParent,
+      getUID,
+      getWindow,
+      ObjectValues,
+    } = SHORTY;
+
+    cy
+      .get('.alert')
+      .should($element => {
+        const element = $element[0];
+        element.style.transform = 'scale(1.01)';
+        const win = getWindow(element);
+        const CE = new CustomElem();
+        CE.className = 'btn btn-outline-primary';
+        win.document.body.append(CE);
+
+        // we round values so all browsers return same values
+        let { x, y, top, left, right, bottom, width, height } = getBoundingClientRect(
+          element,
+          true,
+        );
+        expect(
+          ObjectValues([x, y, top, left, right, bottom, width, height]).map(Math.round),
+          'getBoundingClientRect',
+        ).to.deep.equal([63, 87, 87, 63, 927, 204, 864, 117]);
+        element.style.transform = '';
+
+        expect(getWindow(), 'getWindow').to.be.instanceOf(Window); // root WINDOW
+        expect(getWindow(element.ownerDocument), 'getWindow(document)').to.be.instanceOf(
+          win.Window,
+        );
+        expect(getWindow(CE), 'getWindow(CustomElement)').to.be.instanceOf(win.Window);
+        expect(getWindow(CE.shadowRoot), 'getWindow(CustomElement.shadowRoot)').to.be.instanceOf(
+          win.Window,
+        );
+        expect(getWindow(win.top), 'getWindow(window)').to.be.instanceOf(win.top.Window);
+
+        expect(getDocument(), 'getDocument()').to.be.instanceOf(Document);
+        expect(getDocument(element), 'getDocument(node)').to.be.instanceOf(win.Document);
+        expect(getDocument(win.document), 'getDocument(document)').to.be.instanceOf(win.Document);
+        expect(getDocument(win), 'getDocument(window)').to.be.instanceOf(win.Document);
+
+        expect(getDocumentBody(element), 'getDocumentBody').to.be.instanceOf(win.HTMLBodyElement);
+        expect(getDocumentElement(element), 'getDocumentElement').to.be.instanceOf(
+          win.HTMLHtmlElement,
+        );
+        expect(getDocumentHead(element), 'getDocumentHead').to.be.instanceOf(win.HTMLHeadElement);
+
+        expect(getElementAnimationDelay(element), 'getElementAnimationDelay').to.equal(0);
+
+        expect(getElementAnimationDuration(element), 'getElementAnimationDuration').to.equal(0);
+
+        CE.style.animation = 'animate-me 1s ease 0.5s';
+        expect(getElementAnimationDelay(CE), 'getElementAnimationDelay - seconds').to.equal(500);
+
+        expect(getElementAnimationDuration(CE), 'getElementAnimationDuration - seconds').to.equal(
+          1000,
+        );
+
+        CE.style.animation = 'animate-me 1200ms ease 400ms';
+        expect(getElementAnimationDelay(CE), 'getElementAnimationDelay - miliseconds').to.equal(
+          400,
+        );
+
+        expect(
+          getElementAnimationDuration(CE),
+          'getElementAnimationDuration - miliseconds',
+        ).to.equal(1200);
+
+        element.style.transition = 'opacity .145s linear .1s';
+        expect(getElementTransitionDelay(element), 'getElementTransitionDelay - seconds').to.equal(
+          100,
+        );
+        expect(
+          getElementTransitionDuration(element),
+          'getElementTransitionDuration - seconds',
+        ).to.equal(145);
+
+        element.style.transition = 'opacity 140ms linear 10ms';
+        expect(
+          getElementTransitionDelay(element),
+          'getElementTransitionDelay- miliseconds',
+        ).to.equal(10);
+
+        expect(
+          getElementTransitionDuration(element),
+          'getElementTransitionDuration- miliseconds',
+        ).to.equal(140);
+
+        element.style.transition = '';
+
+        expect(getElementStyle(element, 'color'), 'getElementStyle(color)').to.equal(
+          'rgb(102, 77, 3)',
+        );
+
+        expect(getNodeScroll(win), 'getNodeScroll(window)').to.deep.equal({ x: 0, y: 0 });
+        expect(getNodeScroll(element), 'getNodeScroll(element)').to.deep.equal({ x: 0, y: 0 });
+        expect(
+          getNodeScroll(element.offsetParent as HTMLElement),
+          'getNodeScroll(element.offsetParent)',
+        ).to.deep.equal({ x: 0, y: 0 });
+        expect(getNodeScroll(getDocumentBody(element)), 'getNodeScroll(body)').to.deep.equal({
+          x: 0,
+          y: 0,
+        });
+
+        expect(getParentNode(getDocumentElement()), 'getParentNode()').to.be.instanceOf(
+          HTMLHtmlElement,
+        ); // root HTML
+        expect(getParentNode(win), 'getParentNode(window)').to.be.instanceOf(win.HTMLHtmlElement);
+        expect(getParentNode(getDocumentBody(element)), 'getParentNode(body)').to.be.instanceOf(
+          win.HTMLHtmlElement,
+        );
+        expect(getParentNode(element), 'getParentNode(node)').to.have.class('container');
+        expect(getParentNode(CE), 'getParentNode(CustomElement)').to.be.instanceOf(
+          win.HTMLBodyElement,
+        );
+        expect(
+          getParentNode(CE.shadowRoot),
+          'getParentNode(CustomElement.shadowRoot)',
+        ).to.be.instanceOf(CustomElem);
+
+        ({ x, y, width, height } = getRectRelativeToOffsetParent(
+          element,
+          getDocumentElement(win),
+          getNodeScroll(getDocumentElement(win)),
+        ));
+
+        expect(
+          [x, y, width, height].map(Math.round),
+          'getRectRelativeToOffsetParent',
+        ).to.deep.equal([68, 88, 864, 117]);
+
+        expect(getUID(element), 'getUID()').to.eq(0);
+        expect(getUID(element, 'Alert'), 'getUID(key) - set & returns').to.eq(0);
+        expect(getUID(element, 'Alert'), 'getUID(key) - returns').to.eq(0);
+        expect(getUID(win, 'Alert'), 'getUID(key) - set & returns').to.eq(1);
+        expect(getUID(win, 'Alert'), 'getUID(key) - returns').to.eq(1);
+      });
+  });
+});

package/cypress/e2e/is.cy.ts

@@ -0,0 +1,233 @@
+/// <reference types="cypress" />
+// @ts-nocheck
+
+// import SHORTY from '../../src/index';
+import * as SHORTY from '../../src/index';
+
+import CustomElem from '../fixtures/custom-elem';
+
+describe('Shorty Library Tests', () => {
+  before(() => {
+    cy.visit('cypress/test.html');
+  });
+
+  it('Test is folder', () => {
+    const {
+      isArray,
+      isCustomElement,
+      isDocument,
+      isElement,
+      isElementInScrollRange,
+      isElementInViewport,
+      isElementsArray,
+      isCanvas,
+      isFunction,
+      isHTMLCollection,
+      isHTMLElement,
+      isHTMLImageElement,
+      isJSON,
+      isMedia,
+      isMap,
+      isWeakMap,
+      isObject,
+      isNode,
+      isNodeList,
+      isRTL,
+      isScaledElement,
+      isShadowRoot,
+      isString,
+      isNumber,
+      isSVGElement,
+      isTableElement,
+      isWindow,
+      getWindow,
+      querySelector,
+      // getElementsByTagName,
+    } = SHORTY;
+
+    cy.get('div').then($element => {
+      // const win = getWindow($element[0]);
+      const CE = new CustomElem();
+      CE.className = 'btn btn-outline-primary';
+      CE.style.transform = 'scale(1.01)';
+      getWindow($element[0]).document.body.append(CE);
+    })
+    .wait(100)
+    .get('.alert').then($element => {
+      const element = $element[0];
+      const win = getWindow(element);
+      const CE = querySelector('custom-elem', win.document);
+      // CE.className = 'btn btn-outline-primary';
+      // CE.style.transform = 'scale(1.01)';
+      // win.document.body.append(CE);
+      const img = querySelector('img', element);
+      const svg = querySelector('svg', element);
+      const path = querySelector('path', element);
+      const table = querySelector('table', win.document);
+
+      expect(isArray(new Float32Array(0, 'a')), 'isArray(Float32Array)').to.be.false;
+      expect(isArray(), 'isArray()').to.be.false;
+      expect(isArray(element), 'isArray(node)').to.be.false;
+      expect(isArray([0, 'a']), 'isArray([0, 1]])').to.be.true;
+      expect(isArray(new Array(0, 'a')), 'isArray(new Array(0, 1)])').to.be.true;
+
+      expect(isDocument(), 'isDocument()').to.be.false;
+      expect(isDocument(win), 'isDocument(document)').to.be.false;
+      expect(isDocument(document), 'isDocument(document)').to.be.true;
+      expect(isDocument(win.document), 'isDocument(document)').to.be.true;
+
+      expect(isElement(), 'isElement()').to.be.false;
+      expect(isElement(win.document), 'isElement(document)').to.be.false;
+      expect(isElement(win), 'isElement(window)').to.be.false;
+      expect(isElement(element), 'isElement(node)').to.be.true;
+      expect(isElement(win.document.body), 'isElement(body)').to.be.true;
+
+      expect(isElementsArray(), 'isElementsArray()').to.be.false;
+      expect(isElementsArray(win), 'isElementsArray(window)').to.be.false;
+      expect(isElementsArray([0, 1]), 'isElementsArray(window)').to.be.false;
+      expect(isElementsArray([...element.children]), 'isElementsArray(expected)').to.be.true;
+
+      expect(isFunction(), 'isFunction()').to.be.false;
+      expect(isFunction(element), 'isFunction(node)').to.be.false;
+      expect(isFunction(element.addEventListener), 'isFunction(function)').to.be.true;
+
+      expect(isObject(), 'isObject()').to.be.false;
+      expect(isObject(element), 'isObject(node)').to.be.true;
+      expect(isObject({ a: 2 }), 'isObject(object)').to.be.true;
+      expect(isObject(element.addEventListener), 'isObject(function)').to.be.false;
+
+      expect(isHTMLCollection(), 'isHTMLCollection()').to.be.false;
+      expect(isHTMLCollection([...element.children]), 'isHTMLCollection(array)').to.be.false;
+      expect(isHTMLCollection(element.children), 'isHTMLCollection(expected)').to.be.true;
+
+      expect(isHTMLElement(), 'isHTMLElement()').to.be.false;
+      expect(isHTMLElement(element), 'isHTMLElement(element)').to.be.true;
+      expect(isHTMLElement(win), 'isHTMLElement(window)').to.be.false;
+      expect(isHTMLElement(win.document.body), 'isHTMLElement(body)').to.be.true;
+      expect(isHTMLElement(win.document.head), 'isHTMLElement(head)').to.be.true;
+      expect(isHTMLElement(CE), 'isHTMLElement(CustomElement)').to.be.true;
+      expect(isHTMLElement(CE.shadowRoot), 'isHTMLElement(CustomElement)').to.be.false;
+      expect(isHTMLElement([...element.children]), 'isHTMLElement(array)').to.be.false;
+      expect(isHTMLElement(win.document), 'isHTMLElement(document)').to.be.false;
+
+      expect(isHTMLImageElement(), 'isHTMLImageElement()').to.be.false;
+      expect(isHTMLImageElement(win.document), 'isHTMLImageElement(document)').to.be.false;
+      expect(isHTMLImageElement(win), 'isHTMLImageElement(window)').to.be.false;
+      expect(isHTMLImageElement(img), 'isHTMLImageElement(image)').to.be.true;
+      expect(isHTMLImageElement(svg), 'isHTMLImageElement(svg)').to.be.false;
+      expect(isHTMLImageElement(path), 'isHTMLImageElement(path)').to.be.false;
+
+      expect(isMedia(), 'isMedia()').to.be.false;
+      expect(isMedia(win.document), 'isMedia(document)').to.be.false;
+      expect(isMedia(win), 'isMedia(window)').to.be.false;
+      expect(isMedia(CE), 'isMedia(CustomElement)').to.be.false;
+      expect(isMedia(img), 'isMedia(image)').to.be.true;
+      expect(isMedia(svg), 'isMedia(svg)').to.be.true;
+      expect(isMedia(path), 'isMedia(path)').to.be.true;
+
+      expect(isCanvas(), 'isCanvas()').to.be.false;
+      expect(isCanvas(win.document), 'isCanvas(document)').to.be.false;
+      expect(isCanvas(win), 'isCanvas(window)').to.be.false;
+      expect(isCanvas(CE), 'isCanvas(CustomElement)').to.be.false;
+      expect(isCanvas(img), 'isCanvas(image)').to.be.false;
+      expect(isCanvas(svg), 'isCanvas(svg)').to.be.false;
+      expect(isCanvas(win.document.createElement('canvas')), 'isCanvas(canvas)').to.be.true;
+
+      expect(isJSON(), 'isJSON()').to.be.false;
+      expect(isJSON(win.document), 'isJSON(document)').to.be.false;
+      expect(isJSON(win), 'isJSON(window)').to.be.false;
+      expect(isJSON('some string'), 'isJSON(JSON)').to.be.false;
+      expect(isJSON('{"a":1,"b":2}'), 'isJSON(JSON)').to.be.true;
+      expect(isJSON('["a",2]'), 'isJSON(JSON)').to.be.true;
+
+      expect(isMap(), 'isMap()').to.be.false;
+      expect(isMap(win.document), 'isMap(document)').to.be.false;
+      expect(isMap(win), 'isMap(window)').to.be.false;
+      expect(isMap(new Map()), 'isMap(Map)').to.be.true;
+
+      expect(isWeakMap(), 'isWeakMap()').to.be.false;
+      expect(isWeakMap(win.document), 'isWeakMap(document)').to.be.false;
+      expect(isWeakMap(win), 'isWeakMap(window)').to.be.false;
+      expect(isWeakMap(new WeakMap()), 'isWeakMap(WeakMap)').to.be.true;
+
+      expect(isElementInScrollRange(), 'isElementInScrollRange()').to.be.false;
+      expect(isElementInScrollRange(win), 'isElementInScrollRange(window)').to.be.false;
+      expect(isElementInScrollRange(CE), 'isElementInScrollRange(CustomElement)').to.be.true;
+      expect(isElementInScrollRange(element), 'isElementInScrollRange(node)').to.be.true;
+
+      expect(isElementInViewport(), 'isElementInScrollRange()').to.be.false;
+      expect(isElementInViewport(win), 'isElementInScrollRange(window)').to.be.false;
+      expect(isElementInViewport(CE), 'isElementInScrollRange(CustomElement)').to.be.true;
+      expect(isElementInViewport(element), 'isElementInScrollRange(node)').to.be.true;
+
+      expect(isNode(), 'isNode()').to.be.false;
+      expect(isNode(img), 'isNode(image)').to.be.true;
+      expect(isNode(svg), 'isNode(svg)').to.be.true;
+      expect(isNode(path), 'isNode(path)').to.be.true;
+      expect(isNode(win.document), 'isNode(document)').to.be.true;
+      expect(isNode(win), 'isNode(window)').to.be.false;
+      expect(isNode(CE), 'isNode(CustomElement)').to.be.true;
+
+      expect(isNodeList(), 'isNodeList()').to.be.false;
+      expect(isNodeList(element), 'isNodeList(node)').to.be.false;
+      expect(isNodeList(element.children), 'isNodeList(HTMLCollection)').to.be.false;
+      expect(isNodeList(element.querySelectorAll('*')), 'isNodeList(expected)').to.be.true;
+
+      expect(isRTL(), 'isRTL()').to.be.false;
+      expect(isRTL(element), 'isRTL(node)').to.be.false;
+      expect(isRTL(win.document), 'isRTL(document)').to.be.false;
+
+      expect(isScaledElement(), 'isScaledElement()').to.be.false;
+      expect(isScaledElement(element), 'isScaledElement(node)').to.be.false;
+      expect(isScaledElement(win), 'isScaledElement(window)').to.be.false;
+      expect(isScaledElement(win.document), 'isScaledElement(document)').to.be.false;
+      expect(isScaledElement(CE), 'isScaledElement(expected)').to.be.true;
+
+      expect(isSVGElement(), 'isSVGElement()').to.be.false;
+      expect(isSVGElement(element), 'isSVGElement(node)').to.be.false;
+      expect(isSVGElement(win), 'isSVGElement(window)').to.be.false;
+      expect(isSVGElement(win.document), 'isSVGElement(document)').to.be.false;
+      expect(isSVGElement(CE), 'isSVGElement(CustomElement)').to.be.false;
+      expect(isSVGElement(svg), 'isSVGElement(svg)').to.be.true;
+      expect(isSVGElement(path), 'isSVGElement(path)').to.be.true;
+
+      expect(isString(), 'isString()').to.be.false;
+      expect(isString(element), 'isString(node)').to.be.false;
+      expect(isString(element.nodeName), 'isString(nodeName)').to.be.true;
+      expect(isString(element.nodeType), 'isString(number)').to.be.false;
+
+      expect(isNumber(), 'isNumber()').to.be.false;
+      expect(isNumber(element), 'isNumber(node)').to.be.false;
+      expect(isNumber(element.nodeName), 'isNumber(nodeName)').to.be.false;
+      expect(isNumber(element.nodeType), 'isNumber(nodeType)').to.be.true;
+      expect(isNumber(0.55), 'isNumber(number)').to.be.true;
+      expect(isNumber(-Infinity), 'isNumber(Infinity)').to.be.true;
+
+      expect(isTableElement(), 'isTableElement()').to.be.false;
+      expect(isTableElement(element), 'isTableElement(node)').to.be.false;
+      expect(isTableElement(win), 'isTableElement(window)').to.be.false;
+      expect(isTableElement(win.document), 'isTableElement(document)').to.be.false;
+      expect(isTableElement(CE), 'isTableElement(CustomElement)').to.be.false;
+      expect(isTableElement(table), 'isTableElement(table)').to.be.true;
+      expect(isTableElement(querySelector('td', table)), 'isTableElement(TD)').to.be.true;
+      expect(isTableElement(querySelector('th', table)), 'isTableElement(TH)').to.be.true;
+
+      expect(isWindow(), 'isWindow()').to.be.false;
+      expect(isWindow(win.document), 'isWindow(document)').to.be.false;
+      expect(isWindow(document), 'isWindow(document)').to.be.false;
+      expect(isWindow(win), 'isDocument(window)').to.be.true;
+      expect(isWindow(win.top), 'isDocument(window)').to.be.true;
+      expect(isWindow(window), 'isDocument(window)').to.be.true;
+      expect(isWindow(window.top), 'isDocument(window)').to.be.true;
+
+      expect(isCustomElement(), 'isCustomElement()').to.be.false;
+      expect(isCustomElement(element), 'isCustomElement(node)').to.be.false;
+      expect(isCustomElement(CE), 'isCustomElement(CustomElement)').to.be.true;
+  
+      expect(isShadowRoot(), 'isShadowRoot()').to.be.false;
+      expect(isShadowRoot(element), 'isShadowRoot(element)').to.be.false;
+      expect(isShadowRoot(document), 'isShadowRoot(document)').to.be.false;
+      expect(isShadowRoot(CE.shadowRoot), 'isShadowRoot(CustomElement.shadowRoot)').to.be.true;
+    });
+  });
+});