dothtml 5.2.1 → 5.2.3

package/unittests/input-bindings.test.ts

@@ -1,166 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-import Component from "../src/component";
-
-// TODO: not sure if this is a valid test case.
-// The change event is dispatched on the option element, not the select.
-// Need to ensure this works with real elements and user interaction.
-class CompBindingInputChangeOption extends Component{
-    props:{myValue:boolean} = {myValue: false}
-    builder(){
-        return dot.select(
-            dot.option("a").value("a").selected()
-            .option("b").value("b").bindTo(this.props.myValue)
-            .option("c").value("c"))}
-    ready(){
-        dot(this.$el).as(dot.select).setVal("b");
-        //this.myValue.setFrom(this.$el.childNodes[1]);
-        var v = dot(this.$el).as(dot.select).getVal();
-        this.$el.children[1].dispatchEvent(new Event("change"));
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.myValue)
-        .div("Input: " + v);
-    }
-}
-
-class CompBindingWriteInput extends Component{builder(){return dot.div(new CompBindingWrite(dot.input(), "a", "b"))}}
-class CompBindingVarChangeInput extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input(), "a", "b"))}}
-class CompBindingInputChangeInput extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input(), "a", "b"))}}
-class CompBindingWriteTextArea extends Component{builder(){return dot.div(new CompBindingWrite(dot.textArea("x"), "a", "b"))}}
-class CompBindingVarChangeTextArea extends Component{builder(){return dot.div(new CompBindingVarChange(dot.textArea("x"), "a", "b"))}}
-class CompBindingInputChangeTextArea extends Component{builder(){return dot.div(new CompBindingInputChange(dot.textArea("x"), "a", "b"))}}
-class CompBindingWriteCheckboxOn extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("checkbox"), false, true))}}
-class CompBindingVarChangeCheckboxOn extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("checkbox"), false, true))}}
-class CompBindingInputChangeCheckboxOn extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("checkbox"), false, true))}}
-class CompBindingWriteCheckboxOff extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("checkbox").checked(), true, false))}}
-class CompBindingVarChangeCheckboxOff extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("checkbox").checked(), true, false))}}
-class CompBindingInputChangeCheckboxOff extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("checkbox").checked(), true, false))}}
-class CompBindingWriteRadioOn extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("radio").name("radiotest1"), false, true))}}
-class CompBindingVarChangeRadioOn extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("radio").name("radiotest2"), false, true))}}
-class CompBindingInputChangeRadioOn extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("radio").name("radiotest3"), false, true))}}
-class CompBindingWriteRadioOff extends Component{builder(){return dot.div(new CompBindingWrite(dot.input().type("radio").name("radiotest4"), true, false))}}
-class CompBindingVarChangeRadioOff extends Component{builder(){return dot.div(new CompBindingVarChange(dot.input().type("radio").name("radiotest5"), true, false))}}
-class CompBindingInputChangeRadioOff extends Component{builder(){return dot.div(new CompBindingInputChange(dot.input().type("radio").name("radiotest6"), true, false))}}
-class CompBindingWriteSelect extends Component{builder(){return dot.div(new CompBindingWrite(new CompSelect(), "a", "b"))}}
-class CompBindingVarChangeSelect extends Component{builder(){return dot.div(new CompBindingVarChange(new CompSelect(), "a", "b"))}}
-class CompBindingInputChangeSelect extends Component{builder(){return dot.div(new CompBindingInputChange(new CompSelect(), "a", "b"))}}
-
-class CompBindingWrite extends Component{
-    props:{v1:any, v2: any} = {v1: null, v2: null}
-    builder(input, v1, v2){
-        this.props.v1 = v1;
-        this.props.v2 = v2;
-        return dot.h(input).as(dot.input).bindTo(this.props.v2);
-        // if(input instanceof Component){
-        // }
-        // else
-        //     return dot.h(input).as(dot.input).bindTo(this.props.v2);
-    }
-    ready(){
-        var v = dot(this.$el).as(dot.input).getVal();
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.v2)
-        .div("Input: " + v);
-    }
-}
-class CompBindingVarChange extends Component{
-    props:{v1:any, v2: any} = {v1: null, v2: null}
-    builder(input, v1, v2){
-        this.props.v1 = v1;
-        this.props.v2 = v2;
-        return dot.h(input).as(dot.input).bindTo(this.props.v1);
-    }
-    ready(){
-        this.props.v1 = this.props.v2;
-        var v = dot(this.$el).as(dot.input).getVal();
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.v1)
-        .div("Input: " + v);
-    }
-}
-
-class CompBindingInputChange extends Component{
-    props:{v1:any, v2: any} = {v1: null, v2: null}
-    builder(input, v1, v2){
-        this.props.v1 = v1;
-        this.props.v2 = v2;
-        //this.myValue = dot.binding(v1);
-        return dot.h(input).as(dot.input).bindTo(this.props.v1);
-    }
-    ready(){
-        dot(this.$el).as(dot.input).setVal(this.props.v2);
-        var v = dot(this.$el).as(dot.input).getVal();
-        this.$el.dispatchEvent(new Event("change"));
-        //this.v1 = v;
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.v1)
-        .div("Input: " + v);
-    }
-}
-
-
-// class CompBindingWriteoption extends Component{ builder(){return dot.CompBindingwrite(dot.input(),  false, true)}});
-// class CompBindingVarchangeOption extends Component{ builder(){return dot.CompBindingVarchange(dot.input(),  false, true)}});
-// class CompBindingInputChangeOption extends Component{ builder(){return dot.CompBindingInputChange(dot.input(),  false, true)}});
-class CompBindingWriteOption extends Component{
-    props:{myValue:boolean} = {myValue: false}
-    builder(){
-        this.props.myValue = true;
-        return dot.select(
-            dot.option("a").value("a").selected()
-            .option("b").value("b").bindTo(this.props.myValue)
-            .option("c").value("c"))
-    }
-    ready(){
-        var v = dot(this.$el).as(dot.select).getVal();
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.myValue).div("Input: " + v)
-    }
-}
-class CompBindingVarChangeOption extends Component{
-    props:{myValue:boolean} = {myValue: false}
-    builder(){
-        this.props.myValue = false;
-        return dot.select(
-            dot.option("a").value("a").selected()
-            .option("b").value("b").bindTo(this.props.myValue)
-            .option("c").value("c"))
-    }
-    ready(){
-        this.props.myValue = true;
-        var v = dot(this.$el).as(dot.select).getVal();
-        dot(this.$el.parentNode as ParentNode).empty()
-        .div("Var: " + this.props.myValue)
-        .div("Input: " + v)
-    }
-}
-
-class CompSelect extends Component{ builder(){return dot.select(dot.option("a").value("a").option("b").value("b").option("c").value("c"));}}
-
-
-
-addTest("Var bound to input.", function(){return dot.h(new CompBindingWriteInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var change updating input.", function(){return dot.h(new CompBindingVarChangeInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Input change updating var.", function(){return dot.h(new CompBindingInputChangeInput())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var bound to textarea.", function(){return dot.h(new CompBindingWriteTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var change updating textarea.", function(){return dot.h(new CompBindingVarChangeTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Textarea change updating var.", function(){return dot.h(new CompBindingInputChangeTextArea())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var bound to checkbox on.", function(){return dot.h(new CompBindingWriteCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Var change updating checkbox on.", function(){return dot.h(new CompBindingVarChangeCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Checkbox change updating var on.", function(){return dot.h(new CompBindingInputChangeCheckboxOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Var bound to checkbox off.", function(){return dot.h(new CompBindingWriteCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Var change updating checkbox off.", function(){return dot.h(new CompBindingVarChangeCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Checkbox change updating var.", function(){return dot.h(new CompBindingInputChangeCheckboxOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Var bound to radio on.", function(){return dot.h(new CompBindingWriteRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Var change updating radio on.", function(){return dot.h(new CompBindingVarChangeRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Radio change updating var on.", function(){return dot.h(new CompBindingInputChangeRadioOn())}, "<div><div>Var: true</div><div>Input: true</div></div>");
-addTest("Var bound to radio off.", function(){return dot.h(new CompBindingWriteRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Var change updating radio off.", function(){return dot.h(new CompBindingVarChangeRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Radio change updating var off.", function(){return dot.h(new CompBindingInputChangeRadioOff())}, "<div><div>Var: false</div><div>Input: false</div></div>");
-addTest("Var bound to select.", function(){return dot.h(new CompBindingWriteSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var change updating select.", function(){return dot.h(new CompBindingVarChangeSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Select change updating var.", function(){return dot.h(new CompBindingInputChangeSelect())}, "<div><div>Var: b</div><div>Input: b</div></div>");
-addTest("Var bound to option.", function(){return dot.h(new CompBindingWriteOption())}, "<div>Var: true</div><div>Input: b</div>");
-addTest("Var change updating option.", function(){return dot.h(new CompBindingVarChangeOption())}, "<div>Var: true</div><div>Input: b</div>");
-addTest("Option change updating var.", function(){return dot.h(new CompBindingInputChangeOption())}, "<div>Var: true</div><div>Input: b</div>");
-  // expected output: Object { foo: "bar", baz: 42 }

package/unittests/integration.test.ts

@@ -1,5 +0,0 @@
-import dot from "../lib/dothtml.js";
-
-test("Integration test.", ()=>{
-    dot.div();
-});

package/unittests/iterations.test.ts

@@ -1,18 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-
-addTest("Iterate.", function(){ return dot.iterate(3, function(i){return dot.h(i)}); }, "012");
-addTest("Iterate w/ friends.", function(){ return dot.h("s").iterate(3, function(i){return dot.h(i)}).h("f"); }, "s012f");
-addTest("Iterate no return.", function(){ return dot.h("s").iterate(3, function(i){dot.h(i); return dot.t("")}).h("f"); }, "sf");
-// addTest("Iterate raw dot.", function(){ return dot.h("s").iterate(3, dot.h("-")).h("f"); }, "s---f");
-// addTest("Iterate raw dot HTML.", function(){ return dot.h("s").iterate(3, dot.div()).h("f"); }, "s<div></div><div></div><div></div>f");
-// addTest("Iterate text.", function(){ return dot.h("s").iterate(3, "-").h("f"); }, "s---f");
-addTest("Nested iterate.", function(){
-	return dot.h("s")
-	.iterate(2, function(i){
-		return dot.iterate(2, function(j){return j})
-	}).h("f");
-}, "s0101f");
-addTest("Each.", function(){ return dot.each(["A", "B", "C"], function(x, i){return i + x}); }, "0A1B2C");
-addTest("Nested each.", function(){ return dot.each(["A", "B", "C"], function(x, i){return dot.h(i + x).each(["D", "E", "F"], function(y, j){return j + y})}); }, "0A0D1E2F1B0D1E2F2C0D1E2F");
-addTest("Hash each.", function(){ return dot.each({a: "x", b: "y", c: "z"}, function(x, i){return i + x}); }, "axbycz");

package/unittests/logic.test.ts

@@ -1,18 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-
-addTest("If true else.", function(){ return dot.when(true, ()=>"if").otherwise(()=>"else"); }, "if");
-addTest("If false else.", function(){ return dot.when(false, ()=>"if").otherwise(()=>"else"); }, "else");
-addTest("If false else else.", function(){ return dot.when(false, ()=>"if").otherwise(()=>"else1").otherwise(()=>"else2"); }, "else1else2");
-addTest("If true elseif true else.", function(){ return dot.when(true, ()=>"if").otherwiseWhen(true, ()=>"elseif").otherwise(()=>"else"); }, "if");
-addTest("If true elseif false else.", function(){ return dot.when(true, ()=>"if").otherwiseWhen(false, ()=>"elseif").otherwise(()=>"else"); }, "if");
-addTest("If false elseif true else.", function(){ return dot.when(false, ()=>"if").otherwiseWhen(true, ()=>"elseif").otherwise(()=>"else"); }, "elseif");
-addTest("If false elseif false else.", function(){ return dot.when(false, ()=>"if").otherwiseWhen(false, ()=>"elseif").otherwise(()=>"else"); }, "else");
-addTest("Nested ifs.", function(){
-return dot.when(true,
-		dot.when(false, ()=>"if if")
-		.otherwiseWhen(true, ()=>"if elseif")
-		.otherwise(()=>"if else")
-	).otherwiseWhen(true, ()=>"elseif")
-	.otherwise(()=>"else");
-}, "if elseif");

package/unittests/non-function-props-rerender.test.ts

@@ -1,86 +0,0 @@
-
-/**
- * 2022-07-28
- * The goal of these tests is to verify that the builder and style functions are called once when properties are updated.
- * The previous behavior was that specific elements within components would only be re-rendered if a property was used inside of a function.
- * This resulted in some annoying syntax, such as `dot.div(()=>{return this.props.x})`. And then restyling wouldn't happen at all unless expliticly executed.
-*/
-
-import dot, { DotComponent, IDotCss, IDotElement } from "../src/dothtml";
-import addTest from "./core";
-
-class TestComponentA extends DotComponent{
-	props={
-		myValue: "not-set",
-		rebuild: "no",
-		restyle: "no",
-	}
-
-	builds: number = 0;
-	styled: number = 0;
-
-	builder(): IDotElement {
-		this.builds++;
-
-		this.props.rebuild;
-
-		return dot.div(
-			dot.div(this.props.myValue).div(this.props.myValue).div(()=>{ return this.props.myValue })
-		);
-	}
-	
-	style(css: IDotCss){
-		console.log("RESTYLING!!");
-		this.styled++;
-
-		this.props.restyle;
-		this.props.myValue;
-	}
-}
-
-// addTest("Basic build and style.", function(){ 
-// 	let component = new TestComponentA();
-// 	dot(document.body).h(component);
-
-// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
-// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 1 1");
-
-// addTest("Update rebuild prop.", function(){ 
-// 	let component = new TestComponentA();
-// 	dot(document.body).h(component);
-
-// 	component.props.rebuild = "yes 1";
-// 	component.props.rebuild = "yes 2";
-
-// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
-// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 3 1");
-
-// addTest("Update restyle prop.", function(){ 
-// 	let component = new TestComponentA();
-// 	dot(document.body).h(component);
-
-// 	component.props.restyle = "yes 1";
-// 	component.props.restyle = "yes 2";
-
-// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
-// }, "<div><div>not-set</div><div>not-set</div><div>not-set</div></div> 1 3");
-
-addTest("Update value.", function(){ 
-	let component = new TestComponentA();
-	dot(document.body).h(component);
-
-	component.props.myValue = "set";
-
-	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
-}, "<div><div>set</div><div>set</div><div>set</div></div> 2 2");
-
-// addTest("Update value and other props.", function(){ 
-// 	let component = new TestComponentA();
-// 	dot(document.body).h(component);
-
-// 	component.props.rebuild = "yes";
-// 	component.props.restyle = "yes";
-// 	component.props.myValue = "set";
-
-// 	return dot.h(`${component.$el.outerHTML} ${component.builds} ${component.styled}`);
-// }, "<div><div>set</div><div>set</div><div>set</div></div> 3 3");

package/unittests/refs.test.ts

@@ -1,36 +0,0 @@
-import addTest from "./core";
-import dot, { IDotElement } from "../src/dothtml";
-
-class RefComponent1 extends dot.Component{
-	builder(): IDotElement {
-		return dot.div(
-			dot
-				.span().ref("a")
-				.span().ref("b")
-				.span().ref("c")
-		)
-	}
-	ready(){
-		dot(this.$refs.a).t("a");
-		dot(this.$refs.b).t("b");
-		dot(this.$refs.c).t("c");
-	}
-}
-class RefComponent2 extends dot.Component{
-	builder(content): IDotElement {
-		return dot.div(
-			dot.span().ref("a")
-			.h(content)
-		)
-	}
-	ready(){
-		dot(this.$refs.a).t("1");
-	}
-}
-
-addTest("Ref.", ()=>{
-	return dot.h(new RefComponent1())
-}, "<div><span>a</span><span>b</span><span>c</span></div>");
-addTest("Nested ref.", ()=>{
-	return dot.h(new RefComponent2(new RefComponent1()))
-}, "<div><span>1</span><div><span>a</span><span>b</span><span>c</span></div></div>");

package/unittests/routing.-.ts

@@ -1,56 +0,0 @@
-// import addTest from "./core";
-// import dot from "../src/dothtml";
-// import Component from "../src/component";
-
-// class defaultpage extends Component{builder(){return dot.h1("Default")}}
-// class page1 extends Component{builder(){return dot.h1("Page 1.")}}
-// class page2 extends Component{builder(){return dot.h1("Page 2.")}}
-// class page3 extends Component{builder(){return dot.h1("Page 3.").router()}}
-// class page4 extends Component{builder(){return dot.h1("Good.")}}
-// class page5 extends Component{builder(){return dot.h1("Bad.")}}
-// class page6_7 extends Component{builder(){return dot.h1("Page 6/7.")}}
-// class page6 extends Component{builder(){return dot.h1("Page 6.")}}
-// class page7 extends Component{builder(){return dot.h1("Page 7.")}}
-// class awesomepage extends Component{builder(){return dot.h1(params.params.title).p(params.params.body)}}
-// class notfound extends Component{builder(){return dot.h1("Not Found.")}}
-
-// var routes = [
-//     {title: "DOT Tests", path: "/", component: dot.defaultpage},
-//     {title: "Page 1", path: "1", component: dot.page1},
-//     {title: "Page 2", path: "2", component: dot.page2},
-//     {title: "Page 3", path: "3", component: dot.page3},
-//     {title: "Greedy Page 4", path: "greed", component: dot.page4},
-//     {title: "Greedy Page 5", path: "greed", component: dot.page5},
-//     {title: "Page 6/7", path: "6/7", component: dot.page6_7},
-//     {title: "Awesome", path: "awesome/{title}/{body}", component: dot.awesomepage},
-//     {title: "Ajax", path: "ajax", component: "testpage.js"},
-//     {title: "Not Found", path: "*", component: dot.notfound},
-// ];
-// // addTest("Navigate with no router.", function(){return dot.div("abc").navigate("1")}, "<div>abc</div>");
-// // addTest("Chainability of navigate.", function(){return dot.div("abc").navigate("1").div("def")}, "<div>abc</div><div>def</div>");
-// // addTest("Default content.", function(){return dot.router(routes, true)}, "<dothtml-router></dothtml-router>");
-// // addTest("Default content, undefined navigate.", function(){return dot.router(routes, true).navigate()}, "<dothtml-router><h1>Default</h1></dothtml-router>");
-// // addTest("Default content, / navigate.", function(){return dot.router(routes, true).navigate("/")}, "<dothtml-router><h1>Default</h1></dothtml-router>");
-// // addTest("Unknown route.", function(){return dot.router(routes, true).navigate("unknown")}, "<dothtml-router><h1>Not Found.</h1></dothtml-router>");
-// // addTest("Navigate to 1.", function(){return dot.router(routes, true).navigate("1")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
-// // addTest("Navigate to 1/.", function(){return dot.router(routes, true).navigate("1/")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
-// // addTest("Navigate to 1 then 2.", function(){return dot.router(routes, true).navigate("1").navigate("2")}, "<dothtml-router><h1>Page 2.</h1></dothtml-router>");
-// // addTest("Navigate to the same page.", function(){return dot.router(routes, true).navigate("1").navigate("1")}, "<dothtml-router><h1>Page 1.</h1></dothtml-router>");
-// // addTest("Navigate from 1 to undefined.", function(){return dot.router(routes, true).navigate("1").navigate()}, "<dothtml-router><h1>Default</h1></dothtml-router>");
-// // addTest("Navigate from 1 to /.", function(){return dot.router(routes, true).navigate("1").navigate("/")}, "<dothtml-router><h1>Default</h1></dothtml-router>");
-// // addTest("Navigate to 6/7.", function(){return dot.router(routes, true).navigate("6/7")}, "<dothtml-router><h1>Page 6/7.</h1></dothtml-router>");
-// // addTest("Navigate to 6/8.", function(){return dot.router(routes, true).navigate("6/8")}, "<dothtml-router><h1>Not Found.</h1></dothtml-router>");
-// // addTest("Params.", function(){return dot.router(routes, true).navigate("awesome/Hello/Hello_World")}, "<dothtml-router><h1>Hello</h1><p>Hello_World</p></dothtml-router>");
-// // addTest("Greedy route.", function(){return dot.router(routes, true).navigate("greed")}, "<dothtml-router><h1>Good.</h1></dothtml-router>");
-// // addTest("Load page file.", function(){return dot.router(routes, true).navigate("ajax")}, "<dothtml-router><h1>Loaded Page</h1><p>This page was loaded from a file!</p></dothtml-router>");
-// // NESTED ROUTING (NOT SUPPORTED YET)
-// // addTest("Route not found child.", function(){return dot.router(routes, true).navigate("3/notfound")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router>Route \"notfound\" not found.</dothtml-router></dothtml-router>");
-// // addTest("Router in router / default.", function(){return dot.router(routes, true).navigate("3")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Default</h1></dothtml-router></dothtml-router>");
-// // addTest("Router in router / page 3/1.", function(){return dot.router(routes, true).navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
-// // addTest("Router in router / page 3/2 => 3/1.", function(){return dot.router(routes, true).navigate("3/2").navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
-// // addTest("Router in router / page 3/2 => 2.", function(){return dot.router(routes, true).navigate("3/1").navigate("2")}, "<dothtml-router><h1>Page 2.</h1></dothtml-router>");
-// // addTest("Router in router / page 2 => 3/1.", function(){return dot.router(routes, true).navigate("2").navigate("3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router>");
-// // addTest("Router in router / page 3/3/1.", function(){return dot.router(routes, true).navigate("3/3/1")}, "<dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 3.</h1><dothtml-router><h1>Page 1.</h1></dothtml-router></dothtml-router></dothtml-router>");
-// // CURRENTLY UNDEFINED:
-// //addTest("Two routers.", function(){return dot.router(routes, true).router(routes, true).navigate("1")}, "<dothtml-router></dothtml-router><dothtml-router><h1>Page 1.</h1></dothtml-router>");
-// // - Add test case for ensuring routers are removed from the allRouters object after calling empty().

package/unittests/scopes.test.ts

@@ -1,22 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-
-dot.resetScopeClass();
-
-//addTest("Get Last Node.", function(){ return dot.h(dot.div("text").__lastNode.innerHTML)}, "text"); // No longer supported.
-//addTest("Get Last Node - h.", function(){ return dot.h(dot.h("<div>text</div>").__lastNode.innerHTML)}, "text"); // No longer supported.
-addTest("Named scope.", function(){ return dot.div().class("before").scopeClass("MYSCOPE1", dot.div().class("test")).div().class("after"); }, "<div class=\"before\"></div><div class=\"dot-MYSCOPE1-test\"></div><div class=\"after\"></div>");
-addTest("No rollover scope.", function(){ return dot.div().class("test"); }, "<div class=\"test\"></div>");
-addTest("Named scope multiple elements.", function(){ return dot.div().scopeClass("MYSCOPE2", dot.div().class("test").div().div().class("test")); }, "<div></div><div class=\"dot-MYSCOPE2-test\"></div><div></div><div class=\"dot-MYSCOPE2-test\"></div>");
-//addTest("Unscope.", function(){ return dot.div().scopeClass("MYSCOPE2").div().class("test").div().div().class("test").unscopeClass().div().class("test"); }, "<div></div><div class=\"dot-MYSCOPE2-test\"></div><div></div><div class=\"dot-MYSCOPE2-test\"></div><div class=\"test\"></div>");
-//addTest("Extra unscope.", function(){ return dot.div().scopeClass("MYSCOPE2").div().class("test").div().div().class("test").unscopeClass().unscopeClass().div().class("test"); }, "<div></div><div class=\"dot-MYSCOPE2-test\"></div><div></div><div class=\"dot-MYSCOPE2-test\"></div><div class=\"test\"></div>");
-addTest("Nested element.", function(){ return dot.div().scopeClass("MYSCOPE", dot.div(dot.div().class("test-inner")).class("test-outer")); }, "<div></div><div class=\"dot-MYSCOPE-test-outer\"><div class=\"dot-MYSCOPE-test-inner\"></div></div>");
-addTest("Nested element new document.", function(){ return dot.scopeClass("MYSCOPE", dot.div(dot.div().class("test-inner")).class("test-outer")); }, "<div class=\"dot-MYSCOPE-test-outer\"><div class=\"dot-MYSCOPE-test-inner\"></div></div>");
-// I really don't care about this behavior. We can leave it as undefined, or accept the current behavior.
-//addTest("Scoped h.", function(){ return dot.scopeClass("MYSCOPE2", dot.h(dot.div().class("test"))); }, "<div class=\"dot-MYSCOPE2-test\"></div>");
-addTest("Nested scope.", function(){ return dot.scopeClass("MYSCOPE3", dot.div(dot.div().class("test-inner-before").scopeClass("MYSCOPE4", dot.div().class("test-inner"))).class("test-outer")); }, "<div class=\"dot-MYSCOPE3-test-outer\"><div class=\"dot-MYSCOPE3-test-inner-before\"></div><div class=\"dot-MYSCOPE4-test-inner\"></div></div>");
-addTest("Autoscope 1.", function(){ return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");
-addTest("Autoscope 2.", function(){ return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10001-test\"></div>");
-addTest("Autoscope 2 with nest.", function(){ return dot.scopeClass(null, dot.div(dot.div().class("test2")).class("test")); }, "<div class=\"dot-10002-test\"><div class=\"dot-10002-test2\"></div></div>");
-
-addTest("Reset scope.", function(){ dot.resetScopeClass(); return dot.scopeClass(null, dot.div().class("test")); }, "<div class=\"dot-10000-test\"></div>");

package/unittests/special-tags.test.ts

@@ -1,39 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-
-addTest("citeE.", function(){ return dot.cite(); }, "<cite></cite>");
-addTest("dataE.", function(){ return dot.data(); }, "<data></data>"); //Element not supported by most browsers.
-addTest("formE.", function(){ return dot.form(); }, "<form></form>");
-addTest("labelE.", function(){ return dot.label(); }, "<label></label>");
-addTest("spanE.", function(){ return dot.span(); }, "<span></span>");
-addTest("summaryE.", function(){ return dot.summary(); }, "<summary></summary>");
-
-addTest("citeA.", function(){ return dot.del().quoteCite(1); }, "<del cite=\"1\"></del>");
-addTest("dataA.", function(){ return dot.object().objectData(1); }, "<object data=\"1\"></object>");
-addTest("formA.", function(){ return dot.input().whichForm(1); }, "<input form=\"1\">");
-addTest("labelA.", function(){ return dot.track().trackLabel(1); }, ["<track label=\"1\">", "<track label=\"1\"></track>"]);
-addTest("spanA.", function(){ return dot.col().colSpan(1); }, "<col span=\"1\">");
-addTest("summaryA.", function(){ return dot.table().tableSummary(1); }, "<table summary=\"1\"></table>");
-addTest("optionLabelA.", function(){ return dot.option().optionLabel(1); }, "<option label=\"1\"></option>");
-addTest("acceptCharsetA.", function(){ return dot.form().acceptCharset("utf-8"); }, "<form accept-charset=\"utf-8\"></form>");
-
-// These aren't required anymore because all the overlapping names have been resolved.
-// addTest("Smart cite - attribute.", function(){ return dot.del().cite(1); }, "<del cite=\"1\"></del>");
-// addTest("Smart form - attribute.", function(){ return dot.input().form(1); }, "<input form=\"1\">");
-// addTest("Smart label - attribute.", function(){ return dot.track().label(1); }, ["<track label=\"1\">", "<track label=\"1\"></track>"]);
-// addTest("Smart span - attribute.", function(){ return dot.col().span(1); }, "<col span=\"1\">");
-// addTest("Smart summary - attribute.", function(){ return dot.table().summary(1); }, "<table summary=\"1\"></table>");
-// addTest("Smart cite - element.", function(){ return dot.div().cite(); }, "<div></div><cite></cite>");
-// addTest("Smart form - element.", function(){ return dot.div().form(); }, "<div></div><form></form>");
-// addTest("Smart label - element.", function(){ return dot.div().label(); }, "<div></div><label></label>");
-// addTest("Smart span - element.", function(){ return dot.div().span(); }, "<div></div><span></span>");
-// addTest("Smart summary - element.", function(){ return dot.div().summary(); }, "<div></div><summary></summary>");
-// addTest("Smart cite - append to blank.", function(){ return dot.citeE(); }, "<cite></cite>");
-// addTest("Smart form - append to blank.", function(){ return dot.formE(); }, "<form></form>");
-// addTest("Smart label - append to blank.", function(){ return dot.labelE(); }, "<label></label>");
-// addTest("Smart span - append to blank.", function(){ return dot.spanE(); }, "<span></span>");
-// addTest("Smart summary - append to blank.", function(){ return dot.summaryE(); }, "<summary></summary>");
-// addTest("Smart data - basic attribute.", function(){ return dot.object().data(1); }, "<object data=\"1\"></object>");
-
-addTest("Smart data - custom attribute.", function(){ return dot.div().customData("a", 1); }, "<div data-a=\"1\"></div>");
-addTest("Span after an image.", function(){ return dot.span("1").img().src("").span("2"); }, "<span>1</span><img src=\"\"><span>2</span>");

package/unittests/styles.test.ts

@@ -1,9 +0,0 @@
-import addTest from "./core";
-import dot from "../src/dothtml";
-
-addTest("Styles as a string.", function(){ return dot.t(dot.css.width(400).height(300)); }, "width:400px;height:300px;");
-addTest("String styles a div.", function(){ return dot.div().style(dot.css.width(400).height(300)); }, "<div style=\"width:400px;height:300px;\"></div>");
-
-// addTest("Builder styles a div.", function(){ return dot.div().style(css => {
-// 	css.width(400).height(300);
-// }); }, "<div style=\"width:400px;height:300px;\"></div>");

package/unittests/styling/animations.test.ts

@@ -1,14 +0,0 @@
-
-import addTest from "../core";
-import dot from "../../src/dothtml";
-
-// For testing the passing of data into and out of components via properties and events, respectively.
-
-addTest("Dotcss returns stringable value.", function(){
-	return dot.div(dot.css.color(0x102030).border("1px solid black").toString());
-}, "<div>color:\"rgb(16, 32, 48);\"border:\" 1px solid black \";</div>");
-
-addTest("Styling an element.", function(){
-	return dot.div().style(dot.css.color(0x102030).border("1px solid black").toString());
-}, "<div style=\"color:'rgb(16, 32, 48);'border:' 1px solid black ';\"></div>");
-

package/unittests/styling/filters.test.ts

@@ -1,23 +0,0 @@
-
-import addTest from "../core";
-import dot from "../../src/dothtml";
-
-// TODO: Need much more test coverage. Do later.
-
-addTest("Blur filter.", function(){
-	return dot.div().style(
-		dot.css.filter(f=>f.blur(2))
-	);
-}, `<div style="filter:blur(2px);"></div>`);
-
-addTest("Multi filter param.", function(){
-	return dot.div().style(
-		dot.css.filter(f=>f.dropShadow(4,4,10,"blue"))
-	);
-}, `<div style="filter:drop-shadow(4px 4px 10px rgb(0, 0, 255));"></div>`);
-
-addTest("Multi filter.", function(){
-	return dot.div().style(
-		dot.css.filter(f=>f.blur(2).opacity(20))
-	);
-}, `<div style="filter:blur(2px) opacity(20%);"></div>`);

package/unittests/styling/inline-styling.test.ts

@@ -1,18 +0,0 @@
-import addTest from "../core";
-import dot from "../../src/dothtml";
-
-addTest("Dotcss returns stringable value.", function(){
-	return dot.div(dot.css.color(0x102030).border("1px solid black").toString());
-}, `<div>color:"rgb(16, 32, 48);"border:" 1px solid black ";</div>`);
-
-addTest("Styling an element.", function(){
-	return dot.div().style(dot.css.color(0x102030).border("1px solid black"));
-}, `<div style="color:'rgb(16, 32, 48);'border:' 1px solid black ';"></div>`);
-
-addTest("Restyling an element.", function(){
-	let div = dot.div().style(dot.css.position("absolute").position("fixed"));
-	// dot.css(div.getLast()).position("absolute");
-	// dot.css(div.getLast()).position("fixed");
-	return div;
-}, `<div style="position: 'fixed';"></div>`);
-

package/unittests/styling/pseudo-selectors.test.ts

@@ -1,33 +0,0 @@
-
-import addTest from "../core";
-import dot from "../../src/dothtml";
-
-describe("Pseudo Selectors", () => {
-    test.todo("pass");
-});
-
-// Possible syntaxes:
-// 1. Multiple style functions.
-// 	- dot(target).style(dot.css...)
-// 	- dot(target).styleHover(dot.css...)
-// 	P: Simple syntax.
-// 	C: How would this work in a component's style builder? Multiple style builders seems messed up.
-// 2. Pseudo functions.
-// 	- dot(target).style(dot.css...pseudoHover(css=>css...).pseudoVisited(css=>css...)...)
-//  P: Works for component style functions.
-//  C: Builder syntax is somewhat heavy.
-// 3. DOThtml style.
-// 	- dot(target).style(dot.css...pseudoHover...pseudoVisted...pseudoNone...)
-//  P: No weird function syntax.
-//  P: Consistent with dothtml.
-//  C: Inconsistent with dotcss.
-//  C: Just weird.
-// 4. Pseudo functions v2.
-// 	- dot(target).style(dot.css...pseudo("hover", css=>css...).pseudo("visited", css=>css...)...)
-// 	P/C: same as 2.
-
-// I think 2 is the winner.
-
-// addTest("Dotcss returns stringable value.", function(){
-// 	return dot.a("Hover over me!").style(dot.css.pseudoHover(c=>c.color("green")));
-// }, `<a style="color:"rgb(0, 255, 0);">Hover over me!</a>`); // TODO: need a way to inject the hover event.