Skip to content

Commit 2b9d487

Browse files
Tao-VanJSTao-VanJS
committed
Add test cases for removing (and not removing) the hydrated copmonents.
1 parent 175dcbd commit 2b9d487

File tree

3 files changed

+132
-3
lines changed

3 files changed

+132
-3
lines changed

‎test/van.test.js

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,15 @@ const runTests = async (van, msgDom, { debug }) => {
714714
await sleep(waitMsOnDomUpdates);
715715
assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>");
716716
}),
717+
stateDerivedChild_0ToNotRemoveDom: withHiddenDom(async (hiddenDom) => {
718+
const state1 = van.state(0), state2 = van.state(1);
719+
const dom = div(state1, () => 1 - state1.val, state2, () => 1 - state2.val);
720+
van.add(hiddenDom, dom);
721+
assertEq(dom.outerHTML, "<div>0110</div>");
722+
state1.val = 1, state2.val = 0;
723+
await sleep(waitMsOnDomUpdates);
724+
assertEq(dom.outerHTML, "<div>1001</div>");
725+
}),
717726
stateDerivedChild_dynamicPrimitive: withHiddenDom(async (hiddenDom) => {
718727
const a = van.state(1), b = van.state(2), deleted = van.state(false);
719728
const dom = div(() => deleted.val ? null : a.val + b.val);
@@ -772,7 +781,7 @@ const runTests = async (van, msgDom, { debug }) => {
772781
// but other DOM nodes are updated as usual
773782
assertEq(hiddenDom.innerHTML, "1<span>ok</span>1");
774783
}),
775-
hydrate: withHiddenDom(async (hiddenDom) => {
784+
hydrate_normal: withHiddenDom(async (hiddenDom) => {
776785
const Counter = (init) => {
777786
const counter = van.state(init);
778787
return button({ "data-counter": counter, onclick: () => ++counter.val }, () => `Count: ${counter.val}`);
@@ -789,6 +798,34 @@ const runTests = async (van, msgDom, { debug }) => {
789798
await sleep(waitMsOnDomUpdates);
790799
assertEq(hiddenDom.innerHTML, '<button data-counter="6">Count: 6</button>');
791800
}),
801+
hydrate_nullToRemoveDom: withHiddenDom(async (hiddenDom) => {
802+
// Remove the DOM node upon hydration
803+
van.add(hiddenDom, div());
804+
van.hydrate(hiddenDom.querySelector("div"), () => null);
805+
assertEq(hiddenDom.innerHTML, "");
806+
// Remove the DOM node after the state update
807+
van.add(hiddenDom, div());
808+
const s = van.state(1);
809+
van.hydrate(hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : null);
810+
assertEq(hiddenDom.innerHTML, "<pre></pre>");
811+
s.val = 2;
812+
await sleep(waitMsOnDomUpdates);
813+
assertEq(hiddenDom.innerHTML, "");
814+
}),
815+
hydrate_undefinedToRemoveDom: withHiddenDom(async (hiddenDom) => {
816+
// Remove the DOM node upon hydration
817+
van.add(hiddenDom, div());
818+
van.hydrate(hiddenDom.querySelector("div"), () => undefined);
819+
assertEq(hiddenDom.innerHTML, "");
820+
// Remove the DOM node after the state update
821+
van.add(hiddenDom, div());
822+
const s = van.state(1);
823+
van.hydrate(hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : undefined);
824+
assertEq(hiddenDom.innerHTML, "<pre></pre>");
825+
s.val = 2;
826+
await sleep(waitMsOnDomUpdates);
827+
assertEq(hiddenDom.innerHTML, "");
828+
}),
792829
};
793830
const debugTests = {
794831
escape_nonFuncArg: () => {

‎test/van.test.nomodule.js

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -666,6 +666,15 @@
666666
await sleep(waitMsOnDomUpdates);
667667
assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>");
668668
}),
669+
stateDerivedChild_0ToNotRemoveDom: withHiddenDom(async (hiddenDom) => {
670+
const state1 = van2.state(0), state2 = van2.state(1);
671+
const dom = div2(state1, () => 1 - state1.val, state2, () => 1 - state2.val);
672+
van2.add(hiddenDom, dom);
673+
assertEq(dom.outerHTML, "<div>0110</div>");
674+
state1.val = 1, state2.val = 0;
675+
await sleep(waitMsOnDomUpdates);
676+
assertEq(dom.outerHTML, "<div>1001</div>");
677+
}),
669678
stateDerivedChild_dynamicPrimitive: withHiddenDom(async (hiddenDom) => {
670679
const a2 = van2.state(1), b2 = van2.state(2), deleted = van2.state(false);
671680
const dom = div2(() => deleted.val ? null : a2.val + b2.val);
@@ -718,7 +727,7 @@
718727
await sleep(waitMsOnDomUpdates);
719728
assertEq(hiddenDom.innerHTML, "1<span>ok</span>1");
720729
}),
721-
hydrate: withHiddenDom(async (hiddenDom) => {
730+
hydrate_normal: withHiddenDom(async (hiddenDom) => {
722731
const Counter2 = (init) => {
723732
const counter = van2.state(init);
724733
return button({ "data-counter": counter, onclick: () => ++counter.val }, () => `Count: ${counter.val}`);
@@ -731,6 +740,30 @@
731740
hiddenDom.querySelector("button").click();
732741
await sleep(waitMsOnDomUpdates);
733742
assertEq(hiddenDom.innerHTML, '<button data-counter="6">Count: 6</button>');
743+
}),
744+
hydrate_nullToRemoveDom: withHiddenDom(async (hiddenDom) => {
745+
van2.add(hiddenDom, div2());
746+
van2.hydrate(hiddenDom.querySelector("div"), () => null);
747+
assertEq(hiddenDom.innerHTML, "");
748+
van2.add(hiddenDom, div2());
749+
const s = van2.state(1);
750+
van2.hydrate(hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : null);
751+
assertEq(hiddenDom.innerHTML, "<pre></pre>");
752+
s.val = 2;
753+
await sleep(waitMsOnDomUpdates);
754+
assertEq(hiddenDom.innerHTML, "");
755+
}),
756+
hydrate_undefinedToRemoveDom: withHiddenDom(async (hiddenDom) => {
757+
van2.add(hiddenDom, div2());
758+
van2.hydrate(hiddenDom.querySelector("div"), () => void 0);
759+
assertEq(hiddenDom.innerHTML, "");
760+
van2.add(hiddenDom, div2());
761+
const s = van2.state(1);
762+
van2.hydrate(hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : void 0);
763+
assertEq(hiddenDom.innerHTML, "<pre></pre>");
764+
s.val = 2;
765+
await sleep(waitMsOnDomUpdates);
766+
assertEq(hiddenDom.innerHTML, "");
734767
})
735768
};
736769
const debugTests = {

‎test/van.test.ts

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -911,6 +911,18 @@ const runTests = async (van: VanForTesting, msgDom: Element, {debug}: BundleOpti
911911
assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>")
912912
}),
913913

914+
stateDerivedChild_0ToNotRemoveDom: withHiddenDom(async hiddenDom => {
915+
const state1 = van.state(0), state2 = van.state(1)
916+
const dom = div(state1, () => 1 - state1.val, state2, () => 1 - state2.val)
917+
van.add(hiddenDom, dom)
918+
919+
assertEq(dom.outerHTML, "<div>0110</div>")
920+
921+
state1.val = 1, state2.val = 0
922+
await sleep(waitMsOnDomUpdates)
923+
assertEq(dom.outerHTML, "<div>1001</div>")
924+
}),
925+
914926
stateDerivedChild_dynamicPrimitive: withHiddenDom(async hiddenDom => {
915927
const a = van.state(1), b = van.state(2), deleted = van.state(false)
916928
const dom = div(() => deleted.val ? null : a.val + b.val)
@@ -994,7 +1006,7 @@ const runTests = async (van: VanForTesting, msgDom: Element, {debug}: BundleOpti
9941006
assertEq(hiddenDom.innerHTML, "1<span>ok</span>1")
9951007
}),
9961008

997-
hydrate: withHiddenDom(async hiddenDom => {
1009+
hydrate_normal: withHiddenDom(async hiddenDom => {
9981010
const Counter = (init: number) => {
9991011
const counter = van.state(init)
10001012
return button({"data-counter": counter, onclick: () => ++counter.val},
@@ -1017,6 +1029,53 @@ const runTests = async (van: VanForTesting, msgDom: Element, {debug}: BundleOpti
10171029
await sleep(waitMsOnDomUpdates)
10181030
assertEq(hiddenDom.innerHTML, '<button data-counter="6">Count: 6</button>')
10191031
}),
1032+
1033+
hydrate_nullToRemoveDom: withHiddenDom(async hiddenDom => {
1034+
// Remove the DOM node upon hydration
1035+
van.add(hiddenDom, div())
1036+
van.hydrate(hiddenDom.querySelector("div")!, () => null)
1037+
assertEq(hiddenDom.innerHTML, "")
1038+
1039+
// Remove the DOM node after the state update
1040+
van.add(hiddenDom, div())
1041+
const s = van.state(1)
1042+
van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : null)
1043+
assertEq(hiddenDom.innerHTML, "<pre></pre>")
1044+
s.val = 2
1045+
await sleep(waitMsOnDomUpdates)
1046+
assertEq(hiddenDom.innerHTML, "")
1047+
}),
1048+
1049+
hydrate_undefinedToRemoveDom: withHiddenDom(async hiddenDom => {
1050+
// Remove the DOM node upon hydration
1051+
van.add(hiddenDom, div())
1052+
van.hydrate(hiddenDom.querySelector("div")!, () => undefined)
1053+
assertEq(hiddenDom.innerHTML, "")
1054+
1055+
// Remove the DOM node after the state update
1056+
van.add(hiddenDom, div())
1057+
const s = van.state(1)
1058+
van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : undefined)
1059+
assertEq(hiddenDom.innerHTML, "<pre></pre>")
1060+
s.val = 2
1061+
await sleep(waitMsOnDomUpdates)
1062+
assertEq(hiddenDom.innerHTML, "")
1063+
}),
1064+
1065+
hydrate_0NotToRemoveDom: withHiddenDom(async hiddenDom => {
1066+
van.add(hiddenDom, div(), div())
1067+
1068+
const s = van.state(0)
1069+
const [dom1, dom2] = hiddenDom.querySelectorAll("div")
1070+
1071+
van.hydrate(dom1, <any>(() => s.val))
1072+
van.hydrate(dom2, <any>(() => 1 - s.val))
1073+
assertEq(hiddenDom.innerHTML, "01")
1074+
1075+
s.val = 1
1076+
await sleep(waitMsOnDomUpdates)
1077+
assertEq(hiddenDom.innerHTML, "10")
1078+
}),
10201079
}
10211080

10221081
const debugTests = {

0 commit comments

Comments
 (0)