Add tests

holoviz · philippjfr · Mar 14, 2023 · Dec 12, 2021 · Dec 12, 2021 · Dec 13, 2021
commit 648d557a0791279b146a83b89523df5b726fdb4c
diff --git a/panel/dist/css/swipe.css b/panel/dist/css/swipe.css
@@ -1,23 +1,23 @@
-.before-after-container {
+.swipe-container {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
 }
 
-.before-after-container .outer {
+.swipe-container .outer {
     grid-column: 1;
     grid-row: 1;
 }
 
-.before-after-container .slider {
+.swipe-container .slider {
   grid-row: 1;
   grid-column: 1;
   z-index: 1;
   height: 100%;
   cursor: move;
 }
 
-.before-after-container .inner {
+.swipe-container .inner {
   width: 100%;
   height: 100%;
 }
diff --git a/panel/layout/swipe.py b/panel/layout/swipe.py
@@ -33,7 +33,7 @@ class Swipe(ListLike, ReactiveHTML):
     _after = param.Parameter()
 
     _template = """
-    <div id="container" class="before-after-container">
+    <div id="container" class="swipe-container">
       <div id="before" class="outer">
         <div id="before-inner" class="inner">${_before}</div>
       </div>

diff --git a/panel/tests/layout/test_before_after_slider.py b/panel/tests/layout/test_before_after_slider.py
diff --git a/panel/tests/layout/test_swipe.py b/panel/tests/layout/test_swipe.py
@@ -0,0 +1,21 @@
+from panel.layout import Spacer, Swipe
+
+
+def test_swip_construct(document, comm):
+    before = Spacer(background="red", height=400, width=800)
+    after = Spacer(background="green", height=400, width=800)
+    swipe = Swipe(
+        before,
+        after,
+        value=20,
+        height=800,
+        slider_width=15,
+        slider_color="lightgray"
+    )
+
+    model = swipe.get_root(document, comm)
+
+    assert model.children == {
+        'before-inner': [before._models[model.ref['id']][0]],
+        'after-inner': [after._models[model.ref['id']][0]]
+    }
diff --git a/panel/tests/ui/layout/test_swipe.py b/panel/tests/ui/layout/test_swipe.py
@@ -0,0 +1,119 @@
+import time
+
+import pytest
+
+from panel.io.server import serve
+from panel.layout import Spacer, Swipe
+
+pytestmark = pytest.mark.ui
+
+def test_swipe_fixed_width(page, port):
+
+    before = Spacer(styles={'background': "red"}, height=400, width=800)
+    after = Spacer(styles={'background': "green"}, height=400, width=800)
+    swipe = Swipe(
+        before,
+        after,
+    )
+
+    serve(swipe, port=port, threaded=True, show=False)
+
+    time.sleep(0.5)
+
+    page.goto(f"http://localhost:{port}")
+
+    bbox = page.locator(".swipe-container").bounding_box()
+
+    assert bbox['width'] == 800
+    assert bbox['height'] == 400
+
+    before_el = page.locator('.swipe-container .outer').first.locator('.inner div')
+    assert before_el.evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('background-color')""") == 'rgb(255, 0, 0)'
+    bbox_before = before_el.bounding_box()
+    assert bbox_before['width'] == 800
+    assert bbox_before['height'] == 400
+
+    after_el = page.locator('.swipe-container .outer').nth(1).locator('.inner div')
+    assert after_el.evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('background-color')""") == 'rgb(0, 128, 0)'
+    bbox_after = after_el.bounding_box()
+    assert bbox_after['width'] == 800
+    assert bbox_after['height'] == 400
+
+    slider = page.locator('.swipe-container .slider')
+    slider_bbox = slider.bounding_box()
+    assert slider_bbox['x'] == (bbox['width']/2. + 3)
+    print(slider_bbox['x'] + (bbox['width']/4.))
+    slider.drag_to(slider, target_position={'x': (bbox['width']/4.), 'y': 0}, force=True)
+
+    assert page.locator('.swipe-container .outer').nth(0).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(0% 0%, calc(75% + 5px) 0%, calc(75% + 5px) 100%, 0% 100%)'
+    assert page.locator('.swipe-container .outer').nth(1).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(calc(75% + 5px) 0%, 100% 0%, 100% 100%, calc(75% + 5px) 100%)'
+
+    assert swipe.value == 75
+
+    swipe.value = 25
+
+    time.sleep(0.2)
+
+    assert page.locator('.swipe-container .outer').nth(0).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(0% 0%, calc(25% + 5px) 0%, calc(25% + 5px) 100%, 0% 100%)'
+    assert page.locator('.swipe-container .outer').nth(1).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(calc(25% + 5px) 0%, 100% 0%, 100% 100%, calc(25% + 5px) 100%)'
+
+
+def test_swipe_stretch_width(page, port):
+    before = Spacer(styles={'background': "red"}, height=400, sizing_mode='stretch_width')
+    after = Spacer(styles={'background': "green"}, height=400, sizing_mode='stretch_width')
+    swipe = Swipe(
+        before,
+        after,
+        sizing_mode='stretch_width'
+    )
+
+    serve(swipe, port=port, threaded=True, show=False)
+
+    time.sleep(0.5)
+
+    page.goto(f"http://localhost:{port}")
+
+    bbox = page.locator(".swipe-container").bounding_box()
+    assert bbox['height'] == 400
+
+    before_el = page.locator('.swipe-container .outer').first.locator('.inner div')
+    assert before_el.evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('background-color')""") == 'rgb(255, 0, 0)'
+    bbox_before = before_el.bounding_box()
+    assert bbox_before['width'] == bbox['width']
+    assert bbox_before['height'] == 400
+
+    after_el = page.locator('.swipe-container .outer').nth(1).locator('.inner div')
+    assert after_el.evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('background-color')""") == 'rgb(0, 128, 0)'
+    bbox_after = after_el.bounding_box()
+    assert bbox_after['width'] == bbox['width']
+    assert bbox_after['height'] == 400
+
+    slider = page.locator('.swipe-container .slider')
+    slider_bbox = slider.bounding_box()
+    assert slider_bbox['x'] == (bbox['width']/2. + 3)
+    print(slider_bbox['x'] + (bbox['width']/4.))
+    slider.drag_to(slider, target_position={'x': (bbox['width']/4.), 'y': 0}, force=True)
+
+    assert page.locator('.swipe-container .outer').nth(0).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(0% 0%, calc(75% + 5px) 0%, calc(75% + 5px) 100%, 0% 100%)'
+    assert page.locator('.swipe-container .outer').nth(1).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(calc(75% + 5px) 0%,
534C
 100% 0%, 100% 100%, calc(75% + 5px) 100%)'
+
+    assert swipe.value == 75
+
+    swipe.value = 25
+
+    time.sleep(0.2)
+
+    assert page.locator('.swipe-container .outer').nth(0).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(0% 0%, calc(25% + 5px) 0%, calc(25% + 5px) 100%, 0% 100%)'
+    assert page.locator('.swipe-container .outer').nth(1).evaluate("""(element) =>
+        window.getComputedStyle(element).getPropertyValue('clip-path')""") == 'polygon(calc(25% + 5px) 0%, 100% 0%, 100% 100%, calc(25% + 5px) 100%)'