@nuvia-ui/components 4.0.1

package/src/ds-dialog/ds-dialog.test.js

@@ -0,0 +1,441 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-dialog.js';
+
+describe('ds-dialog', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders closed by default', async () => {
+        container.innerHTML = '<ds-dialog heading="Test Dialog"></ds-dialog>';
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        expect(dialog.hasAttribute('open')).toBe(false); // Native dialog behavior
+    });
+
+    it('opens when open prop is set', async () => {
+        container.innerHTML = '<ds-dialog heading="Test Dialog" open></ds-dialog>';
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        expect(dialog.getAttribute('open')).toBe(''); // Native dialog reflects open attribute
+    });
+
+    it('emits ds-close event on close button click even if prevent-close is true', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.heading = "Test";
+        el.preventClose = true; // Set prevent-close
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const closeSpy = vi.fn();
+        el.addEventListener('ds-close', closeSpy);
+
+        const closeBtn = el.shadowRoot.querySelector('ds-icon-button');
+        closeBtn.click();
+
+        expect(closeSpy).toHaveBeenCalled(); // Should still close
+    });
+
+    it('does NOT emit ds-close event on backdrop click if prevent-close is true', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.heading = "Test";
+        el.preventClose = true;
+        el.modal = true; // Ensure it is modal for backdrop test
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const closeSpy = vi.fn();
+        el.addEventListener('ds-close', closeSpy);
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        // Simulate backdrop click (click on dialog element but outside content)
+        // Mock getBoundingClientRect to ensure click is outside
+        dialog.getBoundingClientRect = () => ({
+            top: 100, left: 100, width: 200, height: 200, bottom: 300, right: 300
+        });
+
+        dialog.click(); // Click event on dialog itself (backdrop)
+        // But coordinates need to be outside (0,0 is outside 100,100)
+        // Note: Manual click() doesn't set clientX/Y. We need to dispatch event manually.
+
+        const event = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            clientX: 0,
+            clientY: 0
+        });
+        dialog.dispatchEvent(event);
+
+        expect(closeSpy).not.toHaveBeenCalled();
+    });
+
+    it('renders heading correctly', async () => {
+        container.innerHTML = '<ds-dialog heading="My Title" open></ds-dialog>';
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const title = el.shadowRoot.querySelector('.header-title');
+        expect(title.textContent).toBe('My Title');
+    });
+
+    it('renders footer slot content', async () => {
+        container.innerHTML = `
+      <ds-dialog open>
+        <div slot="footer" class="test-footer">Footer Content</div>
+      </ds-dialog>
+    `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const footerSlot = el.shadowRoot.querySelector('slot[name="footer"]');
+        expect(footerSlot).toBeTruthy();
+        // In light DOM check
+        const footerContent = el.querySelector('.test-footer');
+        expect(footerContent).toBeTruthy();
+    });
+    it('switches from modal to non-modal while open', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = true;
+        el.heading = "Switch Test";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        expect(dialog.getAttribute('open')).toBe(''); // Should be open
+
+        // Switch to non-modal
+        el.modal = false;
+        await new Promise(resolve => setTimeout(resolve, 100)); // Allow updated() to run
+
+        expect(dialog.getAttribute('open')).toBe(''); // Should still be open
+    });
+
+    // SIZE TESTS
+    it('renders size="sm" with correct width constraints', async () => {
+        const el = document.createElement('ds-dialog');
+        el.size = 'sm';
+        el.open = true;
+        el.heading = "Small Dialog";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('size')).toBe('sm');
+    });
+
+    it('renders size="md" by default', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.heading = "Medium Dialog";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.size).toBe('md');
+    });
+
+    it('renders size="lg" with correct width', async () => {
+        const el = document.createElement('ds-dialog');
+        el.size = 'lg';
+        el.open = true;
+        el.heading = "Large Dialog";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('size')).toBe('lg');
+    });
+
+    it('renders size="fullscreen" with 100vh/vw', async () => {
+        const el = document.createElement('ds-dialog');
+        el.size = 'fullscreen';
+        el.open = true;
+        el.heading = "Fullscreen Dialog";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('size')).toBe('fullscreen');
+    });
+
+    // POSITION TESTS (non-modal)
+    it('renders non-modal at position="center" by default', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.heading = "Centered";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.position).toBe('center');
+        const dialog = el.shadowRoot.querySelector('dialog');
+        expect(dialog.classList.contains('is-modal')).toBe(false);
+    });
+
+    it('renders non-modal at position="top-left"', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.position = 'top-left';
+        el.heading = "Top Left";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('position')).toBe('top-left');
+    });
+
+    it('renders non-modal at position="top-right"', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.position = 'top-right';
+        el.heading = "Top Right";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('position')).toBe('top-right');
+    });
+
+    it('renders non-modal at position="bottom-left"', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.position = 'bottom-left';
+        el.heading = "Bottom Left";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('position')).toBe('bottom-left');
+    });
+
+    it('renders non-modal at position="bottom-right"', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.position = 'bottom-right';
+        el.heading = "Bottom Right";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(el.getAttribute('position')).toBe('bottom-right');
+    });
+
+    // KEYBOARD TESTS
+    it('closes on Escape key (non-modal, prevent-close=false)', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.heading = "Escape Test";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const closeSpy = vi.fn();
+        el.addEventListener('ds-close', closeSpy);
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+        dialog.dispatchEvent(event);
+
+        expect(closeSpy).toHaveBeenCalled();
+    });
+
+    it('does NOT close on Escape if prevent-close=true', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.preventClose = true;
+        el.heading = "Escape Prevented";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const closeSpy = vi.fn();
+        el.addEventListener('ds-close', closeSpy);
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+        dialog.dispatchEvent(event);
+
+        expect(closeSpy).not.toHaveBeenCalled();
+    });
+
+    it('traps Tab focus in modal mode', async () => {
+        container.innerHTML = `
+            <ds-dialog open modal heading="Focus Trap">
+                <button id="btn1">Button 1</button>
+                <button id="btn2">Button 2</button>
+            </ds-dialog>
+        `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const btn1 = el.querySelector('#btn1');
+        const btn2 = el.querySelector('#btn2');
+
+        // Tab trap should be active
+        expect(el.modal).toBe(true);
+        expect(btn1).toBeTruthy();
+        expect(btn2).toBeTruthy();
+    });
+
+    it('cycles Tab forward through focusables in modal', async () => {
+        container.innerHTML = `
+            <ds-dialog open modal heading="Forward Tab">
+                <button id="first">First</button>
+                <button id="last">Last</button>
+            </ds-dialog>
+        `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        const lastBtn = el.querySelector('#last');
+
+        // Simulate Tab on last element
+        lastBtn.focus();
+        const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+        dialog.dispatchEvent(event);
+
+        // Should cycle (preventDefault should have been called)
+        expect(el.modal).toBe(true);
+    });
+
+    it('cycles Shift+Tab backwards in modal', async () => {
+        container.innerHTML = `
+            <ds-dialog open modal heading="Backward Tab">
+                <button id="first">First</button>
+                <button id="last">Last</button>
+            </ds-dialog>
+        `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        const firstBtn = el.querySelector('#first');
+
+        // Simulate Shift+Tab on first element
+        firstBtn.focus();
+        const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true });
+        dialog.dispatchEvent(event);
+
+        expect(el.modal).toBe(true);
+    });
+
+    // SLOT TESTS
+    it('renders custom header slot (overrides heading prop)', async () => {
+        container.innerHTML = `
+            <ds-dialog open>
+                <div slot="header" id="custom-header">Custom Header Content</div>
+            </ds-dialog>
+        `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const customHeader = el.querySelector('#custom-header');
+        expect(customHeader).toBeTruthy();
+        expect(customHeader.textContent).toBe('Custom Header Content');
+    });
+
+    it('renders body slot content', async () => {
+        container.innerHTML = `
+            <ds-dialog open>
+                <div slot="body" id="custom-body">Custom Body</div>
+            </ds-dialog>
+        `;
+        const el = container.querySelector('ds-dialog');
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const customBody = el.querySelector('#custom-body');
+        expect(customBody).toBeTruthy();
+    });
+
+    // SCROLL LOCK TESTS
+    it('locks body scroll when modal=true opens', async () => {
+        const el = document.createElement('ds-dialog');
+        el.modal = true;
+        el.heading = "Scroll Lock Test";
+        container.appendChild(el);
+
+        // Initially no lock
+        expect(document.body.style.overflow).toBe('');
+
+        el.open = true;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.body.style.overflow).toBe('hidden');
+    });
+
+    it('unlocks body scroll when modal dialog closes', async () => {
+        const el = document.createElement('ds-dialog');
+        el.modal = true;
+        el.open = true;
+        el.heading = "Unlock Test";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.body.style.overflow).toBe('hidden');
+
+        el.open = false;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.body.style.overflow).toBe('');
+    });
+
+    it('unlocks scroll on component disconnect', async () => {
+        const el = document.createElement('ds-dialog');
+        el.modal = true;
+        el.open = true;
+        el.heading = "Disconnect Test";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(document.body.style.overflow).toBe('hidden');
+
+        container.removeChild(el);
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        expect(document.body.style.overflow).toBe('');
+    });
+
+    // EDGE CASES
+    it('switches from non-modal to modal while open', async () => {
+        const el = document.createElement('ds-dialog');
+        el.open = true;
+        el.modal = false;
+        el.heading = "Modal Switch";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        const dialog = el.shadowRoot.querySelector('dialog');
+        expect(dialog.classList.contains('is-modal')).toBe(false);
+
+        el.modal = true;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(dialog.classList.contains('is-modal')).toBe(true);
+    });
+
+    it('emits ds-open event when opened', async () => {
+        const el = document.createElement('ds-dialog');
+        el.heading = "Open Event Test";
+        container.appendChild(el);
+        await new Promise(resolve => setTimeout(resolve, 50));
+
+        const openSpy = vi.fn();
+        el.addEventListener('ds-open', openSpy);
+
+        el.open = true;
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        expect(openSpy).toHaveBeenCalled();
+    });
+});

