Merge pull request #62 from omochi/add-brtest

ブラウザでのテストを追加する
omochi · Apr 19, 2024 · 16b518e · 16b518e
2 parents cfab4df + fee0d9e
commit 16b518e
Show file tree

Hide file tree

Showing 24 changed files with 252 additions and 54 deletions.
diff --git a/BrowserTests/Package.swift b/BrowserTests/Package.swift
@@ -24,7 +24,10 @@ addPage(name: "QSComponents")
 addPage(name: "QSMarkup")
 addPage(name: "QSDisplayingData")
 addPage(name: "QSConditional")
-addPage(name: "QSRenderingLists")
+addPage(name: "QSLists")
+addPage(name: "QSEvents")
+addPage(name: "QSUpdating")
+addPage(name: "QSSharing")
 
 let package = Package(
     name: "BrowserTests",

diff --git a/BrowserTests/Sources/BRTSupport/RenderRoot.swift b/BrowserTests/Sources/BRTSupport/RenderRoot.swift
@@ -2,8 +2,11 @@ import React
 import JavaScriptKit
 import SRTDOM
 
+public var root: ReactRoot? = nil
+
 public func renderRoot(component: some Component) throws {
     let body = try JSWindow.global.document.body.unwrap("body")
     let root = ReactRoot(element: body)
+    BRTSupport.root = root
     root.render(node: component)
 }
diff --git a/BrowserTests/Sources/BRTSupport/common.css b/BrowserTests/Sources/BRTSupport/common.css
@@ -0,0 +1,55 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 22px;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 20px;
+}
+
+h3 {
+  margin-top: 0;
+  font-size: 18px;
+}
+
+h4 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+h5 {
+  margin-top: 0;
+  font-size: 14px;
+}
+
+h6 {
+  margin-top: 0;
+  font-size: 12px;
+}
+
+code {
+  font-size: 1.2em;
+}
+
+ul {
+  padding-inline-start: 20px;
+}
+
+.avatar {
+  border-radius: 50%;
+}
+
+.large {
+  border: 4px solid gold;
+}
diff --git a/BrowserTests/Sources/GenPagesModule/GenPages.swift b/BrowserTests/Sources/GenPagesModule/GenPages.swift
@@ -40,6 +40,7 @@ public struct GenPages {
         <head>
             <meta charset="utf-8">
             <title>\(page)</title>
+            <link rel="stylesheet" type="text/css" href="/Sources/BRTSupport/common.css">
             <script type="module">
                 import { load } from "/src/loader/load.ts";
                 load("/.build/wasm32-unknown-wasi/debug/\(page).wasm");

diff --git a/BrowserTests/Sources/QSDisplayingData/styles.css b/BrowserTests/Sources/QSDisplayingData/styles.css
@@ -1,51 +1,3 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 20px;
-  padding: 0;
-}
-
-h1 {
-  margin-top: 0;
-  font-size: 22px;
-}
-
-h2 {
-  margin-top: 0;
-  font-size: 20px;
-}
-
-h3 {
-  margin-top: 0;
-  font-size: 18px;
-}
-
-h4 {
-  margin-top: 0;
-  font-size: 16px;
-}
-
-h5 {
-  margin-top: 0;
-  font-size: 14px;
-}
-
-h6 {
-  margin-top: 0;
-  font-size: 12px;
-}
-
-code {
-  font-size: 1.2em;
-}
-
-ul {
-  padding-inline-start: 20px;
-}
-
 .avatar {
   border-radius: 50%;
 }

