reactpy/tests/test_widgets.py at main · reactive-python/reactpy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
from base64 import b64encode
from pathlib import Path

import reactpy
from reactpy.testing import DisplayFixture, poll
from tests.tooling.common import DEFAULT_TYPE_DELAY

HERE = Path(__file__).parent


IMAGE_SRC_BYTES = b"""
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="100" style="fill:rgb(0,0,255);" />
</svg>
"""
BASE64_IMAGE_SRC = b64encode(IMAGE_SRC_BYTES).decode()


async def test_image_from_string(display: DisplayFixture):
    src = IMAGE_SRC_BYTES.decode()
    await display.show(lambda: reactpy.widgets.image("svg", src, {"id": "a-circle-1"}))
    client_img = await display.page.wait_for_selector("#a-circle-1")
    assert BASE64_IMAGE_SRC in (await client_img.get_attribute("src"))


async def test_image_from_bytes(display: DisplayFixture):
    src = IMAGE_SRC_BYTES
    await display.show(lambda: reactpy.widgets.image("svg", src, {"id": "a-circle-1"}))
    client_img = await display.page.wait_for_selector("#a-circle-1")
    assert BASE64_IMAGE_SRC in (await client_img.get_attribute("src"))


async def test_use_linked_inputs(display: DisplayFixture):
    @reactpy.component
    def SomeComponent():
        i_1, i_2 = reactpy.widgets.use_linked_inputs([{"id": "i_1"}, {"id": "i_2"}])
        return reactpy.html.div(i_1, i_2)

    await display.show(SomeComponent)

    input_1 = await display.page.wait_for_selector("#i_1")
    input_2 = await display.page.wait_for_selector("#i_2")

    await input_1.type("hello", delay=DEFAULT_TYPE_DELAY)

    assert (await input_1.evaluate("e => e.value")) == "hello"
    assert (await input_2.evaluate("e => e.value")) == "hello"

    await input_2.focus()
    await input_2.type(" world", delay=DEFAULT_TYPE_DELAY)

    assert (await input_1.evaluate("e => e.value")) == "hello world"
    assert (await input_2.evaluate("e => e.value")) == "hello world"


async def test_use_linked_inputs_on_change(display: DisplayFixture):
    value = reactpy.Ref(None)

    @reactpy.component
    def SomeComponent():
        i_1, i_2 = reactpy.widgets.use_linked_inputs(
            [{"id": "i_1"}, {"id": "i_2"}],
            on_change=value.set_current,
        )
        return reactpy.html.div(i_1, i_2)

    await display.show(SomeComponent)

    input_1 = await display.page.wait_for_selector("#i_1")
    input_2 = await display.page.wait_for_selector("#i_2")

    await input_1.type("hello", delay=DEFAULT_TYPE_DELAY)

    poll_value = poll(lambda: value.current)

    await poll_value.until_equals("hello")

    await input_2.focus()
    await input_2.type(" world", delay=DEFAULT_TYPE_DELAY)

    await poll_value.until_equals("hello world")


async def test_use_linked_inputs_on_change_with_cast(display: DisplayFixture):
    value = reactpy.Ref(None)

    @reactpy.component
    def SomeComponent():
        i_1, i_2 = reactpy.widgets.use_linked_inputs(
            [{"id": "i_1"}, {"id": "i_2"}], on_change=value.set_current, cast=int
        )
        return reactpy.html.div(i_1, i_2)

    await display.show(SomeComponent)

    input_1 = await display.page.wait_for_selector("#i_1")
    input_2 = await display.page.wait_for_selector("#i_2")

    await input_1.type("1")

    poll_value = poll(lambda: value.current)

    await poll_value.until_equals(1)

    await input_2.focus()
    await input_2.type("2")

    await poll_value.until_equals(12)


async def test_use_linked_inputs_ignore_empty(display: DisplayFixture):
    value = reactpy.Ref(None)

    @reactpy.component
    def SomeComponent():
        i_1, i_2 = reactpy.widgets.use_linked_inputs(
            [{"id": "i_1"}, {"id": "i_2"}],
            on_change=value.set_current,
            ignore_empty=True,
        )
        return reactpy.html.div(i_1, i_2)

    await display.show(SomeComponent)

    input_1 = await display.page.wait_for_selector("#i_1")
    input_2 = await display.page.wait_for_selector("#i_2")

    await input_1.type("1")

    poll_value = poll(lambda: value.current)

    await poll_value.until_equals("1")

    await input_2.focus()
    await input_2.press("Backspace")

    await poll_value.until_equals("1")

    await input_2.type("2")

    await poll_value.until_equals("2")