test render imported child components

Author: rmorshea

tests/test_web/js_fixtures/component-can-have-child.js

@@ -0,0 +1,27 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export function bind(node, config) {
+  return {
+    create: (type, props, children) => h(type, props, ...children),
+    render: (element) => render(element, node),
+    unmount: () => render(null, node),
+  }
+}
+
+// The intention here is that Child components are passed in here so we check that the
+// children of "the-parent" are "child-1" through "child-N"
+export function Parent(props) {
+  return html`
+    <div>
+      <p>the parent</p>
+      <ul id="the-parent">${props.children}</div>
+    </div>
+  `
+}
+
+export function Child({ index }) {
+  return html`<li id="child-${index}">child ${index}</li>`
+}

tests/test_web/test_module.py

@@ -168,3 +168,26 @@ def test_module_exports_multiple_components(driver, display):
     display(lambda: Header2({"id": "my-h2"}, "My Header 2"))
 
     driver.find_element_by_id("my-h2")
+
+
+def test_imported_components_can_render_children(driver, display):
+    module = idom.web.module_from_file(
+        "component-can-have-child", JS_FIXTURES_DIR / "component-can-have-child.js"
+    )
+    Parent, Child = idom.web.export(module, ["Parent", "Child"])
+
+    display(
+        lambda: Parent(
+            Child({"index": 1}),
+            Child({"index": 2}),
+            Child({"index": 3}),
+        )
+    )
+
+    parent = driver.find_element_by_id("the-parent")
+    children = parent.find_elements_by_tag_name("li")
+
+    assert len(children) == 3
+
+    for index, child in enumerate(children):
+        assert child.get_attribute("id") == f"child-{index + 1}"