deno.land / x / solid@v1.5.6 / web / test / show.spec.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216/** * @jsxImportSource solid-js * @jest-environment jsdom */
import { createRoot, createSignal } from "../../src";import { Show } from "../src";
describe("Testing an only child show control flow", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <div ref={div}> <Show when={count() >= 5}>{count()}</Show> </div> );
test("Create show control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe(""); });
test("Toggle show control flow", () => { setCount(7); expect(div.innerHTML).toBe("7"); setCount(5); expect(div.innerHTML).toBe("5"); setCount(2); expect(div.innerHTML).toBe(""); });
test("dispose", () => disposer());});
describe("Testing an only child show control flow with DOM children", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <div ref={div}> <Show when={count() >= 5}> <span>{count()}</span> <span>counted</span> </Show> </div> );
test("Create show control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe(""); });
test("Toggle show control flow", () => { setCount(7); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7"); setCount(5); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5"); setCount(2); expect(div.innerHTML).toBe(""); });
test("dispose", () => disposer());});
describe("Testing nonkeyed show control flow", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); let executed = 0; const Component = () => ( <div ref={div}> <Show when={count()}> <span>{count()}</span> <span>{executed++}</span> </Show> </div> );
test("Create show control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe(""); expect(executed).toBe(0); });
test("Toggle show control flow", () => { setCount(7); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7"); expect(executed).toBe(1); setCount(5); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5"); expect(executed).toBe(1); setCount(0); expect(div.innerHTML).toBe(""); expect(executed).toBe(1); });
test("dispose", () => disposer());})
describe("Testing keyed show control flow", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); let executed = 0; const Component = () => ( <div ref={div}> <Show when={count()} keyed> <span>{count()}</span> <span>{executed++}</span> </Show> </div> );
test("Create show control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe(""); expect(executed).toBe(0); });
test("Toggle show control flow", () => { setCount(7); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7"); expect(executed).toBe(1); setCount(5); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5"); expect(executed).toBe(2); setCount(0); expect(div.innerHTML).toBe(""); expect(executed).toBe(2); });
test("dispose", () => disposer());})
describe("Testing an only child show control flow with keyed function", () => { let div: HTMLDivElement, disposer: () => void; const [data, setData] = createSignal<{ count: number }>(); const Component = () => ( <div ref={div}> <Show when={data()} keyed> {({count}) => ( <> <span>{count}</span> <span>counted</span> </> )} </Show> </div> );
test("Create show control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe(""); });
test("Toggle show control flow", () => { setData({count: 7}); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7"); setData({count: 5}); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5"); setData({count: 2}); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("2"); });
test("dispose", () => disposer());});
describe("Testing an only child show control flow with DOM children and fallback", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <div ref={div}> <Show when={count() >= 5} fallback={<span>Too Low</span>}> <span>{count}</span> </Show> </div> );
test("Create when control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("<span>Too Low</span>"); });
test("Toggle show control flow", () => { setCount(7); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7"); setCount(5); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5"); setCount(2); expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("Too Low"); });
test("dispose", () => disposer());});
Version Info