ripple 0.3.68 → 0.3.70

package/tests/client/html.test.tsrx

@@ -1,30 +1,86 @@
-import { flushSync, track } from 'ripple';
+import { Fragment, flushSync, track } from 'ripple';
+
+describe('Fragment innerHTML', () => {
+	it('renders host innerHTML as content instead of an attribute', () => {
+		function App() {
+			return <>
+				const html = '<span>Host HTML</span>';
+				<code innerHTML={html} />
+			</>;
+		}
 
-describe('html directive', () => {
-	it('renders static html', () => {
-		component App() {
-			let str = '<div>Test</div>';
+		render(App);
 
-			{html str}
+		const code = container.querySelector('code') as HTMLElement;
+		expect(code.innerHTML).toBe('<span>Host HTML</span>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+	});
+
+	it('renders spread innerHTML as content instead of an attribute', () => {
+		function App() {
+			return <>
+				let &[attrs] = track<{ innerHTML?: string }>({
+					innerHTML: '<span>Spread HTML</span>',
+				});
+				<code {...attrs} />
+				<button onClick={() => (attrs = { innerHTML: '<em>Updated HTML</em>' })}>{'Update'}</button>
+			</>;
 		}
 
 		render(App);
-		expect(container).toMatchSnapshot();
+
+		const code = container.querySelector('code') as HTMLElement;
+		expect(code.innerHTML).toBe('<span>Spread HTML</span>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+
+		const button = container.querySelector('button') as HTMLButtonElement;
+		button.click();
+		flushSync();
+
+		expect(code.innerHTML).toBe('<em>Updated HTML</em>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
 	});
 
-	it('renders dynamic html', () => {
-		component App() {
-			let &[str] = track('<div>Test</div>');
+	it('uses the last innerHTML value when spreads and direct props are mixed', () => {
+		function App() {
+			return <>
+				const attrs = { innerHTML: '<span>Spread HTML</span>' };
+				<code {...attrs} innerHTML="<em>Direct HTML</em>" />
+			</>;
+		}
+
+		render(App);
+
+		const code = container.querySelector('code') as HTMLElement;
+		expect(code.innerHTML).toBe('<em>Direct HTML</em>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+	});
 
-			{html str}
+	it('renders static innerHTML fragments', () => {
+		function App() {
+			return <>
+				let str = '<div>Test</div>';
+				<Fragment innerHTML={str} />
+			</>;
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	});
 
-			<button
-				onClick={() => {
-					str = '<div>Updated</div>';
-				}}
-			>
-				{'Update'}
-			</button>
+	it('renders dynamic innerHTML fragments', () => {
+		function App() {
+			return <>
+				let &[str] = track('<div>Test</div>');
+				<Fragment innerHTML={str} />
+				<button
+					onClick={() => {
+						str = '<div>Updated</div>';
+					}}
+				>
+					{'Update'}
+				</button>
+			</>;
 		}
 
 		render(App);
@@ -37,11 +93,50 @@ describe('html directive', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('renders the correct namespace for child svg element when html is surrounded by <svg>', () => {
-		component App() {
-			let str = '<circle r="45" cx="50" cy="50" fill="red" />';
+	it('renders static Fragment innerHTML', () => {
+		function App() {
+			return <>
+				const html = '<strong>Fragment HTML</strong>';
+				<Fragment innerHTML={html} />
+			</>;
+		}
+
+		render(App);
 
-			<svg height="100" width="100">{html str}</svg>
+		expect(container.innerHTML).toContain('<strong>Fragment HTML</strong>');
+		expect(container.innerHTML).not.toContain('<fragment');
+	});
+
+	it('updates dynamic Fragment innerHTML', () => {
+		function App() {
+			return <>
+				let &[html] = track('<span>First</span>');
+				<Fragment innerHTML={html} />
+				<button onClick={() => (html = '<em>Second</em>')}>{'Update'}</button>
+			</>;
+		}
+
+		render(App);
+		expect(container.innerHTML).toContain('<span>First</span>');
+		expect(container.innerHTML).toContain('<button>Update</button>');
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(container.innerHTML).toContain('<em>Second</em>');
+		expect(container.innerHTML).not.toContain('<span>First</span>');
+		expect(container.innerHTML).toContain('<button>Update</button>');
+	});
+
+	it('renders the correct namespace for child svg element when html is surrounded by <svg>', () => {
+		function App() {
+			return <>
+				let str = '<circle r="45" cx="50" cy="50" fill="red" />';
+				<svg height="100" width="100">
+					<Fragment innerHTML={str} />
+				</svg>
+			</>;
 		}
 
 		render(App);
@@ -53,10 +148,11 @@ describe('html directive', () => {
 	it(
 		'renders the correct namespace for child math element when html is surrounded by <math>',
 		() => {
-			component App() {
-				let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
-
-				<math>{html str}</math>
+			function App() {
+				return <>
+					let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
+					<math><Fragment innerHTML={str} /></math>
+				</>;
 			}
 
 			render(App);