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
/**  * @jsxImportSource solid-js * @jest-environment jsdom */
import { createRoot, createSignal, Component, JSX } from "../../src";import { createStore } from "../../store/src";import { Dynamic } from "../src";
describe("Testing Dynamic control flow", () => {  let div: HTMLDivElement, disposer: () => void;
  interface ExampleProps {    id: string;  }  const [comp, setComp] = createSignal<Component<ExampleProps> | keyof JSX.IntrinsicElements>(),    [name, setName] = createSignal("Smith");  const Component = () => (      <div ref={div}>        <Dynamic component={comp()} id={name()} />      </div>    ),    CompA: Component<ExampleProps> = props => <div>Hi {props.id}</div>,    CompB: Component<ExampleProps> = props => <span>Yo {props.id}</span>;
  beforeEach(() => {    createRoot(dispose => {      disposer = dispose;      <Component />;    });  })
  afterEach(() => disposer());
  test("Toggle Dynamic control flow", () => {    expect(div.innerHTML).toBe("");    setComp(() => CompA);    expect(div.innerHTML).toBe("<div>Hi Smith</div>");    setName("Smithers");    expect(div.innerHTML).toBe("<div>Hi Smithers</div>");    setComp(() => CompB);    expect(div.innerHTML).toBe("<span>Yo Smithers</span>");    setComp("h1");    expect(div.innerHTML).toBe(`<h1 id="Smithers"></h1>`);    setName("Sunny")    expect(div.innerHTML).toBe(`<h1 id="Sunny"></h1>`);    expect(div.querySelector('h1')).toBeInstanceOf(HTMLElement);  });
  test("Renders SVG elements", () => {    setComp("svg")    expect(div.querySelector('svg')).toBeInstanceOf(SVGSVGElement);    setComp("path")    expect(div.querySelector('path')).toBeInstanceOf(SVGElement);  });});

describe("Testing Dynamic with state spread", () => {  let div: HTMLDivElement, disposer: () => void;
  interface ExampleProps {    id: string;  }  const [comp, setComp] = createSignal<Component<ExampleProps> | keyof JSX.IntrinsicElements>(),    [state, setState] = createStore({      id: "Smith"    });  const Component = () => (      <div ref={div}>        <Dynamic component={comp()} {...state}  />      </div>    ),    CompA: Component<ExampleProps> = props => <div>Hi {props.id}</div>,    CompB: Component<ExampleProps> = props => <span>Yo {props.id}</span>;
  beforeEach(() => {    createRoot(dispose => {      disposer = dispose;      <Component />;    });  })
  afterEach(() => disposer());
  test("Toggle Dynamic control flow", () => {    expect(div.innerHTML).toBe("");    setComp(() => CompA);    expect(div.innerHTML).toBe("<div>Hi Smith</div>");    setState("id", "Smithers");    expect(div.innerHTML).toBe("<div>Hi Smithers</div>");    setComp(() => CompB);    expect(div.innerHTML).toBe("<span>Yo Smithers</span>");    setComp("h1");    expect(div.innerHTML).toBe(`<h1 id="Smithers"></h1>`);    setState("id", "Sunny")    expect(div.innerHTML).toBe(`<h1 id="Sunny"></h1>`);    expect(div.querySelector('h1')).toBeInstanceOf(HTMLElement);  });});