diff --git a/BrowserTests/Sources/QSEvents/main.swift b/BrowserTests/Sources/QSEvents/main.swift
@@ -0,0 +1,30 @@
+import React
+import JavaScriptKit
+import SRTDOM
+import BRTSupport
+
+// https://ja.react.dev/learn#responding-to-events
+
+struct MyButton: Component {
+    func render() -> Node {
+        let handleClick = EventListener { (_) in
+            do {
+                try JSWindow.global.alert("You clicked me!")
+            } catch {
+                print(error)
+            }
+        }
+
+        return button(
+            listeners: [
+                "click": handleClick
+            ]
+        ) {
+            "Click me"
+        }
+    }
+}
+
+try renderRoot(component: MyButton())
+
+
diff --git a/...Tests/Sources/QSRenderingLists/main.swift → BrowserTests/Sources/QSLists/main.swift b/...Tests/Sources/QSRenderingLists/main.swift → BrowserTests/Sources/QSLists/main.swift
diff --git a/BrowserTests/Sources/QSSharing/main.swift b/BrowserTests/Sources/QSSharing/main.swift
@@ -0,0 +1,42 @@
+import React
+import JavaScriptKit
+import SRTDOM
+import BRTSupport
+
+// https://ja.react.dev/learn#sharing-data-between-components
+
+struct MyButton: Component {
+    var count: Int
+    var onClick: EventListener
+
+    func render() -> Node {
+        return button(
+            listeners: [
+                "click": onClick
+            ]
+        ) {
+            "Clicked \(count) times"
+        }
+    }
+}
+
+struct MyApp: Component {
+    @State var count = 0
+
+    func render() -> Node {
+        let handleClick = EventListener { (_) in
+            count += 1
+        }
+
+        return div {
+            h1 { "Counters that update together" }
+            MyButton(count: count, onClick: handleClick)
+            MyButton(count: count, onClick: handleClick)
+        }
+    }
+}
+
+try addCSS(path: "/Sources/QSSharing/styles.css")
+try renderRoot(component: MyApp())
+
+
diff --git a/BrowserTests/Sources/QSSharing/styles.css b/BrowserTests/Sources/QSSharing/styles.css
@@ -0,0 +1,5 @@
+button {
+  display: block;
+  margin-bottom: 5px;
+}
+
diff --git a/BrowserTests/Sources/QSUpdating/main.swift b/BrowserTests/Sources/QSUpdating/main.swift
@@ -0,0 +1,39 @@
+import React
+import JavaScriptKit
+import SRTDOM
+import BRTSupport
+
+// https://ja.react.dev/learn#updating-the-screen
+
+struct MyButton: Component {
+    @State var count = 0
+
+    func render() -> Node {
+        let handleClick = EventListener { (_) in
+            count += 1
+        }
+
+        return button(
+            listeners: [
+                "click": handleClick
+            ]
+        ) {
+            "Clicked \(count) times"
+        }
+    }
+}
+
+struct MyApp: Component {
+    func render() -> Node {
+        div {
+            h1 { "Counters that update separately" }
+            MyButton()
+            MyButton()
+        }
+    }
+}
+
+try addCSS(path: "/Sources/QSUpdating/styles.css")
+try renderRoot(component: MyApp())
+
+
diff --git a/BrowserTests/Sources/QSUpdating/styles.css b/BrowserTests/Sources/QSUpdating/styles.css
@@ -0,0 +1,5 @@
+button {
+  display: block;
+  margin-bottom: 5px;
+}
+
diff --git a/BrowserTests/index.html b/BrowserTests/index.html
diff --git a/BrowserTests/package.json b/BrowserTests/package.json
@@ -2,6 +2,7 @@
   "name": "browsertests",
   "version": "1.0.0",
   "description": "",
+  "type": "module",
   "main": "index.js",
   "scripts": {
     "dev": "vite",

diff --git a/BrowserTests/pages/QSComponents.html b/BrowserTests/pages/QSComponents.html
diff --git a/BrowserTests/pages/QSConditional.html b/BrowserTests/pages/QSConditional.html
diff --git a/BrowserTests/pages/QSDisplayingData.html b/BrowserTests/pages/QSDisplayingData.html
diff --git a/BrowserTests/pages/QSEvents.html b/BrowserTests/pages/QSEvents.html
diff --git a/BrowserTests/pages/QSRenderingLists.html → BrowserTests/pages/QSLists.html b/BrowserTests/pages/QSRenderingLists.html → BrowserTests/pages/QSLists.html
diff --git a/BrowserTests/pages/QSMarkup.html b/BrowserTests/pages/QSMarkup.html
diff --git a/BrowserTests/pages/QSSharing.html b/BrowserTests/pages/QSSharing.html
diff --git a/BrowserTests/pages/QSUpdating.html b/BrowserTests/pages/QSUpdating.html
diff --git a/BrowserTests/tsconfig.json b/BrowserTests/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
     "target": "ESNext",
     "outDir": "js",