solarite 0.1.0 → 0.1.1

package/tests/Solarite.test.js

@@ -1,17 +1,208 @@
 // noinspection DuplicatedCode
 
 import {camelToDashes, htmlContext} from "../src/solarite/Util.js";
-import {watchGet, watchSet} from "../src/solarite/watch.js";
-import Testimony, {assert} from './Testimony.js';
-Testimony.enableJsDom();
+//import {watchGet, watchSet} from "../src/solarite/watch.js";
 
-import {Solarite, r} from '../src/solarite/Solarite.js';
-//import {Red, r, Perf} from '../dist/Solarite.min.js'; // This will help the Benchmark test warm up.
+import {Solarite, r, getArg} from '../src/solarite/Solarite.js';
+//import {Solarite, r, getArg} from '../dist/Solarite.min.js'; // This will help the Benchmark test warm up.
 import {watch} from "../src/solarite/watch2.js";
+import watch3 from "../src/solarite/watch3.js";
+import NodeGroupManager from "../src/solarite/NodeGroupManager.js";
+import NodeGroup from "../src/solarite/NodeGroup.js";
+import Template from "../src/solarite/Template.js";
+import Shell from "../src/solarite/Shell.js";
+
+import Testimony, {assert} from './Testimony.js';
+
+
+// This function is used by the various tests.
+window.getHtml = (item, includeComments=false) => {
+	if (!item)
+		return item;
+
+	if (item.fragment)
+		item = item.fragment; // Shell
+	if (item instanceof DocumentFragment)
+		item = [...item.childNodes]
+
+	else if (item.getNodes)
+		item = item.getNodes()
+
+	let result;
+	if (Array.isArray(item)) {
+		if (!includeComments)
+			item = item.filter(n => n.nodeType !==8)
+
+		result = item.map(n => n.nodeType === 8 ? `<!--${n.textContent}-->` : n.outerHTML || n.textContent).join('|')
+	}
+	else
+		result = item.outerHTML || item.textContent
+
+	if (!includeComments)
+		result = result.replace(/(<)!--(.*?)-->/g, '')
+
+	// Remove whitespace between tags, so we can write simpler tests.
+	return result.replace(/^\s+</g, '<').replace(/>\s+</g, '><').replace(/>\s+$/g, '>');
+}
+
+
+Testimony.test('Solarite.Shell.empty', () => {
+	let shell = new Shell(['', ''])
+	assert.eq(getHtml(shell, true), '<!--PathStart:0-->|<!--PathEnd:0-->')
+});
+
+Testimony.test('Solarite.Shell.paragraph', () => {
+	let shell = new Shell(['<p>', '</p>'])
+	assert.eq(getHtml(shell, true), '<p><!--PathStart:0--><!--PathEnd:0--></p>')
+});
+
+Testimony.test('Solarite.Shell.nodeBefore', () => {
+	let shell = new Shell(['a', ''])
+	assert.eq(getHtml(shell, true), 'a|<!--PathEnd:0-->')
+});
+
+Testimony.test('Solarite.Shell.nodeAfter', () => {
+	let shell = new Shell(['', 'b'])
+	assert.eq(getHtml(shell, true), '<!--PathStart:0-->|b')
+});
+
+Testimony.test('Solarite.Shell.nodeBeforeAfter', () => {
+	let shell = new Shell(['a', 'b'])
+	assert.eq(getHtml(shell, true), 'a|b')
+});
+
+Testimony.test('Solarite.Shell.emptyTwoPaths', () => {
+	let shell = new Shell(['', '', ''])
+	assert.eq(getHtml(shell, true), '<!--PathStart:0-->|<!--PathEnd:0-->|<!--PathEnd:1-->')
+});
+
+Testimony.test('Solarite.Shell.nodeBetweenPaths', () => {
+	let shell = new Shell(['', 'a', ''])
+	assert.eq(getHtml(shell, true), '<!--PathStart:0-->|a|<!--PathEnd:1-->')
+});
+
+Testimony.test('Solarite.Shell.nodesAroundPaths', () => {
+	let shell = new Shell(['a', 'b', 'c'])
+	assert.eq(getHtml(shell, true), 'a|b|c')
+});
+
+Testimony.test('Solarite.Shell.emptyTwoPathsNested', () => {
+	let shell = new Shell(['<p>', '', '</p>'])
+	assert.eq(getHtml(shell, true), '<p><!--PathStart:0--><!--PathEnd:0--><!--PathEnd:1--></p>')
+});
+
+Testimony.test('Solarite.Shell.nodesAroundPathsNested', () => {
+	let shell = new Shell(['<p>a', 'b', 'c</p>'])
+	assert.eq(getHtml(shell, true), '<p>abc</p>')
+});
 
 
+// Testimony.test('Shell.emptySpacer', () => {
+// 	let expr = 1;
+// 	let shell = new Shell(['<input ', '', 'onclick=','>'])
+// 	console.log(getHtml(shell, true))
+// });
+
+
+
+Testimony.test('Solarite.NodeGroup.empty', () => {
+	let ngm = new NodeGroupManager(document.body);
+
+	let ng = new NodeGroup(new Template([``], []), ngm)
+	assert.eq(getHtml(ng), '')
+
+	ng.applyExprs([])
+	assert.eq(getHtml(ng), '')
+});
+
+
+Testimony.test('Solarite.NodeGroup.oneExpr', () => {
+	let ngm = new NodeGroupManager(document.body);
+
+	let ng = new NodeGroup(new Template([``, ``], ['1']), ngm)
+	assert.eq(getHtml(ng), '1')
+
+	ng.applyExprs([2])
+	assert.eq(getHtml(ng), '2')
+
+	ng.applyExprs([[3, 4, 5]])
+	assert.eq(getHtml(ng), '3|4|5')
+});
+
+Testimony.test('Solarite.NodeGroup.emptyAdjacent', () => {
+	let ngm = new NodeGroupManager(document.body);
+	let ng = new NodeGroup(new Template([``, ``, ``], ['1', '2']), ngm)
+	ng.verify();
+
+	assert.eq(getHtml(ng), '1|2')
+
+	ng.applyExprs([3, 4])
+	assert.eq(getHtml(ng), '3|4')
+
+	ng.applyExprs([[1, 2, 3], [4, 5, 6]])
+	assert.eq(getHtml(ng), '1|2|3|4|5|6')
+});
+
+
+Testimony.test('Solarite.NodeGroup.paragraph', () => {
+	let ngm = new NodeGroupManager(document.body);
+	let ng = new NodeGroup(new Template(['<p>', '</p>'], ['1']), ngm)
+	assert.eq(getHtml(ng), '<p>1</p>')
+
+	ng.applyExprs([2])
+	assert.eq(getHtml(ng), '<p>2</p>')
+
+	ng.applyExprs([[3, 4, 5]])
+	assert.eq(getHtml(ng), '<p>345</p>')
+});
+
+Testimony.test('Solarite.NodeGroup.node', () => {
+	let ngm = new NodeGroupManager(document.body);
+	let a = r('<p>a</p>')
+	let b = r('<p>b</p>')
+	let ng = new NodeGroup(new Template(['<div>', '</div>'], [a]), ngm)
+
+	assert.eq(getHtml(ng), '<div><p>a</p></div>')
+
+	ng.applyExprs([b]);
+	assert.eq(getHtml(ng), '<div><p>b</p></div>')
+
+	ng.applyExprs([1]);
+	assert.eq(getHtml(ng), '<div>1</div>')
+
+	ng.applyExprs([a]);
+	assert.eq(getHtml(ng), '<div><p>a</p></div>')
+});
+
+Testimony.test('Solarite.NodeGroup._nodeSwap', () => {
+	let ngm = new NodeGroupManager(document.body);
+	let a = r('<p>a</p>')
+	let b = r('<p>b</p>')
+	let ng = new NodeGroup(new Template(['<div>', '', '</div>'], [a, b]), ngm)
+	document.body.append(ng.startNode)
+
+	assert.eq(getHtml(ng), '<div><p>a</p><p>b</p></div>')
+
+	ng.applyExprs([b, a]);
+	assert.eq(getHtml(ng), '<div><p>b</p><p>a</p></div>');
+});
+
 
