deno.land / x / solid@v1.5.6 / web / test / switch.spec.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220/** * @jsxImportSource solid-js * @jest-environment jsdom */
import { render, Switch, Match, For } from "../src";import { createRoot, createSignal } from "../../src";import { createStore } from "../../store/src";
describe("Testing a single match switch control flow", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <div ref={div}> <Switch fallback={"fallback"}> <Match when={Boolean(count()) && count() < 2}>1</Match> </Switch> </div> );
test("Create Switch control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("fallback"); });
test("Toggle Switch control flow", () => { setCount(1); expect(div.innerHTML).toBe("1"); setCount(3); expect(div.innerHTML).toBe("fallback"); });
test("dispose", () => disposer());});
describe("Testing an only child Switch control flow", () => { let div: HTMLDivElement, disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <div ref={div}> <Switch fallback={"fallback"}> <Match when={Boolean(count()) && count() < 2}>1</Match> <Match when={Boolean(count()) && count() < 5}>2</Match> <Match when={Boolean(count()) && count() < 8}>3</Match> </Switch> </div> );
test("Create Switch control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("fallback"); });
test("Toggle Switch control flow", () => { setCount(1); expect(div.innerHTML).toBe("1"); setCount(4); expect(div.innerHTML).toBe("2"); setCount(7); expect(div.innerHTML).toBe("3"); setCount(9); expect(div.innerHTML).toBe("fallback"); });
test("doesn't re-render on same option", () => { setCount(4); expect(div.innerHTML).toBe("2"); const c = div.firstChild; setCount(4); expect(div.innerHTML).toBe("2"); expect(div.firstChild).toBe(c); });
test("dispose", () => disposer());});
describe("Testing keyed Switch control flow", () => { let div: HTMLDivElement, disposer: () => void; const [a, setA] = createSignal(0), [b, setB] = createSignal(0), [c, setC] = createSignal(0); const Component = () => ( <div ref={div}> <Switch fallback={"fallback"}> <Match when={a()} keyed>{a()}</Match> <Match when={b()} keyed>{b()}</Match> <Match when={c()} keyed>{c()}</Match> </Switch> </div> );
test("Create Switch control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("fallback"); });
test("Toggle Switch control flow", () => { setC(1); expect(div.innerHTML).toBe("1"); setB(2); expect(div.innerHTML).toBe("2"); setA(3); expect(div.innerHTML).toBe("3"); setA(0); expect(div.innerHTML).toBe("2"); });
test("dispose", () => disposer());});
describe("Testing function handler Switch control flow", () => { let div: HTMLDivElement, disposer: () => void; const [a, setA] = createSignal(0), [b, setB] = createSignal(0), [c, setC] = createSignal(0); const Component = () => ( <div ref={div}> <Switch fallback={"fallback"}> <Match when={a()} keyed>{a => a}</Match> <Match when={b()} keyed>{b => b}</Match> <Match when={c()} keyed>{c => c}</Match> </Switch> </div> );
test("Create Switch control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("fallback"); });
test("Toggle Switch control flow", () => { setC(1); expect(div.innerHTML).toBe("1"); setB(2); expect(div.innerHTML).toBe("2"); setA(3); expect(div.innerHTML).toBe("3"); setA(0); expect(div.innerHTML).toBe("2"); });
test("dispose", () => disposer());});
describe("Testing a For in a Switch control flow", () => { let div: HTMLDivElement, disposer: () => void; const [state, setState] = createStore({ users: [ { firstName: "Jerry", certified: false }, { firstName: "Janice", certified: false } ] }); const Component = () => ( <div ref={div}> <Switch fallback={"fallback"}> <For each={state.users}> {user => <Match when={user.certified}>{user.firstName}</Match>} </For> </Switch> </div> );
test("Create Switch control flow", () => { createRoot(dispose => { disposer = dispose; <Component />; });
expect(div.innerHTML).toBe("fallback"); });
test("Toggle Switch control flow", () => { setState("users", 1, "certified", true); expect(div.innerHTML).toBe("Janice"); setState("users", 0, "certified", true); expect(div.innerHTML).toBe("Jerry"); setState("users", u => [{ firstName: "Gordy", certified: true }, ...u]); expect(div.innerHTML).toBe("Gordy"); });
test("dispose", () => disposer());});
describe("Test top level switch control flow", () => { let div = document.createElement("div"), disposer: () => void; const [count, setCount] = createSignal(0); const Component = () => ( <Switch fallback={"fallback"}> <Match when={Boolean(count()) && count() < 2}>1</Match> </Switch> );
test("Create switch control flow", () => { disposer = render(Component, div);
expect(div.innerHTML).toBe("fallback"); setCount(1); expect(div.innerHTML).toBe("1"); });
test("dispose", () => disposer());});
Version Info