ripple 0.2.115 → 0.2.118

package/tests/client/array/array.to-methods.test.ripple

@@ -0,0 +1,93 @@
+import { track, flushSync, TrackedArray } from 'ripple';
+
+describe('TrackedArray > to* methods', () => {
+	it('handles toReversed method with reactivity', (context) => {
+		if (!('toReversed' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4);
+			let reversed = track(() => items.toReversed());
+
+			<button onClick={() => items.push(5)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@reversed)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,3,2,1]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[5,4,3,2,1]');
+	});
+
+	it('handles toSorted method with reactivity', (context) => {
+		if (!('toSorted' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray(3, 1, 4, 2);
+			let sorted = track(() => items.toSorted());
+
+			<button onClick={() => items.push(0)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@sorted)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2,0]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3,4]');
+	});
+
+	it('handles toSpliced method with reactivity', (context) => {
+		if (!('toSpliced' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray<string | number>(1, 2, 3, 4, 5);
+			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
+
+			<button onClick={() => items[2] = 30}>{'change item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@spliced)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
+
+		// Test changing an item
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
+	});
+});

package/tests/client/basic/__snapshots__/basic.attributes.test.ripple.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > attribute rendering > handles boolean attributes with no prop value provides 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <button
+      disabled=""
+    >
+      Button
+    </button>
+    <input
+      checked=""
+      type="checkbox"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > handles boolean props correctly 1`] = `
+<div>
+  <div
+    data-disabled=""
+  />
+  <input
+    disabled=""
+  />
+  <!---->
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render spread props without duplication 1`] = `
+<div>
+  <div>
+    <input
+      id="vehicle1"
+      name="car"
+      type="checkbox"
+      value="Bike"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render static attributes 1`] = `
+<div>
+  <div
+    class="foo"
+    id="bar"
+    style="color: red;"
+  >
+    Hello World
+  </div>
+  
+</div>
+`;

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -0,0 +1,106 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > rendering & text > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > should handle lexical scopes correctly 1`] = `
+<div>
+  <section>
+    Nested scope variable
+  </section>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;

package/tests/client/basic/__snapshots__/basic.text.test.ripple.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > text rendering > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;