1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/** * @jsxImportSource solid-js * @jest-environment jsdom */
import { createRoot, createSignal, createUniqueId, JSX, children } from "../../src";
declare module "solid-js/jsx-runtime" {  namespace JSX {    interface Directives {      getRef: boolean;    }  }}
describe("Basic element attributes", () => {  test("spread", () => {    let div: HTMLDivElement;    const props: JSX.HTMLAttributes<HTMLDivElement> = {        id: "main",        title: "main",        children: <p>Hi</p>,        ref: (ref: HTMLDivElement) => {          div = ref;        },        onClick: () => console.log("clicked")      },      d = createRoot(() => <div {...props} />) as HTMLDivElement & { $$click: any };    expect(div!).toBe(d);    expect(d.id).toBe("main");    expect(d.title).toBe("main");    expect(d.$$click).toBeDefined();    expect(d.innerHTML).toBe("<p>Hi</p>");  });
  test("classList", () => {    const classes = { first: true, second: false, "third fourth": true },      d = (<div classList={classes} />) as HTMLDivElement;    expect(d.className).toBe("first third fourth");  });
  test("ternary expression triggered", done => {    let div: HTMLDivElement;    createRoot(() => {      const [s, setS] = createSignal(0);      div = (<div>{s() > 5 ? "Large" : "Small"}</div>) as HTMLDivElement;      expect(div.innerHTML).toBe("Small");      setTimeout(() => {        setS(7);        expect(div.innerHTML).toBe("Large");        done();      });    });  });
  test("boolean expression triggered once", () => {    let div1: HTMLDivElement, div2: HTMLDivElement;    createRoot(() => {      const [s, setS] = createSignal(6);      <div>{s() > 5 && (div1 = (<div />) as HTMLDivElement)}</div>;      div2 = div1;      setS(7);      expect(div1).toBe(div2);    });  });
  test("directives work properly", () => {    let ref: HTMLDivElement,      el!: HTMLDivElement,      getRef = (el: HTMLDivElement) => (ref = el),      d = (<div use:getRef ref={el} />) as HTMLDivElement;    expect(ref!).toBe(el);  });
  test("uniqueId", () => {    let div: HTMLDivElement;    createRoot(() => {      const id = createUniqueId();      div = (        <div>          <label for={id}>Hi</label>          <input type="text" id={id} />        </div>      ) as HTMLDivElement;    });    expect((div!.firstChild as HTMLLabelElement).htmlFor).toBe(      (div!.firstChild!.nextSibling as HTMLInputElement).id    );  });
  test("children", () => {    const Comp = (props: { children?: JSX.Element }) => {      const c = children(() => props.children);      return (        <>          {c.toArray().map(i => (            <div>{i}</div>          ))}        </>      );    };    const res: HTMLDivElement = createRoot(() => {      return (        <div>          <Comp>            <span>Hello</span>          </Comp>          <Comp>            <span>Hello</span>            <span>Jake</span>          </Comp>          <Comp />        </div> as HTMLDivElement      );    });    expect(res.innerHTML).toBe(      "<div><span>Hello</span></div><div><span>Hello</span></div><div><span>Jake</span></div>"    );  });});