-Testimony.test('Util.htmlContext', () => {
+Testimony.test('Solarite.NodeGroup.arrayReverse', () => {
+	let ngm = new NodeGroupManager(document.body);
+	let list = [r('a'), r('b')];
+
+	let ng = new NodeGroup(new Template(['<div>', '</div>'], [list]), ngm)
+	ng.verify();
+	assert(getHtml(ng), '<div>ab</div')
+
+	list.reverse();
+	ng.applyExprs([list])
+	assert(getHtml(ng), '<div>ba</div')
+});
+
+
+Testimony.test('Solarite.Util.htmlContext', () => {
 	assert.eq(htmlContext('<div class="test'), htmlContext.Attribute)
 	assert.eq(htmlContext('">hello '), htmlContext.Text);
 	assert.eq(htmlContext('<span data-attr="hi > there"'), htmlContext.Tag);
@@ -24,7 +215,7 @@ Testimony.test('Util.htmlContext', () => {
 	assert.eq(htmlContext('>'), htmlContext.Text);
 });
 
-Testimony.test('Util.camelToDashes', () => {
+Testimony.test('Solarite.Util.camelToDashes', () => {
 	assert.eq(camelToDashes('ProperName'), 'proper-name');
 	assert.eq(camelToDashes('HTMLElement'), 'html-element');
 	assert.eq(camelToDashes('BigUI'), 'big-ui');
@@ -1623,7 +1814,7 @@ Testimony.test('Solarite.ids', () => {
 	class R500 extends Solarite {
 		one;
 		render() {
-			this.html = r`<div data-id="one"></div>`;
+			r(this)`<div data-id="one"></div>`;
 		}
 	}
 
@@ -1641,8 +1832,6 @@ Testimony.test('Solarite.r._createElement', () => {
 })
 
 
-
-
 Testimony.test('Solarite.r.element', () => {
 	let adjective = 'better'
 	let button = r()`<button>I'm a <b>${adjective}</b> button</button>`;
@@ -1654,6 +1843,7 @@ Testimony.test('Solarite.r.element', () => {
 
 Testimony.test('Solarite.r.lightweightComponent', () => {
 	function betterButton(count=0) {
+		// Pass a function to r() and it becomes the render() function.
 		let result = r(
 			() => r`<button onclick=${(ev, self)=>{count++; self.render()}}>I'm a ${count}X better button</button>`
 		);
@@ -1672,23 +1862,29 @@ Testimony.test('Solarite.r.lightweightComponent', () => {
 })
 
 Testimony.test('Solarite.r.lightweightComponent2', () => {
-	function betterButton(count=0) {
-		let result = r(
-			() => r`<button onclick=${(ev, self)=>{count++; self.render()}}>I'm a ${count}X better button</button>`
-		);
-		result.inc = () => {
-			count++;
-			result.render();
+
+	// Provide a function plus an object of other methods.
+	let count = 0;
+	let button = r(
+		() => r`
+			<button onclick=${(ev, self) => {
+				count++;
+				self.render();
+			}}>I've been clicked ${count} times.</button>`,
+		{
+			inc() {
+				count++;
+				this.render();
+			}
 		}
-		return result;
-	}
+	);
 
-	let button = betterButton(3);
-	assert.eq(getHtml(button), `<button onclick="">I'm a 3X better button</button>`)
+	assert.eq(getHtml(button), `<button onclick="">I've been clicked 0 times.</button>`)
 
 	button.inc();
-	assert.eq(getHtml(button), `<button onclick="">I'm a 4X better button</button>`)
-})
+	assert.eq(getHtml(button), `<button onclick="">I've been clicked 1 times.</button>`)
+});
+
 
 
 
@@ -1773,17 +1969,13 @@ Testimony.test('Solarite.component.dynamicAttribs', 'Attribs specified via ${...
 });
 
 Testimony.test('Solarite.component.getArg', 'Attribs specified html when not nested in another Solarite component.', () => {
-	
-	Solarite.getArgs = function(el) {
-		debugger;
-		return {};
-	}
-	
+
 	class B514 extends Solarite {
 		constructor({name, userid}={}) {
 			super();
-			this.name = this.getArg('name', name);
-			this.userId = this.getArg('userid', userid);
+
+			this.name = getArg(this, 'name', name);
+			this.userId = getArg(this, 'userid', userid);
 			this.render();
 		}
 		
@@ -1796,7 +1988,7 @@ Testimony.test('Solarite.component.getArg', 'Attribs specified html when not nes
 
 	let div = document.createElement('div');
 	div.innerHTML = `<b-514 name="User" userid="2"></b-514>`
-	
+
 	assert.eq(div.outerHTML, `<div><b-514 name="User" userid="2"><!--PathStart:0-->User | 2<!--PathEnd:1--></b-514></div>`)
 	
 });
@@ -2837,10 +3029,65 @@ Testimony.test('Solarite.watch2._forEachSpliceInsert', () => {
 
 
 
+Testimony.test('Solarite.watch3.primitive', () => {
 
+	class W100 extends HTMLElement {
+		name = 'Fred';
 
+		constructor() {
+			super();
+			watch3(this, 'name');
+			this.render();
+		}
+
+		render() {
+			r(this)`<w-100>${() => this.name + '!'}</w-100>`;
+		}
+	}
+	customElements.define('w-100', W100);
+
+	let a = new W100();
+	document.body.append(a);
+	assert(a.outerHTML, `<w-100>Fred!</w-100>`);
+
+	a.name = 'Jim';
+	assert(a.outerHTML, `<w-100>Jim!</w-100>`);
+
+	a.remove();
+});
+
+
+Testimony.test('Solarite.watch3.nodes', () => {
+
+	class W110 extends HTMLElement {
+		name = 'Fred';
+		name2 = 'White';
 
+		constructor() {
+			super();
+			watch3(this, 'name');
+			this.render();
+		}
+
+		render() {
+			r(this)`<w-110>${() => r`<div>${this.name + '!'}</div>`} ${this.name2}</w-110>`;
+		}
+	}
+	customElements.define('w-110', W110);
 
+	let a = new W110();
+	document.body.append(a);
+	assert(a.outerHTML, `<w-110><div>Fred!</div> White</w-110>`);
+
+	a.name = 'Jim';
+	assert(a.outerHTML, `<w-110><div>Jim!</div> White</w-110>`);
+
+	a.name2 = 'Brown'
+	a.render();
+	assert(a.outerHTML, `<w-110><div>Jim!</div> Brown</w-110>`);
+
+	a.remove();
+});
 
 
 
@@ -2866,13 +3113,13 @@ Testimony.test('Solarite.full.treeItems', () => {
 		}
 
 		render() {
-			this.html = r`
+			r(this)`
 				<tree-item>
 					<style>
 						:host #childItems { padding-left: 20px }
 					</style>				
 					<div onclick="${this.toggleChildren}">${this.titleText}</div>
-					<div id="childItems" hidden="${!this.showChildren}">
+					<div hidden="${!this.showChildren}">
 						${this.childItems}
 					</div>
 				</tree-item>`;