building-react/unit-tests.html at main · sahilmane69/building-react · GitHub

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <title>Goo React Test Suite</title>
     <style>
          body {
               font-family: monospace;
               padding: 20px;
               background: #fff;
               color: #000;
          }

          h1 {
               font-size: 16px;
               border-bottom: 1px solid #000;
               padding-bottom: 10px;
               margin-bottom: 20px;
          }

          .log-entry {
               margin-bottom: 5px;
          }

          .test-container {
               display: none;
          }
     </style>
</head>

<body>
     <h1>TEST RESULTS</h1>
     <div id="results"></div>
     <div id="test-root" class="test-container"></div>

     <script type="module">
          import { createElement, render, Component, useState } from "./mini-react.js";

          const log = (msg) => {
               const div = document.createElement("div");
               div.className = "log-entry";
               div.textContent = msg;
               document.getElementById("results").appendChild(div);
          };

          const assert = (condition, message) => {
               if (condition) {
                    log(`[OK] ${message}`);
               } else {
                    log(`[FAIL] ${message}`);
                    console.error("Assertion failed:", message);
               }
          };

          const assertEqual = (actual, expected, message) => {
               const jsonActual = JSON.stringify(actual);
               const jsonExpected = JSON.stringify(expected);
               if (jsonActual === jsonExpected) {
                    log(`[OK] ${message}`);
               } else {
                    log(`[FAIL] ${message} (Expected ${jsonExpected}, got ${jsonActual})`);
                    console.error("Expected:", expected, "Got:", actual);
               }
          };

          const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

          async function runTests() {
               try {
                    const container = document.getElementById("test-root");

                    // Test 1: createElement basic structure
                    const element = createElement("div", { id: "foo" }, "Hello");
                    const expected = {
                         type: "div",
                         props: {
                              id: "foo",
                              children: [
                                   {
                                        type: "TEXT_ELEMENT",
                                        props: { nodeValue: "Hello", children: [] }
                                   }
                              ]
                         }
                    };
                    assertEqual(element, expected, "createElement produces correct VDOM object");

                    // Test 2: render basic element to DOM
                    render(null, container);
                    const vdom = createElement("span", { id: "bar" }, "World");
                    render(vdom, container);

                    await sleep(100); // Wait for Fiber Work Loop
                    assert(
                         container.innerHTML === '<span id="bar">World</span>',
                         "render mounts HTML element correctly"
                    );

                    // Test 3: render nested elements
                    render(null, container);
                    const nested = createElement("div", null, createElement("p", null, "Nested"));
                    render(nested, container);

                    await sleep(100);
                    assert(
                         container.innerHTML === '<div><p>Nested</p></div>',
                         "render mounts nested elements correctly"
                    );

                    // Test 4: Component Rendering
                    // Note: Class components are deprecated in this fiber version, so we skip them.

                    // Test 5: Functional Component Rendering
                    render(null, container);
                    function FunctionalComp(props) {
                         return createElement("h2", null, props.text);
                    }
                    render(createElement(FunctionalComp, { text: "Hello Fiber" }), container);

                    await sleep(100);
                    assert(
                         container.innerHTML === "<h2>Hello Fiber</h2>",
                         "Functional Component renders correctly"
                    );

                    // Test 6: Hooks State Update
                    render(null, container);
                    let triggerUpdate;
                    function Counter() {
                         const [count, setCount] = useState(1);
                         triggerUpdate = () => setCount(c => c + 1);
                         return createElement("p", { id: "counter" }, `Count: ${count}`);
                    }
                    render(createElement(Counter), container);

                    await sleep(100);
                    const pTag = container.querySelector("#counter");
                    assert(pTag && pTag.textContent === "Count: 1", "Initial hook state rendered correctly");

                    if (pTag) {
                         triggerUpdate();
                         await sleep(100); // Wait for re-render
                         assert(pTag.textContent === "Count: 2", "useState updates the DOM");
                    }

                    console.log("%c Tests runned well done ur react is ready ", "background: #222; color: #bada55; font-size: 20px; padding: 10px; border-radius: 5px;");

               } catch (e) {
                    log(`[FATAL] Test Suite Crashed: ${e.message}`);
                    console.error(e);
               }
          }

          runTests();
     </script>
</body>

</html>