ripple 0.2.68 → 0.2.69

package/tests/svg.test.ripple

@@ -0,0 +1,282 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync } from 'ripple';
+
+describe('SVG namespace handling', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('should render static SVG elements with correct namespace', () => {
+		component App() {
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+				<path d="m14 12 4 4 4-4" />
+				<circle cx="12" cy="12" r="4" />
+				<rect x="4" y="4" width="16" height="16" />
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const path = container.querySelector('path');
+		const circle = container.querySelector('circle');
+		const rect = container.querySelector('rect');
+
+		// Verify SVG namespace
+		expect(svg).toBeTruthy();
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Verify child elements have SVG namespace
+		expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Verify attributes are set correctly
+		expect(path.getAttribute('d')).toBe('m14 12 4 4 4-4');
+		expect(circle.getAttribute('cx')).toBe('12');
+		expect(rect.getAttribute('width')).toBe('16');
+	});
+
+	it('should render dynamic SVG paths with for loop (original issue)', () => {
+		component App() {
+			const d = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+				for (const pathData of d) {
+					<path d={pathData} />
+				}
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const paths = container.querySelectorAll('path');
+
+		// Verify SVG container
+		expect(svg).toBeTruthy();
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Critical test: dynamic paths should have correct SVG namespace
+		expect(paths.length).toBe(4);
+		const expectedPaths = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+		paths.forEach((path, i) => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(path.getAttribute('d')).toBe(expectedPaths[i]);
+		});
+
+		// Verify paths are actually SVG elements (should have getBBox method)
+		// Note: getBBox might not work in test environment, so just check namespace
+		paths.forEach(path => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(path.tagName.toLowerCase()).toBe('path');
+		});
+	});
+
+	it('should handle mixed static and dynamic SVG elements', () => {
+		component App() {
+			const dynamicPaths = ["M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z"];
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor">
+				<circle cx="12" cy="12" r="10" />
+				for (const pathData of dynamicPaths) {
+					<path d={pathData} />
+				}
+				<rect x="4" y="4" width="16" height="16" />
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const circle = container.querySelector('circle');
+		const path = container.querySelector('path');
+		const rect = container.querySelector('rect');
+
+		// All elements should have SVG namespace
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Verify content
+		expect(path.getAttribute('d')).toBe('M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z');
+	});
+
+	it('should handle nested SVG groups with for loops', () => {
+		component App() {
+			const items = [
+				{ x: "10", y: "10", width: "20", height: "20" },
+				{ x: "40", y: "40", width: "20", height: "20" }
+			];
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+				<g fill="blue">
+					for (const item of items) {
+						<rect x={item.x} y={item.y} width={item.width} height={item.height} />
+					}
+				</g>
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const g = container.querySelector('g');
+		const rects = container.querySelectorAll('rect');
+
+		// Verify namespaces
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(g.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(rects.length).toBe(2);
+		
+		rects.forEach(rect => {
+			expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		});
+
+		// Verify attributes
+		expect(rects[0].getAttribute('x')).toBe('10');
+		expect(rects[0].getAttribute('y')).toBe('10');
+		expect(rects[1].getAttribute('x')).toBe('40');
+		expect(rects[1].getAttribute('y')).toBe('40');
+	});
+
+	it('should handle SVG class attributes correctly', () => {
+		component App() {
+			let className = 'svg-element';
+			const paths = ['M10 10 L20 20'];
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class={className}>
+				for (const pathData of paths) {
+					<path d={pathData} class="dynamic-path" />
+				}
+				<circle cx="50" cy="50" r="10" class={className} />
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const path = container.querySelector('path');
+		const circle = container.querySelector('circle');
+
+		// Verify namespaces
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Verify class attributes work with SVG elements
+		expect(svg.getAttribute('class')).toBe('svg-element');
+		expect(path.getAttribute('class')).toBe('dynamic-path');
+		expect(circle.getAttribute('class')).toBe('svg-element');
+
+		// SVG elements should NOT have className property set
+		expect(svg.className).not.toBe('svg-element'); // className is different for SVG
+		expect(path.className).not.toBe('dynamic-path');
+	});
+
+	it('should handle namespace transitions with foreignObject', () => {
+		component App() {
+			<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+				<rect x="10" y="10" width="50" height="50" fill="red" />
+				<foreignObject x="100" y="100" width="80" height="80">
+					<div class="html-content">{'HTML inside SVG'}</div>
+				</foreignObject>
+				<circle cx="50" cy="150" r="20" fill="blue" />
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		const rect = container.querySelector('rect');
+		const foreignObject = container.querySelector('foreignObject');
+		const div = container.querySelector('div');
+		const circle = container.querySelector('circle');
+
+		// SVG elements should have SVG namespace
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(foreignObject.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(circle.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// HTML content inside foreignObject should have HTML namespace
+		expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+		expect(div.textContent).toBe('HTML inside SVG');
+	});
+
+	it('should compare static vs dynamic SVG rendering (original problem case)', () => {
+		component App() {
+			const d = ["m14 12 4 4 4-4", "M18 16V7", "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", "M3.304 13h6.392"];
+
+			<div class="container">
+				{/* Dynamic SVG - the original problem case */}
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" class="dynamic-svg">
+					for (const path of d) {
+						<path d={path} />
+					}
+				</svg>
+
+				{/* Static SVG - always worked */}
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" class="static-svg">
+					<path d="m14 12 4 4 4-4"></path>
+					<path d="M18 16V7"></path>
+					<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"></path>
+					<path d="M3.304 13h6.392"></path>
+				</svg>
+			</div>
+		}
+
+		render(App);
+
+		const dynamicSvg = container.querySelector('.dynamic-svg');
+		const staticSvg = container.querySelector('.static-svg');
+		const dynamicPaths = dynamicSvg.querySelectorAll('path');
+		const staticPaths = staticSvg.querySelectorAll('path');
+
+		// Both SVGs should have correct namespace
+		expect(dynamicSvg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		expect(staticSvg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		// Both should have same number of paths
+		expect(dynamicPaths.length).toBe(4);
+		expect(staticPaths.length).toBe(4);
+
+		// All paths should have SVG namespace
+		dynamicPaths.forEach(path => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		});
+		staticPaths.forEach(path => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		});
+
+		// Dynamic and static should have identical path data
+		dynamicPaths.forEach((path, i) => {
+			expect(path.getAttribute('d')).toBe(staticPaths[i].getAttribute('d'));
+		});
+
+		// Critical test: all paths should be proper SVG elements
+		dynamicPaths.forEach(path => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(path.tagName.toLowerCase()).toBe('path');
+		});
+		staticPaths.forEach(path => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+			expect(path.tagName.toLowerCase()).toBe('path');
+		});
+	});
+});