@warp-ds/elements 2.8.2-next.2 → 2.8.2-next.3

package/dist/packages/badge/badge.hydration.test.d.ts

@@ -0,0 +1 @@
+import './badge.js';

package/dist/packages/badge/badge.hydration.test.js

@@ -0,0 +1,50 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './badge.js';
+describe('w-badge React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {});
+        expect(warnings).toEqual([]);
+    });
+    test('neutral variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'neutral',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('info variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'info',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('positive variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'positive',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('warning variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'warning',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('negative variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'negative',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with position hydrates without warnings', async () => {
+        const warnings = await testHydration('w-badge', {
+            variant: 'info',
+            position: 'top-right',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/box/box.hydration.test.d.ts

@@ -0,0 +1 @@
+import './box.js';

package/dist/packages/box/box.hydration.test.js

@@ -0,0 +1,37 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './box.js';
+describe('w-box React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-box', {});
+        expect(warnings).toEqual([]);
+    });
+    test('info box hydrates without warnings', async () => {
+        const warnings = await testHydration('w-box', {
+            info: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('neutral box hydrates without warnings', async () => {
+        const warnings = await testHydration('w-box', {
+            neutral: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('bordered box hydrates without warnings', async () => {
+        const warnings = await testHydration('w-box', {
+            bordered: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('bleed box hydrates without warnings', async () => {
+        const warnings = await testHydration('w-box', {
+            bleed: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts

@@ -0,0 +1 @@
+import './breadcrumbs.js';

package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js

@@ -0,0 +1,141 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration, testHydrationWithChildren } from '../../tests/react-hydration';
+import './breadcrumbs.js';
+describe('w-breadcrumbs React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-breadcrumbs', {});
+        expect(warnings).toEqual([]);
+    });
+    test('with aria-label hydrates without warnings', async () => {
+        const warnings = await testHydration('w-breadcrumbs', { 'aria-label': 'Navigation breadcrumbs' });
+        expect(warnings).toEqual([]);
+    });
+    // Tests for child elements - breadcrumbs consumes children and renders them
+    // in shadow DOM, which causes hydration mismatches. These use test.fails
+    // to document the known issues until they are fixed.
+    test.fails('with single link child hydrates without warnings', async () => {
+        const childrenHtml = '<a href="#/home">Home</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with multiple link children hydrates without warnings', async () => {
+        // This tests the interleaving behavior - "/" separators are added between children
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with three link children hydrates without warnings', async () => {
+        // More children = more separators interleaved
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><a href="#/page">Page</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with links and span (current page) hydrates without warnings', async () => {
+        // Common pattern: links for navigation, span for current page
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a><span aria-current="page">Current page</span>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with span children hydrates without warnings', async () => {
+        // Non-link children get different CSS class (s-text vs s-text-link)
+        const childrenHtml = '<span>First</span><span>Second</span><span aria-current="page">Current</span>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with mixed element types hydrates without warnings', async () => {
+        // Mix of different element types to ensure class assignment works correctly
+        const childrenHtml = '<a href="#/home">Home</a><span>Category</span><a href="#/page">Page</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', {}, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails('with aria-label and children hydrates without warnings', async () => {
+        const childrenHtml = '<a href="#/home">Home</a><a href="#/category">Category</a>';
+        const warnings = await testHydrationWithChildren('w-breadcrumbs', { 'aria-label': 'Breadcrumb navigation' }, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+});
+// These tests verify the component's DOM manipulation behavior that can cause
+// hydration mismatches. The breadcrumbs component currently:
+// 1. Moves children from light DOM to shadow DOM
+// 2. Adds CSS classes to child elements
+// 3. Interleaves separator elements between children
+//
+// In SSR scenarios, children are rendered in light DOM. When the component
+// hydrates client-side and moves/modifies them, React detects a mismatch.
+//
+// These tests use test.fails to document the known issues until they are fixed.
+describe('w-breadcrumbs child element DOM stability', () => {
+    test.fails('should preserve children in light DOM (not move to shadow DOM)', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        // Wait for custom element upgrade
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        // Children should remain in light DOM, not be moved to shadow DOM
+        // Current behavior: children.length is 0 because they're moved to shadow DOM
+        expect(breadcrumbs?.children.length).toBe(2);
+        document.body.removeChild(container);
+    });
+    test.fails('should not add classes to light DOM link children', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        // Wait for custom element upgrade
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        // Check light DOM children exist and don't have modified classes
+        const links = container.querySelectorAll('w-breadcrumbs > a');
+        expect(links.length).toBe(2);
+        for (const link of links) {
+            // Links should NOT have classes added by the component
+            expect(link.classList.contains('s-text-link')).toBe(false);
+        }
+        document.body.removeChild(container);
+    });
+    test.fails('should not add classes to light DOM span children', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><span>First</span><span>Current</span></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const spans = container.querySelectorAll('w-breadcrumbs > span');
+        expect(spans.length).toBe(2);
+        for (const span of spans) {
+            // Spans should NOT have classes added by the component
+            expect(span.classList.contains('s-text')).toBe(false);
+        }
+        document.body.removeChild(container);
+    });
+    test.fails('should not insert separator elements into light DOM', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home">Home</a><a href="#/category">Category</a></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const breadcrumbs = container.querySelector('w-breadcrumbs');
+        // Should only have the original 2 children, no separators added to light DOM
+        expect(breadcrumbs?.children.length).toBe(2);
+        // No separator spans should be in light DOM
+        const separators = container.querySelectorAll('w-breadcrumbs > span.select-none');
+        expect(separators.length).toBe(0);
+        document.body.removeChild(container);
+    });
+    test.fails('should preserve original child element attributes in light DOM', async () => {
+        const container = document.createElement('div');
+        container.innerHTML = '<w-breadcrumbs><a href="#/home" data-test="home">Home</a><span aria-current="page">Current</span></w-breadcrumbs>';
+        document.body.appendChild(container);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const link = container.querySelector('w-breadcrumbs > a');
+        const span = container.querySelector('w-breadcrumbs > span');
+        // Children should exist in light DOM
+        expect(link).not.toBeNull();
+        expect(span).not.toBeNull();
+        // Original attributes should be preserved
+        expect(link?.getAttribute('href')).toBe('#/home');
+        expect(link?.getAttribute('data-test')).toBe('home');
+        expect(span?.getAttribute('aria-current')).toBe('page');
+        document.body.removeChild(container);
+    });
+});