@thednp/shorty 2.0.4 → 2.0.6

package/test/fixtures/getExampleDom.ts

@@ -1,7 +1,4 @@
-export const getExampleDOM = () => {
-  const div = document.createElement('div');
-  div.className = 'm-4';
-  const tempDocument = new DOMParser().parseFromString(`
+const markup = `<div class="p-5">
 <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">
@@ -10,6 +7,10 @@ export const getExampleDOM = () => {
       </svg>
     </button>
     <p><b>Holy guacamole!</b> Best check yo self, you're not looking too good.</p>
+    <button class="btn btn-outline-secondary">
+      ReadMore
+    </button>
+
     <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNDMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICAgICAgICAgICAgICAgIDxyZWN0IGZpbGw9IndoaXRlIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcng9IjUiPjwvcmVjdD4NCiAgICAgICAgICAgICAgICAgIDx0ZXh0IGRpcmVjdGlvbj0ibHRyIiBmaWxsPSIjMzMzIiB4PSIyNSIgeT0iMjUiIGZvbnQtc2l6ZT0iMTQiPklNRzwvdGV4dD4NCiAgICAgICAgICAgICAgICA8L3N2Zz4=" alt="Image">
 </div>
   <table class="table">
@@ -40,9 +41,12 @@ export const getExampleDOM = () => {
       </tr>
     </tbody>
   </table>
-`, 'text/html');
-  // console.log(tempDocument.body.children)
-  div.append(...tempDocument.body.children);
+</div>
+`;
+
+export const getExampleDOM = () => {
+  const tempDocument = new DOMParser().parseFromString(markup, 'text/html');
+  const container = tempDocument.body.querySelector('div')!;
 
-  return div;
+  return container;
 };

package/test/is.test.ts

@@ -8,13 +8,20 @@ import CustomElem from './fixtures/custom-elem';
 describe('Shorty Library Tests - IS', () => {
   const wrapper = document.createElement('div');
   document.body.append(wrapper);
+
   afterEach(async () => {
     wrapper.innerHTML = '';
   });
 
-  it('Test is folder', () => {
+  it('Test is folder', async () => {
+    vi.useFakeTimers();
     const container = getExampleDOM();
+    const CE1 = new CustomElem();
+    CE1.className = 'btn btn-outline-primary';
+    CE1.style.transform = 'scale(1.01)';
+    container.append(CE1);
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('table'), 200);
     const win = container.ownerDocument.defaultView!;
 
     const {
@@ -51,15 +58,12 @@ describe('Shorty Library Tests - IS', () => {
     } = SHORTY;
 
     // const win = getWindow($element[0]);
-    const CE1 = new CustomElem();
-    CE1.className = 'btn btn-outline-primary';
-    CE1.style.transform = 'scale(1.01)';
-    document.body.append(CE1);
+
 
     const element = querySelector('.alert', container)!;
     const CE = querySelector('custom-elem', document) as HTMLElement;
     CE.className = 'btn btn-outline-primary';
-    // CE.style.transform = 'scale(1.01)';
+    CE.style.transform = 'scale(1.01)';
     // win.document.body.append(CE);
     const img = querySelector('img', element);
     const svg = querySelector('svg', element);
@@ -154,12 +158,12 @@ describe('Shorty Library Tests - IS', () => {
   
       expect(isElementInScrollRange(), 'isElementInScrollRange()').to.be.false;
       expect(isElementInScrollRange(win as any), 'isElementInScrollRange(window)').to.be.false;
-      expect(isElementInScrollRange(CE!), 'isElementInScrollRange(CustomElement)').to.be.true;
+      expect(isElementInScrollRange(CE!), 'isElementInScrollRange(CustomElement)').to.be.false;
       expect(isElementInScrollRange(element), 'isElementInScrollRange(node)').to.be.true;
   
       expect(isElementInViewport(), 'isElementInScrollRange()').to.be.false;
       expect(isElementInViewport(win as any), 'isElementInScrollRange(window)').to.be.false;
-      expect(isElementInViewport(CE!), 'isElementInViewport(CustomElement)').to.be.false;
+      expect(isElementInViewport(CE), 'isElementInViewport(CustomElement)').to.be.false;
       expect(isElementInViewport(element), 'isElementInScrollRange(node)').to.be.true;
   
       expect(isNode(), 'isNode()').to.be.false;
@@ -183,7 +187,7 @@ describe('Shorty Library Tests - IS', () => {
       expect(isScaledElement(element), 'isScaledElement(node)').to.be.false;
       expect(isScaledElement(win as any), 'isScaledElement(window)').to.be.false;
       expect(isScaledElement(win.document as any), 'isScaledElement(document)').to.be.false;
-      expect(isScaledElement(CE!), 'isScaledElement(expected)').to.be.true;
+      expect(isScaledElement(CE), 'isScaledElement(expected)').to.be.true;
   
       expect(isSVGElement(), 'isSVGElement()').to.be.false;
       expect(isSVGElement(element), 'isSVGElement(node)').to.be.false;
@@ -230,7 +234,7 @@ describe('Shorty Library Tests - IS', () => {
       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;  
-
-    }, { timeout: 150 })
+    }, 350);
+    vi.advanceTimersByTime(350)
   });
 });

package/test/misc.test.ts

@@ -6,13 +6,16 @@ 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', () => {
+  it('Test misc folder - emulateTransitionEnd - no transition', async () => {
+    vi.useFakeTimers();
     const container = getExampleDOM();
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
 
     const {
       dispatchEvent,
@@ -57,16 +60,18 @@ describe('Shorty Library Tests - MISC', () => {
       dispatchEvent(el, alertHideEvent);
       emulateTransitionEnd(el, function () {
         addClass(el, 'show');
+        vi.advanceTimersByTime(350);
       });
     });
 
     btn.click();
   });
 
-  it('Test misc folder - emulateTransitionEnd - default', () => {
+  it('Test misc folder - emulateTransitionEnd - default', async () => {
     vi.useFakeTimers();
     const container = getExampleDOM();
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
 
     const {
       dispatchEvent,
@@ -79,7 +84,7 @@ describe('Shorty Library Tests - MISC', () => {
       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 });
@@ -99,62 +104,105 @@ describe('Shorty Library Tests - MISC', () => {
         addClass(el, 'show');
         focus(btn, { preventScroll: false });
         console.log('transitionend triggered');
+        vi.advanceTimersByTime(350);
       });
-      vi.advanceTimersByTime(350);
     });
 
-    btn!.click();
+    btn.click();
+  });
 
+  it("Can use focus trap", async () => {
+    const container = getExampleDOM();
+    const { focus, toggleFocusTrap, focusableSelector } = SHORTY;
+    wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
+    const element = container.querySelector<HTMLElement>('.alert')!;
+    const firstFocusable = element.querySelector<SHORTY.FocusableElement>(focusableSelector)!;
+    const table = container.querySelector<HTMLElement>('table')!;
+    const doc = element.ownerDocument!;
+
+    focus(firstFocusable);
+    toggleFocusTrap(element);
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', shiftKey: true }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
+    element.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', key: 'Tab', }));
+
+    await vi.waitFor(() => {
+      expect(element).to.contain(doc.activeElement);
+    }, 50)
+    toggleFocusTrap(element);
+
+    toggleFocusTrap(table);
+    table.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab', shiftKey: true }));
+    table.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, code: 'Tab' }));
+
+    await vi.waitFor(() => {
+      expect(element).to.contain(doc.activeElement);
+    }, 50)
+    toggleFocusTrap(table);
   });
 
   it('Test misc folder - emulateAnimationEnd - default', async () => {
     vi.useFakeTimers();
     const container = getExampleDOM();
     wrapper.append(container);
-
     const { emulateAnimationEnd, getElementStyle, querySelector, addClass } = SHORTY;
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
 
     const el = querySelector('.alert') as HTMLElement;
 
     addClass(el, 'animate-test');
     emulateAnimationEnd(el, () => {
       console.log('animationend fired - default');
+      vi.advanceTimersByTime(350);
+    });
+    await vi.waitFor(() => {
       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);
-
+    }, 351)
   });
 
-  it('Test misc folder - emulateAnimationEnd - no duration', () => {
+
+  it('Test misc folder - emulateAnimationEnd - no duration', async () => {
+    vi.useFakeTimers();
     const container = getExampleDOM();
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
 
     const { emulateAnimationEnd, setElementStyle, getElementStyle, querySelector, addClass } =
       SHORTY;
 
     const el = querySelector('.alert', container)!;
-    setElementStyle(el, { animationDuration: '0.1s' });
+    // setElementStyle(el, { animationDuration: '0.1s' });
+    setElementStyle(el, { animationDuration: '0s' });
 
     addClass(el, 'animate-test');
 
-
     emulateAnimationEnd(el, () => {
-      // await vi.waitUntil(() => {
       console.log('animationend fired no duration');
+      vi.advanceTimersByTime(150);
+    });
+
+    await vi.waitFor(() => {
       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 })
-    });
+    }, 50)
 
   });
 
-  it('Test misc folder - everything else', () => {
+  it('Test misc folder - everything else', async () => {
     const container = getExampleDOM();
     wrapper.append(container);
+    await vi.waitFor(() => container.querySelector('.alert'), 200);
 
     const {
       ArrayFrom,

package/{vite.config.ts → vite.config.mts}

@@ -1,17 +1,12 @@
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
-import { name } from './package.json';
-
-const getPackageName = () => {
-  return name.includes('@') ? name.split('/')[1] : name;
-};
 
 const NAME = 'SHORTY';
 
 const fileName = {
-  es: `${getPackageName()}.mjs`,
-  cjs: `${getPackageName()}.cjs`,
-  iife: `${getPackageName()}.js`,
+  es: `shorty.mjs`,
+  cjs: `shorty.cjs`,
+  iife: `shorty.js`,
 };
 
 export default defineConfig({
@@ -19,6 +14,7 @@ export default defineConfig({
   build: {
     emptyOutDir: true,
     outDir: 'dist',
+    target: 'ESNext',
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: NAME,

package/{vitest.config-ui.ts → vitest.config-ui.mts}

@@ -1,6 +1,11 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  optimizeDeps: {
+    include: [
+      "@vitest/coverage-istanbul"
+    ]
+  },
   test: {
     css: true,
     globals: true,

package/{vitest.config.ts → vitest.config.mts}

@@ -1,6 +1,11 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  optimizeDeps: {
+    include: [
+      "@vitest/coverage-istanbul"
+    ]
+  },
   test: {
     css: true,
     globals: true,