@nuvia-ui/components 4.0.1

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

@@ -0,0 +1,311 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './ds-stepper.js';
+import '../ds-stepper-item/ds-stepper-item.js';
+
+const wait = (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('ds-stepper', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default slots', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el).toBeTruthy();
+        const items = el.querySelectorAll('ds-stepper-item');
+        expect(items.length).toBe(3);
+    });
+
+    it('defaults to horizontal direction', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el.direction).toBe('horizontal');
+    });
+
+    it('supports vertical direction', async () => {
+        container.innerHTML = `
+            <ds-stepper direction="vertical">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        await wait();
+
+        expect(el.direction).toBe('vertical');
+        expect(el.getAttribute('direction')).toBe('vertical');
+    });
+
+    it('assigns position (first, middle, last) to children', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0]._position).toBe('first');
+        expect(items[1]._position).toBe('middle');
+        expect(items[2]._position).toBe('last');
+    });
+
+    it('assigns step numbers and total to children', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0]._step).toBe(1);
+        expect(items[1]._step).toBe(2);
+        expect(items[2]._step).toBe(3);
+        expect(items[0]._totalSteps).toBe(3);
+        expect(items[2]._totalSteps).toBe(3);
+    });
+
+    it('derives completed/current states from active-step prop (controlled)', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="1">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0].completed).toBe(true);
+        expect(items[0].current).toBe(false);
+        expect(items[1].completed).toBe(false);
+        expect(items[1].current).toBe(true);
+        expect(items[2].completed).toBe(false);
+        expect(items[2].current).toBe(false);
+    });
+
+    it('defaults to step 0 active in uncontrolled mode', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0].current).toBe(true);
+        expect(items[1].current).toBe(false);
+    });
+
+    it('supports default-active-step for initial uncontrolled state', async () => {
+        container.innerHTML = `
+            <ds-stepper default-active-step="2">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0].completed).toBe(true);
+        expect(items[1].completed).toBe(true);
+        expect(items[2].current).toBe(true);
+    });
+
+    it('emits ds-change when a step is clicked', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const items = container.querySelectorAll('ds-stepper-item');
+
+        let eventDetail = null;
+        el.addEventListener('ds-change', (e) => {
+            eventDetail = e.detail;
+        });
+
+        // Click second step indicator
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+        indicator.click();
+        await wait();
+
+        expect(eventDetail).not.toBeNull();
+        expect(eventDetail.currentStep).toBe(1); // 0-based
+        expect(eventDetail.previousStep).toBe(0);
+    });
+
+    it('updates internal state on click in uncontrolled mode', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const items = container.querySelectorAll('ds-stepper-item');
+
+        // Click second step
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+        indicator.click();
+        await wait();
+
+        expect(el._internalActiveStep).toBe(1);
+        expect(items[0].completed).toBe(true);
+        expect(items[1].current).toBe(true);
+    });
+
+    it('does NOT update internal state on click in controlled mode', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="0">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const items = container.querySelectorAll('ds-stepper-item');
+
+        // Click second step - should NOT change internal state
+        const indicator = items[1].shadowRoot.querySelector('.indicator');
+        indicator.click();
+        await wait();
+
+        // State should remain at 0 since parent hasn't updated the prop
+        expect(items[0].current).toBe(true);
+        expect(items[1].current).toBe(false);
+    });
+
+    it('propagates linear mode to children', async () => {
+        container.innerHTML = `
+            <ds-stepper linear active-step="0">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        expect(items[0]._linear).toBe(true);
+        expect(items[1]._linear).toBe(true);
+        expect(items[2]._linear).toBe(true);
+    });
+
+    it('propagates _prevCompleted and _prevError to children', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="2">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item error>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        // Item 2's prevCompleted should reference item 1 (completed since activeStep=2)
+        expect(items[1]._prevCompleted).toBe(true);
+        // Item 3's prevError should be true (item 2 has error)
+        expect(items[2]._prevError).toBe(true);
+    });
+
+    it('ignores click on same step', async () => {
+        container.innerHTML = `
+            <ds-stepper>
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+            </ds-stepper>
+        `;
+        await wait();
+
+        const el = container.querySelector('ds-stepper');
+        const changeSpy = vi.fn();
+        el.addEventListener('ds-change', changeSpy);
+
+        // Click the already-active first step
+        const items = container.querySelectorAll('ds-stepper-item');
+        const indicator = items[0].shadowRoot.querySelector('.indicator');
+        indicator.click();
+        await wait();
+
+        expect(changeSpy).not.toHaveBeenCalled();
+    });
+
+    it('does NOT auto-complete steps when auto-complete="false"', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="2">
+                <ds-stepper-item>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        el.autoComplete = false; // Set property directly
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        // With auto-complete=false, steps 0 and 1 should NOT be auto-completed
+        expect(items[0].completed).toBe(false);
+        expect(items[1].completed).toBe(false);
+        expect(items[2].current).toBe(true);
+    });
+
+    it('respects manual completed attribute when auto-complete="false"', async () => {
+        container.innerHTML = `
+            <ds-stepper active-step="2">
+                <ds-stepper-item completed>Step 1</ds-stepper-item>
+                <ds-stepper-item>Step 2</ds-stepper-item>
+                <ds-stepper-item>Step 3</ds-stepper-item>
+            </ds-stepper>
+        `;
+        const el = container.querySelector('ds-stepper');
+        el.autoComplete = false; // Set property directly
+        await wait();
+
+        const items = container.querySelectorAll('ds-stepper-item');
+        // Item 0 should be completed (manual attribute)
+        expect(items[0].completed).toBe(true);
+        // Item 1 should NOT be completed (no auto-complete, no manual attribute)
+        expect(items[1].completed).toBe(false);
+        expect(items[2].current).toBe(true);
+    });
+});