ci(testing): rendering testing

fix #45

examples/validation/VolumeRendering.py

@@ -2,13 +2,17 @@
 
 from trame.app import get_server
 from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify
+from trame.widgets import vuetify, html
 from trame.widgets.vtk import VtkLocalView, VtkRemoteView
 
-server = get_server()
+# Just for using this script in testing
+from trame_client.utils.testing import enable_testing
+
+server = enable_testing(get_server(), "local_rendering_ready")
 state, ctrl = server.state, server.controller
 
 state.trame__title = "VTK Volume Rendering"
+state.local_rendering_ready = 0
 
 # MAPPER_TYPE = "FixedPoint"
 MAPPER_TYPE = "Smart"
@@ -78,6 +82,7 @@
 
     with layout.toolbar:
         vuetify.VSpacer()
+        html.Div("{{ local_rendering_ready }}", classes="readyCount")
 
     with layout.content:
         with vuetify.VContainer(
@@ -87,7 +92,7 @@
             with vuetify.VContainer(
                 fluid=True, classes="pa-0 fill-height", style="width: 50%;"
             ):
-                local = VtkLocalView(renWin)
+                local = VtkLocalView(renWin, on_ready="local_rendering_ready++")
             with vuetify.VContainer(
                 fluid=True, classes="pa-0 fill-height", style="width: 50%;"
             ):

tests/test_big_int.py

@@ -6,12 +6,12 @@
 
 BASELINE_TEST = (
     Path(__file__).parent.parent
-    / "visual_baseline/test_reactivity[examples/validation/PyVistaInt64.py]/init/baseline.png"
+    / "visual_baseline/test_rendering[examples/validation/PyVistaInt64.py]/init/baseline.png"
 )
 
 
 @pytest.mark.parametrize("server_path", ["examples/validation/PyVistaInt64.py"])
-def test_reactivity(server, baseline_image):
+def test_rendering(server, baseline_image):
     with SB() as sb:
         url = f"http://127.0.0.1:{server.port}/"
         sb.open(url)

tests/test_remote_rendering.py

@@ -6,12 +6,12 @@
 
 BASELINE_TEST = (
     Path(__file__).parent.parent
-    / "visual_baseline/test_reactivity[examples/validation/PyVistaLookupTable.py]/init/baseline.png"
+    / "visual_baseline/test_rendering[examples/validation/PyVistaLookupTable.py]/init/baseline.png"
 )
 
 
 @pytest.mark.parametrize("server_path", ["examples/validation/PyVistaLookupTable.py"])
-def test_reactivity(server, baseline_image):
+def test_rendering(server, baseline_image):
     with SB() as sb:
         url = f"http://127.0.0.1:{server.port}/"
         sb.open(url)

tests/test_volume_rendering.py

@@ -0,0 +1,21 @@
+from pathlib import Path
+import pytest
+from seleniumbase import SB
+from trame_client.utils.testing import set_browser_size, baseline_comparison
+
+
+BASELINE_TEST = (
+    Path(__file__).parent.parent
+    / "visual_baseline/test_rendering[examples/validation/VolumeRendering.py]/init/baseline.png"
+)
+
+
+@pytest.mark.parametrize("server_path", ["examples/validation/VolumeRendering.py"])
+def test_rendering(server, baseline_image):
+    with SB() as sb:
+        url = f"http://127.0.0.1:{server.port}/"
+        sb.open(url)
+        set_browser_size(sb, 600, 300)
+        sb.assert_exact_text("1", ".readyCount")
+        sb.check_window(name="init", level=3)
+        baseline_comparison(sb, BASELINE_TEST, 0.1)

visual_baseline/test_reactivity[examples/validation/PyVistaInt64.py]/init/tags_level_3.txt → visual_baseline/test_rendering[examples/validation/PyVistaInt64.py]/init/tags_level_3.txt

@@ -1 +1 @@
-[["noscript", []], ["strong", []], ["div", [["class", ["v-application", "v-application--is-ltr", "theme--light"]], ["data-app", "true"], ["id", "app"]]], ["div", [["class", ["v-application--wrap"]]]], ["header", [["class", ["v-sheet", "theme--light", "v-toolbar", "v-app-bar", "v-app-bar--fixed"]], ["data-booted", "true"], ["style", "height: 56px; margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"]]], ["div", [["class", ["v-toolbar__content"]], ["style", "height: 56px;"]]], ["button", [["class", ["v-app-bar__nav-icon", "v-btn", "v-btn--icon", "v-btn--round", "theme--light", "v-size--default"]], ["type", "button"]]], ["span", [["class", ["v-btn__content"]]]], ["i", [["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mdi", "mdi-menu", "theme--light"]]]], ["div", [["class", ["v-toolbar__title"]]]], ["div", [["class", ["spacer"]]]], ["div", [["class", ["readyCount"]]]], ["main", [["class", ["v-main"]], ["data-booted", "true"], ["style", "padding: 56px 0px 0px;"]]], ["div", [["class", ["v-main__wrap"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]]]], ["div", [["class", ["fill-height", "col"]]]], ["div", [["style", "position: relative; width: 100%; height: 100%;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: default; touch-action: none; user-select: none;"]]], ["canvas", [["height", "220"], ["style", "width: 100%; display: block;"], ["width", "276"]]], ["div", [["class", ["fill-height", "col"]]]], ["div", [["style", "position: relative; width: 100%; height: 100%; z-index: 0;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: pointer; touch-action: none; user-select: none;"]]], ["canvas", [["height", "220"], ["style", "width: 100%; display: block;"], ["width", "276"]]], ["img", [["src", "blob:http://127.0.0.1:52306/ed971f7b-86b9-441b-8f61-58e53848f97a"], ["style", "position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1;"]]], ["footer", [["class", ["v-footer", "my-0", "py-0", "v-sheet", "theme--light", "v-footer--fixed"]], ["data-booted", "true"], ["style", "left: 0px; right: 0px; bottom: 0px; display: none;"]]], ["div", [["aria-valuemax", "100"], ["aria-valuemin", "0"], ["aria-valuenow", "0"], ["class", ["v-progress-circular", "ml-n3", "mr-1"]], ["role", "progressbar"], ["style", "height: 16px; width: 16px; color: rgb(4, 169, 77); caret-color: rgb(4, 169, 77);"]]], ["svg", [["style", "transform: rotate(0deg);"], ["viewbox", "24.615384615384617 24.615384615384617 49.23076923076923 49.23076923076923"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["circle", [["class", ["v-progress-circular__underlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "0"], ["stroke-width", "9.230769230769232"]]], ["circle", [["class", ["v-progress-circular__overlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "125.66370614359172px"], ["stroke-width", "9.230769230769232"]]], ["div", [["class", ["v-progress-circular__info"]]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://kitware.github.io/trame/"], ["target", "_blank"]]], ["div", [["class", ["spacer"]]]], ["span", [["class", ["v-tooltip", "v-tooltip--top"]]]], ["i", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mr-4", "mdi", "mdi-help-circle", "theme--light"]], ["style", "font-size: 12px;"]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://www.kitware.com/"], ["target", "_blank"]]], ["script", [["src", "__trame_vuetify/trame-vuetify.umd.min.js"], ["type", "text/javascript"]]], ["script", [["src", "__trame_vtk/trame-vtk.js"], ["type", "text/javascript"]]]]
+[["noscript", []], ["strong", []], ["div", [["class", ["v-application", "v-application--is-ltr", "theme--light"]], ["data-app", "true"], ["id", "app"]]], ["div", [["class", ["v-application--wrap"]]]], ["header", [["class", ["v-sheet", "theme--light", "v-toolbar", "v-app-bar", "v-app-bar--fixed"]], ["data-booted", "true"], ["style", "height: 56px; margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"]]], ["div", [["class", ["v-toolbar__content"]], ["style", "height: 56px;"]]], ["button", [["class", ["v-app-bar__nav-icon", "v-btn", "v-btn--icon", "v-btn--round", "theme--light", "v-size--default"]], ["type", "button"]]], ["span", [["class", ["v-btn__content"]]]], ["i", [["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mdi", "mdi-menu", "theme--light"]]]], ["div", [["class", ["v-toolbar__title"]]]], ["div", [["class", ["spacer"]]]], ["div", [["class", ["readyCount"]]]], ["main", [["class", ["v-main"]], ["data-booted", "true"], ["style", "padding: 56px 0px 0px;"]]], ["div", [["class", ["v-main__wrap"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]]]], ["div", [["class", ["fill-height", "col"]]]], ["div", [["style", "position: relative; width: 100%; height: 100%;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: default; touch-action: none; user-select: none;"]]], ["canvas", [["height", "220"], ["style", "width: 100%; display: block;"], ["width", "276"]]], ["div", [["class", ["fill-height", "col"]]]], ["div", [["style", "position: relative; width: 100%; height: 100%; z-index: 0;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: pointer; touch-action: none; user-select: none;"]]], ["canvas", [["height", "220"], ["style", "width: 100%; display: block;"], ["width", "276"]]], ["img", [["src", "blob:http://127.0.0.1:53153/946bcf25-3967-4124-8303-1180446f6855"], ["style", "position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1;"]]], ["footer", [["class", ["v-footer", "my-0", "py-0", "v-sheet", "theme--light", "v-footer--fixed"]], ["data-booted", "true"], ["style", "left: 0px; right: 0px; bottom: 0px; display: none;"]]], ["div", [["aria-valuemax", "100"], ["aria-valuemin", "0"], ["aria-valuenow", "0"], ["class", ["v-progress-circular", "ml-n3", "mr-1"]], ["role", "progressbar"], ["style", "height: 16px; width: 16px; color: rgb(4, 169, 77); caret-color: rgb(4, 169, 77);"]]], ["svg", [["style", "transform: rotate(0deg);"], ["viewbox", "24.615384615384617 24.615384615384617 49.23076923076923 49.23076923076923"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["circle", [["class", ["v-progress-circular__underlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "0"], ["stroke-width", "9.230769230769232"]]], ["circle", [["class", ["v-progress-circular__overlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "125.66370614359172px"], ["stroke-width", "9.230769230769232"]]], ["div", [["class", ["v-progress-circular__info"]]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://kitware.github.io/trame/"], ["target", "_blank"]]], ["div", [["class", ["spacer"]]]], ["span", [["class", ["v-tooltip", "v-tooltip--top"]]]], ["i", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mr-4", "mdi", "mdi-help-circle", "theme--light"]], ["style", "font-size: 12px;"]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://www.kitware.com/"], ["target", "_blank"]]], ["script", [["src", "__trame_vuetify/trame-vuetify.umd.min.js"], ["type", "text/javascript"]]], ["script", [["src", "__trame_vtk/trame-vtk.js"], ["type", "text/javascript"]]]]

visual_baseline/test_reactivity[examples/validation/PyVistaLookupTable.py]/init/tags_level_3.txt → visual_baseline/test_rendering[examples/validation/PyVistaLookupTable.py]/init/tags_level_3.txt

@@ -1 +1 @@
-[["noscript", []], ["strong", []], ["div", [["class", ["v-application", "v-application--is-ltr", "theme--light"]], ["data-app", "true"], ["id", "app"]]], ["div", [["class", ["v-application--wrap"]]]], ["header", [["class", ["v-sheet", "theme--light", "v-toolbar", "v-app-bar", "v-app-bar--fixed"]], ["data-booted", "true"], ["style", "height: 56px; margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"]]], ["div", [["class", ["v-toolbar__content"]], ["style", "height: 56px;"]]], ["button", [["class", ["v-app-bar__nav-icon", "v-btn", "v-btn--icon", "v-btn--round", "theme--light", "v-size--default"]], ["type", "button"]]], ["span", [["class", ["v-btn__content"]]]], ["i", [["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mdi", "mdi-menu", "theme--light"]]]], ["div", [["class", ["v-toolbar__title"]]]], ["div", [["class", ["spacer"]]]], ["div", [["class", ["readyCount"]]]], ["main", [["class", ["v-main"]], ["data-booted", "true"], ["style", "padding: 56px 0px 0px;"]]], ["div", [["class", ["v-main__wrap"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]], ["style", "width: 50%;"]]], ["div", [["style", "position: relative; width: 100%; height: 100%;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: default; touch-action: none; user-select: none;"]]], ["canvas", [["height", "244"], ["style", "width: 100%; display: block;"], ["width", "300"]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]], ["style", "width: 50%;"]]], ["div", [["style", "position: relative; width: 100%; height: 100%; z-index: 0;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: pointer; touch-action: none; user-select: none;"]]], ["canvas", [["height", "244"], ["style", "width: 100%; display: block;"], ["width", "300"]]], ["img", [["src", "blob:http://127.0.0.1:52343/a35df245-7423-4181-85c8-b1c397e87960"], ["style", "position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1;"]]], ["footer", [["class", ["v-footer", "my-0", "py-0", "v-sheet", "theme--light", "v-footer--fixed"]], ["data-booted", "true"], ["style", "left: 0px; right: 0px; bottom: 0px; display: none;"]]], ["div", [["aria-valuemax", "100"], ["aria-valuemin", "0"], ["aria-valuenow", "0"], ["class", ["v-progress-circular", "ml-n3", "mr-1"]], ["role", "progressbar"], ["style", "height: 16px; width: 16px; color: rgb(4, 169, 77); caret-color: rgb(4, 169, 77);"]]], ["svg", [["style", "transform: rotate(0deg);"], ["viewbox", "24.615384615384617 24.615384615384617 49.23076923076923 49.23076923076923"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["circle", [["class", ["v-progress-circular__underlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "0"], ["stroke-width", "9.230769230769232"]]], ["circle", [["class", ["v-progress-circular__overlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "125.66370614359172px"], ["stroke-width", "9.230769230769232"]]], ["div", [["class", ["v-progress-circular__info"]]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://kitware.github.io/trame/"], ["target", "_blank"]]], ["div", [["class", ["spacer"]]]], ["span", [["class", ["v-tooltip", "v-tooltip--top"]]]], ["i", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mr-4", "mdi", "mdi-help-circle", "theme--light"]], ["style", "font-size: 12px;"]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://www.kitware.com/"], ["target", "_blank"]]], ["script", [["src", "__trame_vuetify/trame-vuetify.umd.min.js"], ["type", "text/javascript"]]], ["script", [["src", "__trame_vtk/trame-vtk.js"], ["type", "text/javascript"]]]]
+[["noscript", []], ["strong", []], ["div", [["class", ["v-application", "v-application--is-ltr", "theme--light"]], ["data-app", "true"], ["id", "app"]]], ["div", [["class", ["v-application--wrap"]]]], ["header", [["class", ["v-sheet", "theme--light", "v-toolbar", "v-app-bar", "v-app-bar--fixed"]], ["data-booted", "true"], ["style", "height: 56px; margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"]]], ["div", [["class", ["v-toolbar__content"]], ["style", "height: 56px;"]]], ["button", [["class", ["v-app-bar__nav-icon", "v-btn", "v-btn--icon", "v-btn--round", "theme--light", "v-size--default"]], ["type", "button"]]], ["span", [["class", ["v-btn__content"]]]], ["i", [["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mdi", "mdi-menu", "theme--light"]]]], ["div", [["class", ["v-toolbar__title"]]]], ["div", [["class", ["spacer"]]]], ["div", [["class", ["readyCount"]]]], ["main", [["class", ["v-main"]], ["data-booted", "true"], ["style", "padding: 56px 0px 0px;"]]], ["div", [["class", ["v-main__wrap"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]], ["style", "width: 50%;"]]], ["div", [["style", "position: relative; width: 100%; height: 100%;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: default; touch-action: none; user-select: none;"]]], ["canvas", [["height", "244"], ["style", "width: 100%; display: block;"], ["width", "300"]]], ["div", [["class", ["container", "pa-0", "fill-height", "container--fluid"]], ["style", "width: 50%;"]]], ["div", [["style", "position: relative; width: 100%; height: 100%; z-index: 0;"]]], ["div", [["style", "position: absolute; width: 100%; height: 100%; overflow: hidden; cursor: pointer; touch-action: none; user-select: none;"]]], ["canvas", [["height", "244"], ["style", "width: 100%; display: block;"], ["width", "300"]]], ["img", [["src", "blob:http://127.0.0.1:53227/eeecc515-3520-41ab-a79f-b3763ab94547"], ["style", "position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1;"]]], ["footer", [["class", ["v-footer", "my-0", "py-0", "v-sheet", "theme--light", "v-footer--fixed"]], ["data-booted", "true"], ["style", "left: 0px; right: 0px; bottom: 0px; display: none;"]]], ["div", [["aria-valuemax", "100"], ["aria-valuemin", "0"], ["aria-valuenow", "0"], ["class", ["v-progress-circular", "ml-n3", "mr-1"]], ["role", "progressbar"], ["style", "height: 16px; width: 16px; color: rgb(4, 169, 77); caret-color: rgb(4, 169, 77);"]]], ["svg", [["style", "transform: rotate(0deg);"], ["viewbox", "24.615384615384617 24.615384615384617 49.23076923076923 49.23076923076923"], ["xmlns", "http://www.w3.org/2000/svg"]]], ["circle", [["class", ["v-progress-circular__underlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "0"], ["stroke-width", "9.230769230769232"]]], ["circle", [["class", ["v-progress-circular__overlay"]], ["cx", "49.23076923076923"], ["cy", "49.23076923076923"], ["fill", "transparent"], ["r", "20"], ["stroke-dasharray", "125.664"], ["stroke-dashoffset", "125.66370614359172px"], ["stroke-width", "9.230769230769232"]]], ["div", [["class", ["v-progress-circular__info"]]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://kitware.github.io/trame/"], ["target", "_blank"]]], ["div", [["class", ["spacer"]]]], ["span", [["class", ["v-tooltip", "v-tooltip--top"]]]], ["i", [["aria-expanded", "false"], ["aria-haspopup", "true"], ["aria-hidden", "true"], ["class", ["v-icon", "notranslate", "mr-4", "mdi", "mdi-help-circle", "theme--light"]], ["style", "font-size: 12px;"]]], ["a", [["class", ["grey--text", "lighten-1--text", "text-caption", "text-decoration-none"]], ["href", "https://www.kitware.com/"], ["target", "_blank"]]], ["script", [["src", "__trame_vuetify/trame-vuetify.umd.min.js"], ["type", "text/javascript"]]], ["script", [["src", "__trame_vtk/trame-vtk.js"], ["type", "text/javascript"]]]]

visual_baseline/test_rendering[examples/validation/VolumeRendering.py]/init/tags_level_1.txt

@@ -0,0 +1 @@
+[["noscript"], ["strong"], ["div"], ["div"], ["header"], ["div"], ["button"], ["span"], ["i"], ["div"], ["div"], ["div"], ["main"], ["div"], ["div"], ["div"], ["div"], ["div"], ["canvas"], ["div"], ["div"], ["div"], ["canvas"], ["img"], ["footer"], ["div"], ["svg"], ["circle"], ["circle"], ["div"], ["a"], ["div"], ["span"], ["i"], ["a"], ["script"], ["script"]]