deno.land / x / solid@v1.5.6 / web / test / for.spec.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443/** * @jsxImportSource solid-js * @jest-environment jsdom */
import { createRoot, createSignal } from "../../src";import { insert, For } from "../src";
describe("Testing an only child each control flow", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal([n1, n2, n3, n4]); const Component = () => ( <div ref={div}> <For each={list()}>{item => item}</For> </div> );
function apply(array: string[]) { setList(array); expect(div.innerHTML).toBe(array.join("")); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("abcd"); }
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("abcd"); });
test("1 missing", () => { apply([n2, n3, n4]); apply([n1, n3, n4]); apply([n1, n2, n4]); apply([n1, n2, n3]); });
test("2 missing", () => { apply([n3, n4]); apply([n2, n4]); apply([n2, n3]); apply([n1, n4]); apply([n1, n3]); apply([n1, n2]); });
test("3 missing", () => { apply([n1]); apply([n2]); apply([n3]); apply([n4]); });
test("all missing", () => { apply([]); });
test("swaps", () => { apply([n2, n1, n3, n4]); apply([n3, n2, n1, n4]); apply([n4, n2, n3, n1]); });
test("rotations", () => { apply([n2, n3, n4, n1]); apply([n3, n4, n1, n2]); apply([n4, n1, n2, n3]); });
test("reversal", () => { apply([n4, n3, n2, n1]); });
test("full replace", () => { apply(["e", "f", "g", "h"]); });
test("swap backward edge", () => { setList(["milk", "bread", "chips", "cookie", "honey"]); setList(["chips", "bread", "cookie", "milk", "honey"]); });
test("dispose", () => disposer());});
describe("Testing an multi child each control flow", () => { const div = document.createElement("div"); div.appendChild(document.createTextNode("z")); const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal([n1, n2, n3, n4]); const Component = () => <For each={list()}>{item => item}</For>; let disposer: () => void;
function apply(array: string[]) { setList(array); expect(div.innerHTML).toBe(`${array.join("")}z`); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("abcdz"); }
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; insert(div, <Component />, div.firstChild); });
expect(div.innerHTML).toBe("abcdz"); });
test("1 missing", () => { apply([n2, n3, n4]); apply([n1, n3, n4]); apply([n1, n2, n4]); apply([n1, n2, n3]); });
test("2 missing", () => { apply([n3, n4]); apply([n2, n4]); apply([n2, n3]); apply([n1, n4]); apply([n1, n3]); apply([n1, n2]); });
test("3 missing", () => { apply([n1]); apply([n2]); apply([n3]); apply([n4]); });
test("all missing", () => { apply([]); });
test("swaps", () => { apply([n2, n1, n3, n4]); apply([n3, n2, n1, n4]); apply([n4, n2, n3, n1]); });
test("rotations", () => { apply([n2, n3, n4, n1]); apply([n3, n4, n1, n2]); apply([n4, n1, n2, n3]); });
test("reversal", () => { apply([n4, n3, n2, n1]); });
test("full replace", () => { apply(["e", "f", "g", "h"]); });
test("swap backward edge", () => { setList(["milk", "bread", "chips", "cookie", "honey"]); setList(["chips", "bread", "cookie", "milk", "honey"]); });
test("dispose", () => disposer());});
describe("Testing an only child each control flow with fragment children", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal([n1, n2, n3, n4]); const Component = () => ( <div ref={div}> <For each={list()}> {item => ( <> {item} {item} </> )} </For> </div> );
function apply(array: string[]) { setList(array); expect(div.innerHTML).toBe(array.map(p => `${p}${p}`).join("")); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("aabbccdd"); }
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("aabbccdd"); });
test("1 missing", () => { apply([n2, n3, n4]); apply([n1, n3, n4]); apply([n1, n2, n4]); apply([n1, n2, n3]); });
test("2 missing", () => { apply([n3, n4]); apply([n2, n4]); apply([n2, n3]); apply([n1, n4]); apply([n1, n3]); apply([n1, n2]); });
test("3 missing", () => { apply([n1]); apply([n2]); apply([n3]); apply([n4]); });
test("all missing", () => { apply([]); });
test("swaps", () => { apply([n2, n1, n3, n4]); apply([n3, n2, n1, n4]); apply([n4, n2, n3, n1]); });
test("rotations", () => { apply([n2, n3, n4, n1]); apply([n3, n4, n1, n2]); apply([n4, n1, n2, n3]); });
test("reversal", () => { apply([n4, n3, n2, n1]); });
test("full replace", () => { apply(["e", "f", "g", "h"]); });
test("swap backward edge", () => { setList(["milk", "bread", "chips", "cookie", "honey"]); setList(["chips", "bread", "cookie", "milk", "honey"]); });
test("dispose", () => disposer());});
describe("Testing an only child each control flow with array children", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal([n1, n2, n3, n4]); const Component = () => ( <div ref={div}> <For each={list()}>{item => [item, item]}</For> </div> );
function apply(array: string[]) { setList(array); expect(div.innerHTML).toBe(array.map(p => `${p}${p}`).join("")); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("aabbccdd"); }
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("aabbccdd"); });
test("1 missing", () => { apply([n2, n3, n4]); apply([n1, n3, n4]); apply([n1, n2, n4]); apply([n1, n2, n3]); });
test("2 missing", () => { apply([n3, n4]); apply([n2, n4]); apply([n2, n3]); apply([n1, n4]); apply([n1, n3]); apply([n1, n2]); });
test("3 missing", () => { apply([n1]); apply([n2]); apply([n3]); apply([n4]); });
test("all missing", () => { apply([]); });
test("swaps", () => { apply([n2, n1, n3, n4]); apply([n3, n2, n1, n4]); apply([n4, n2, n3, n1]); });
test("rotations", () => { apply([n2, n3, n4, n1]); apply([n3, n4, n1, n2]); apply([n4, n1, n2, n3]); });
test("reversal", () => { apply([n4, n3, n2, n1]); });
test("full replace", () => { apply(["e", "f", "g", "h"]); });
test("swap backward edge", () => { setList(["milk", "bread", "chips", "cookie", "honey"]); setList(["chips", "bread", "cookie", "milk", "honey"]); });
test("dispose", () => disposer());});
describe("Testing each control flow with fallback", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal<string[]>([]); const Component = () => ( <div ref={div}> <For each={list()} fallback={"Empty"}> {item => item} </For> </div> );
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; }); expect(div.innerHTML).toBe("Empty"); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("abcd"); setList([]); expect(div.innerHTML).toBe("Empty"); });
test("dispose", () => disposer());});
describe("Testing each that maps to undefined", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal<string[]>([]); const Component = () => ( <div ref={div}> <For each={list()}>{item => undefined}</For> </div> );
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; }); expect(div.innerHTML).toBe(""); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe(""); setList([]); expect(div.innerHTML).toBe(""); });
test("dispose", () => disposer());});
describe("Testing each with indexes", () => { let div: HTMLDivElement, disposer: () => void; const n1 = "a", n2 = "b", n3 = "c", n4 = "d"; const [list, setList] = createSignal<string[]>([]); const Component = () => ( <div ref={div}> <For each={list()} fallback={"Hi"}>{(item, i) => <span>{item + i()}</span>}</For> </div> );
test("Create each control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; }); expect(div.innerHTML).toBe("Hi"); setList([n1, n2, n3, n4]); expect(div.innerHTML).toBe("<span>a0</span><span>b1</span><span>c2</span><span>d3</span>"); setList([n2, n3, n4, n1]); expect(div.innerHTML).toBe("<span>b0</span><span>c1</span><span>d2</span><span>a3</span>"); setList([n3, n4, n1]); expect(div.innerHTML).toBe("<span>c0</span><span>d1</span><span>a2</span>"); setList([n3, n2, n4, n1]); expect(div.innerHTML).toBe("<span>c0</span><span>b1</span><span>d2</span><span>a3</span>"); setList([]); expect(div.innerHTML).toBe("Hi"); setList([n1]); expect(div.innerHTML).toBe("<span>a0</span>"); });
test("dispose", () => disposer());});
Version Info