test web module

Author: rmorshea

docs/source/examples/super_simple_chart.js

@@ -1,12 +1,12 @@
-import { h, Component, render } from "https://unpkg.com/preact?module";
+import { h, render } from "https://unpkg.com/preact?module";
 import htm from "https://unpkg.com/htm?module";
 
 const html = htm.bind(h);
 
 export { h as createElement, render as renderElement };
 
 export function unmountElement(container) {
-  preactRender(null, container);
+  render(null, container);
 }
 
 export function SuperSimpleChart(props) {

src/idom/web/module.py

@@ -57,12 +57,11 @@ def module_from_template(
     resolve_exports_depth: int = 5,
 ) -> WebModule:
     cdn = cdn.rstrip("/")
-    template_file = (
-        Path(__file__).parent / "templates" / f"{template}{module_name_suffix(name)}"
-    )
 
+    template_file_name = f"{template}{module_name_suffix(name)}"
+    template_file = Path(__file__).parent / "templates" / template_file_name
     if not template_file.exists():
-        raise ValueError(f"No template for {template!r} exists")
+        raise ValueError(f"No template for {template_file_name!r} exists")
 
     target_file = _web_module_path(name)
     if not target_file.exists():
@@ -93,9 +92,10 @@ def module_from_file(
 ) -> WebModule:
     source_file = Path(file)
     target_file = _web_module_path(name)
-    if target_file.exists():
-        if target_file.resolve() != source_file.resolve():
-            raise ValueError(f"{name!r} already exists as {target_file.resolve()}")
+    if not source_file.exists():
+        raise FileNotFoundError(f"Source file does not exist: {source_file}")
+    elif target_file.exists() or target_file.is_symlink():
+        raise FileExistsError(f"{name!r} already exists as {target_file.resolve()}")
     else:
         target_file.parent.mkdir(parents=True, exist_ok=True)
         target_file.symlink_to(source_file)
@@ -156,7 +156,9 @@ def export(
         return _make_export(web_module, export_names, fallback, allow_children)
     else:
         if web_module.export_names is not None:
-            missing = list(set(export_names).difference(web_module.export_names))
+            missing = list(
+                sorted(set(export_names).difference(web_module.export_names))
+            )
             if missing:
                 raise ValueError(f"{web_module.source!r} does not export {missing!r}")
         return [

tests/test_web/js_fixtures/exports-two-components.js

@@ -0,0 +1,18 @@
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export { h as createElement, render as renderElement };
+
+export function unmountElement(container) {
+  render(null, container);
+}
+
+export function Header1(props) {
+  return h("h1", {id: props.id}, props.text);
+}
+
+export function Header2(props) {
+  return h("h2", {id: props.id}, props.text);
+}

tests/test_web/js_fixtures/simple-button.js

@@ -1,7 +1,16 @@
-import react from "./react.js";
+import { h, render } from "https://unpkg.com/preact?module";
+import htm from "https://unpkg.com/htm?module";
+
+const html = htm.bind(h);
+
+export { h as createElement, render as renderElement };
+
+export function unmountElement(container) {
+  render(null, container);
+}
 
 export function SimpleButton(props) {
-  return react.createElement(
+  return h(
     "button",
     {
       id: props.id,

tests/test_web/test_module.py

@@ -1,12 +1,21 @@
 from pathlib import Path
 
+import pytest
+from sanic import Sanic
+from selenium.webdriver.common.by import By
+from selenium.webdriver.support import expected_conditions
+from selenium.webdriver.support.ui import WebDriverWait
+
 import idom
+from idom.server.sanic import PerClientStateServer
+from idom.testing import ServerMountPoint
+from idom.web.module import NAME_SOURCE, WebModule
 
 
 JS_FIXTURES_DIR = Path(__file__).parent / "js_fixtures"
 
 
-def test_that_js_module_unmount_is_called(driver, driver_wait, display):
+def test_that_js_module_unmount_is_called(driver, display):
     SomeComponent = idom.web.export(
         idom.web.module_from_file(
             "set-flag-when-unmount-is-called",
@@ -37,3 +46,112 @@ def ShowCurrentComponent():
 
     # the unmount callback for the old component was called
     driver.find_element_by_id("unmount-flag")
+
+
+def test_module_from_url(driver):
+    app = Sanic()
+
+    # instead of directing the URL to a CDN, we just point it to this static file
+    app.static(
+        "/simple-button.js",
+        str(JS_FIXTURES_DIR / "simple-button.js"),
+        content_type="text/javascript",
+    )
+
+    SimpleButton = idom.web.export(
+        idom.web.module_from_url("/simple-button.js", resolve_exports=False),
+        "SimpleButton",
+    )
+
+    @idom.component
+    def ShowSimpleButton():
+        return SimpleButton({"id": "my-button"})
+
+    with ServerMountPoint(PerClientStateServer, app=app) as mount_point:
+        mount_point.mount(ShowSimpleButton)
+        driver.get(mount_point.url())
+        driver.find_element_by_id("my-button")
+
+
+def test_module_from_template_where_template_does_not_exist():
+    with pytest.raises(ValueError, match="No template for 'does-not-exist.js'"):
+        idom.web.module_from_template("does-not-exist", "something.js")
+
+
+def test_module_from_template(driver, display):
+    victory = idom.web.module_from_template("react", "victory@35.4.0")
+    VictoryBar = idom.web.export(victory, "VictoryBar")
+    display(VictoryBar)
+    wait = WebDriverWait(driver, 10)
+    wait.until(
+        expected_conditions.visibility_of_element_located(
+            (By.CLASS_NAME, "VictoryContainer")
+        )
+    )
+
+
+def test_module_from_file(driver, driver_wait, display):
+    SimpleButton = idom.web.export(
+        idom.web.module_from_file(
+            "simple-button", JS_FIXTURES_DIR / "simple-button.js"
+        ),
+        "SimpleButton",
+    )
+
+    is_clicked = idom.Ref(False)
+
+    @idom.component
+    def ShowSimpleButton():
+        return SimpleButton(
+            {"id": "my-button", "onClick": lambda event: is_clicked.set_current(True)}
+        )
+
+    display(ShowSimpleButton)
+
+    button = driver.find_element_by_id("my-button")
+    button.click()
+    driver_wait.until(lambda d: is_clicked.current)
+
+
+def test_module_from_file_source_conflict(tmp_path):
+    first_file = tmp_path / "first.js"
+
+    with pytest.raises(FileNotFoundError, match="does not exist"):
+        idom.web.module_from_file("temp", first_file)
+
+    first_file.touch()
+
+    idom.web.module_from_file("temp", first_file)
+
+    second_file = tmp_path / "second.js"
+    second_file.touch()
+
+    with pytest.raises(FileExistsError, match="already exists"):
+        idom.web.module_from_file("temp", second_file)
+
+
+def test_module_missing_exports():
+    module = WebModule("test", NAME_SOURCE, None, {"a", "b", "c"}, None)
+
+    with pytest.raises(ValueError, match="does not export 'x'"):
+        idom.web.export(module, "x")
+
+    with pytest.raises(ValueError, match=r"does not export \['x', 'y'\]"):
+        idom.web.export(module, ["x", "y"])
+
+
+def test_module_exports_multiple_components(driver, display):
+    Header1, Header2 = idom.web.export(
+        idom.web.module_from_file(
+            "exports-two-components", JS_FIXTURES_DIR / "exports-two-components.js"
+        ),
+        ["Header1", "Header2"],
+    )
+
+    display(lambda: Header1({"id": "my-h1"}, "My Header 1"))
+
+    driver.find_element_by_id("my-h1")
+
+    display(lambda: Header2({"id": "my-h2"}, "My Header 2"))
+
+    driver.find_element_by_id("my-h2")