1"""
2Tests for the <chives-image> web component.
3"""
4
5import json
6from pathlib import Path
7
8from playwright.sync_api import expect, Page
9import pytest
10
11from chives.media import create_image_entity
12
13
14@pytest.fixture(autouse=True)
15def setup_chives_image_component(page: Page) -> None:
16    """
17    Intercept the page, open a blank state, and load the chives-image
18    component.
19    """
20    page.goto("about:blank")
21
22    with open("javascript/chives-image.js") as f:
23        component_js = f.read()
24
25    page.evaluate(component_js)
26
27
28def test_render_basic_image(page: Page) -> None:
29    """
30    The <chives-image> component can render a basic image entity.
31    """
32    e = create_image_entity(path="tests/fixtures/media/470906.png")
33    page.evaluate(
34        """
35        const elem = document.createElement("chives-image");
36        elem.imageEntity = %s;
37        document.body.appendChild(elem);
38        """
39        % json.dumps(e),
40    )
41
42    chives_elem = page.locator("chives-image")
43
44    img_elem = chives_elem.locator("img")
45    expect(img_elem).to_be_visible()
46    assert (img_elem).get_attribute("src") == "tests/fixtures/media/470906.png"
47    assert (img_elem).get_attribute("alt") is None
48
49
50def test_render_thumbnail(page: Page, tmp_path: Path) -> None:
51    """
52    If you select the `thumbnail` variant, the <chives-image> component
53    uses the thumbnail URL.
54    """
55    e = create_image_entity(
56        path="tests/fixtures/media/470906.png",
57        thumbnail_config={
58            "out_dir": tmp_path,
59            "width": 100,
60        },
61    )
62    page.evaluate(
63        """
64        const elem = document.createElement("chives-image");
65        elem.imageEntity = %s;
66        elem.variant = 'thumbnail';
67        document.body.appendChild(elem);
68        """
69        % json.dumps(e),
70    )
71
72    chives_elem = page.locator("chives-image")
73
74    img_elem = chives_elem.locator("img")
75    expect(img_elem).to_be_visible()
76    assert (img_elem).get_attribute("src") == e["thumbnail_path"]
77
78
79def test_skips_thumbnail_if_unavailable(page: Page) -> None:
80    """
81    If you select the `thumbnail` variant but there's no thumbnail path
82    available, the component falls back to the full-sized path.
83    """
84    e = create_image_entity(path="tests/fixtures/media/470906.png")
85    page.evaluate(
86        """
87        const elem = document.createElement("chives-image");
88        elem.imageEntity = %s;
89        elem.variant = 'thumbnail';
90        document.body.appendChild(elem);
91        """
92        % json.dumps(e),
93    )
94
95    chives_elem = page.locator("chives-image")
96
97    img_elem = chives_elem.locator("img")
98    expect(img_elem).to_be_visible()
99    assert (img_elem).get_attribute("src") == "tests/fixtures/media/470906.png"
100
101
102def test_set_thumbnail_path(page: Page) -> None:
103    """
104    If you set an explicit thumbnailPath, the <chives-image> component
105    uses the thumbnail URL.
106    """
107    e = create_image_entity(path="tests/fixtures/media/470906.png")
108    page.evaluate(
109        """
110        const elem = document.createElement("chives-image");
111        elem.imageEntity = %s;
112        elem.thumbnailPath = 'https://example.com/thumbnail.png';
113        document.body.appendChild(elem);
114        """
115        % json.dumps(e),
116    )
117
118    chives_elem = page.locator("chives-image")
119
120    img_elem = chives_elem.locator("img")
121    expect(img_elem).to_be_visible()
122    assert (img_elem).get_attribute("src") == "https://example.com/thumbnail.png"
123
124
125def test_set_href(page: Page) -> None:
126    """
127    If you set an href, the <chives-image> component links to that URL.
128    """
129    e = create_image_entity(path="tests/fixtures/media/470906.png")
130    page.evaluate(
131        """
132        const elem = document.createElement("chives-image");
133        elem.imageEntity = %s;
134        elem.href = 'https://example.com/';
135        document.body.appendChild(elem);
136        """
137        % json.dumps(e),
138    )
139
140    chives_elem = page.locator("chives-image")
141
142    a_elem = chives_elem.locator("a")
143    expect(a_elem).to_be_visible()
144    assert (a_elem).get_attribute("href") == "https://example.com/"
145
146
147def test_sets_alt_text(page: Page) -> None:
148    """
149    If the image entity has alt text, it's added as an `alt` attribute
150    on the `<img>` element.
151    """
152    e = create_image_entity(
153        path="tests/fixtures/media/470906.png", alt_text="Some coloured red squares"
154    )
155    page.evaluate(
156        """
157        const elem = document.createElement("chives-image");
158        elem.imageEntity = %s;
159        document.body.appendChild(elem);
160        """
161        % json.dumps(e),
162    )
163
164    chives_elem = page.locator("chives-image")
165
166    img_elem = chives_elem.locator("img")
167    expect(img_elem).to_be_visible()
168    assert (img_elem).get_attribute("alt") == "Some coloured red squares"
169
170
171@pytest.mark.parametrize(
172    "path, orientation",
173    [
174        ("tests/fixtures/media/470906.png", "square"),
175        ("tests/fixtures/media/Landscape_0.jpg", "landscape"),
176        ("tests/fixtures/media/Portrait_0.jpg", "portrait"),
177    ],
178)
179def test_sets_orientation(page: Page, path: str, orientation: str) -> None:
180    """
181    The <chives-image> element sets a data-orientation attribute.
182    """
183    e = create_image_entity(path)
184    page.evaluate(
185        """
186        const elem = document.createElement("chives-image");
187        elem.imageEntity = %s;
188        document.body.appendChild(elem);
189        """
190        % json.dumps(e),
191    )
192
193    chives_elem = page.locator("chives-image")
194
195    wrapper_elem = chives_elem.locator("div")
196    expect(wrapper_elem).to_be_visible()
197    assert (wrapper_elem).get_attribute("data-orientation") == orientation
198
199
200def test_animated_gif(page: Page) -> None:
201    """
202    The <chives-image> element can render an animated GIF.
203    """
204    e = create_image_entity("tests/fixtures/media/electric_field.gif")
205    page.evaluate(
206        """
207        const elem = document.createElement("chives-image");
208        elem.imageEntity = %s;
209        document.body.appendChild(elem);
210        """
211        % json.dumps(e),
212    )
213
214    chives_elem = page.locator("chives-image")
215
216    img_elem = chives_elem.locator("img")
217    expect(img_elem).to_be_visible()
218    assert (img_elem).get_attribute("src") == e["path"]
219
220
221def test_animated_gif_with_video_thumbnail(page: Page, tmp_path: Path) -> None:
222    """
223    The <chives-image> element can render an animated GIF which has
224    an MP4 thumbnail.
225    """
226    e = create_image_entity(
227        "tests/fixtures/media/electric_field.gif",
228        thumbnail_config={
229            "out_dir": tmp_path,
230            "width": 25,
231        },
232    )
233    page.evaluate(
234        """
235        const elem = document.createElement("chives-image");
236        elem.imageEntity = %s;
237        elem.variant = 'thumbnail';
238        document.body.appendChild(elem);
239        """
240        % json.dumps(e),
241    )
242
243    chives_elem = page.locator("chives-image")
244
245    video_elem = chives_elem.locator("video")
246    expect(video_elem).to_be_visible()
247    assert (video_elem).get_attribute("src") == e["thumbnail_path"]