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
/**  * @jsxImportSource solid-js * @jest-environment jsdom */
import { createSignal } from "../../src";import { render, clearDelegatedEvents, Portal, Show } from "../src";
describe("Testing a simple Portal", () => {  let div = document.createElement("div"),    disposer: () => void;  const testMount = document.createElement("div");  const Component = () => <Portal mount={testMount}>Hi</Portal>;
  test("Create portal control flow", () => {    disposer = render(Component, div);    expect(div.innerHTML).toBe("");    expect((testMount.firstChild as HTMLDivElement).innerHTML).toBe("Hi");    expect((testMount.firstChild as HTMLDivElement & { host: HTMLElement }).host).toBe(div);  });
  test("dispose", () => {    disposer();    expect(div.innerHTML).toBe("");  });});
describe("Testing an SVG Portal", () => {  let div = document.createElement("div"),    disposer: () => void;  const testMount = document.createElement("svg");  const Component = () => <Portal mount={testMount} isSVG={true}>Hi</Portal>;
  test("Create portal control flow", () => {    disposer = render(Component, div);    expect(div.innerHTML).toBe("");    expect((testMount.firstChild as SVGGElement).innerHTML).toBe("Hi");    expect((testMount.firstChild as SVGGElement & { host: SVGElement }).host).toBe(div);  });
  test("dispose", () => disposer());});
describe("Testing a Portal to the head", () => {  let div = document.createElement("div"),    disposer: () => void,    [s, set] = createSignal("A Meaningful Page Title"),    [visible, setVisible] = createSignal(true);  const Component = () => (    <Show when={visible()}>      <Portal mount={document.head}>        <title>{s()}</title>      </Portal>    </Show>  );
  test("Create portal control flow", () => {    disposer = render(Component, div);    expect(div.innerHTML).toBe("");    expect(document.head.innerHTML).toBe("<title>A Meaningful Page Title</title>");  });
  test("Update title text", () => {    set("A New Better Page Title");    expect(document.head.innerHTML).toBe("<title>A New Better Page Title</title>");  });
  test("Hide Portal", () => {    setVisible(false);    expect(document.head.innerHTML).toBe("");    setVisible(true);    expect(document.head.innerHTML).toBe("<title>A New Better Page Title</title>");  });
  test("dispose", async () => {    expect(document.head.innerHTML).toBe("<title>A New Better Page Title</title>");    disposer();    expect(document.head.innerHTML).toBe("");  });});
describe("Testing a Portal with Synthetic Events", () => {  let div = document.createElement("div"),    disposer: () => void,    checkElem: HTMLDivElement,    testElem: HTMLDivElement,    clicked = false;  const Component = () => (    <Portal ref={checkElem}>      <div ref={testElem} onClick={e => (clicked = true)} />    </Portal>  );
  test("Create portal control flow", () => {    disposer = render(Component, div);    expect(div.innerHTML).toBe("");    expect(testElem).toBe(checkElem.firstChild);  });
  test("Test portal element clicked", () => {    expect(clicked).toBe(false);    testElem.click();    expect(clicked).toBe(true);    clicked = false;    clearDelegatedEvents();    expect(clicked).toBe(false);    testElem.click();    expect(clicked).toBe(false);  });
  test("dispose", () => disposer());});