package/src/ds-dialog/index.js

@@ -0,0 +1 @@
+export * from './ds-dialog.js';

package/src/ds-dropdown/ds-dropdown.a11y.test.js

@@ -0,0 +1,80 @@
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import axe from 'axe-core';
+import './ds-dropdown.js';
+
+describe('ds-dropdown accessibility', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  async function runAxe(html) {
+    container.innerHTML = html;
+    const element = container.querySelector('ds-dropdown');
+    await new Promise(resolve => setTimeout(resolve, 150));
+
+    const results = await axe.run(container);
+    if (results.violations.length > 0) {
+      console.log('Axe Violations:', JSON.stringify(results.violations, null, 2));
+    }
+    return results;
+  }
+
+  it('should pass axe accessibility checks for default state', async () => {
+    const results = await runAxe(`
+      <ds-dropdown label="Country">
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+        <ds-list-item value="es" label="Spain"></ds-list-item>
+      </ds-dropdown>
+    `);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe accessibility checks with value', async () => {
+    const results = await runAxe(`
+      <ds-dropdown label="Country" value="pt">
+        <ds-list-item value="pt" label="Portugal" selected></ds-list-item>
+        <ds-list-item value="es" label="Spain"></ds-list-item>
+      </ds-dropdown>
+    `);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe accessibility checks for disabled state', async () => {
+    const results = await runAxe(`
+      <ds-dropdown label="Country" disabled>
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+      </ds-dropdown>
+    `);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe accessibility checks for required field', async () => {
+    const results = await runAxe(`
+      <ds-dropdown label="Country" required>
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+      </ds-dropdown>
+    `);
+    expect(results.violations).toHaveLength(0);
+  });
+
+  it('should pass axe accessibility checks for error state', async () => {
+    const results = await runAxe(`
+      <ds-dropdown 
+        label="Country" 
+        validation-status="error"
+        validation-message="This field is required"
+      >
+        <ds-list-item value="pt" label="Portugal"></ds-list-item>
+      </ds-dropdown>
+    `);
+    expect(results.violations).toHaveLength(0);
+  });
+});