1"""
2Tests for the <chives-image> web component.
3"""
4
5import json
6
7from playwright.sync_api import expect, Page
8import pytest
9
10from chives.media import create_video_entity
11
12
13@pytest.fixture(autouse=True)
14def setup_chives_video_component(page: Page) -> None:
15    """
16    Intercept the page, open a blank state, and load the chives-video
17    component.
18    """
19    page.goto("about:blank")
20
21    with open("javascript/chives-video.js") as f:
22        component_js = f.read()
23
24    page.evaluate(component_js)
25
26
27def test_render_basic_video(page: Page) -> None:
28    """
29    The <chives-image> component can render a basic video entity.
30    """
31    e = create_video_entity(
32        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
33        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
34    )
35    page.evaluate(
36        """
37        const elem = document.createElement("chives-video");
38        elem.videoEntity = %s;
39        document.body.appendChild(elem);
40        """
41        % json.dumps(e),
42    )
43
44    chives_elem = page.locator("chives-video")
45
46    video_elem = chives_elem.locator("video")
47    expect(video_elem).to_be_visible()
48    assert (
49        video_elem.get_attribute("src")
50        == "tests/fixtures/media/wings_tracking_shot.mp4"
51    )
52    assert video_elem.get_attribute("autoplay") is None
53    assert video_elem.get_attribute("preload") == "none"
54
55
56def test_video_with_autoplay(page: Page) -> None:
57    """
58    If a video entity has autoplay, then <chives-video> sets the autoplay
59    attribute on the <video> element.
60    """
61    e = create_video_entity(
62        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
63        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
64        autoplay=True,
65    )
66    page.evaluate(
67        """
68        const elem = document.createElement("chives-video");
69        elem.videoEntity = %s;
70        document.body.appendChild(elem);
71        """
72        % json.dumps(e),
73    )
74
75    chives_elem = page.locator("chives-video")
76
77    video_elem = chives_elem.locator("video")
78    expect(video_elem).to_be_visible()
79    assert video_elem.get_attribute("autoplay") == ""
80
81
82@pytest.mark.parametrize(
83    "width, height, orientation",
84    [
85        (100, 100, "square"),
86        (200, 100, "landscape"),
87        (100, 200, "portrait"),
88    ],
89)
90def test_sets_orientation(
91    page: Page, width: int, height: int, orientation: str
92) -> None:
93    """
94    The <chives-video> element sets a data-orientation attribute.
95    """
96    e = create_video_entity(
97        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
98        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
99    )
100    e["width"] = width
101    e["height"] = height
102
103    page.evaluate(
104        """
105        const elem = document.createElement("chives-video");
106        elem.videoEntity = %s;
107        document.body.appendChild(elem);
108        """
109        % json.dumps(e),
110    )
111
112    chives_elem = page.locator("chives-video")
113
114    wrapper_elem = chives_elem.locator("div")
115    expect(wrapper_elem).to_be_visible()
116    assert (wrapper_elem).get_attribute("data-orientation") == orientation
117
118
119def test_sets_subtitles(page: Page) -> None:
120    """
121    If a video entity has subtitles, then <chives-video> adds a <track>
122    element for every subtitle.
123    """
124    e = create_video_entity(
125        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
126        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
127    )
128    e["subtitles"] = [
129        {"label": "English", "path": "wings_tracking_shot.en.vtt"},
130        {"label": "French", "path": "wings_tracking_shot.FR.vtt"},
131    ]
132
133    page.evaluate(
134        """
135        const elem = document.createElement("chives-video");
136        elem.videoEntity = %s;
137        document.body.appendChild(elem);
138        """
139        % json.dumps(e),
140    )
141
142    chives_elem = page.locator("chives-video")
143
144    video_elem = chives_elem.locator("video")
145    assert video_elem.locator("track").count() == 2
146
147    first_track = video_elem.locator("track").first
148    assert first_track.get_attribute("label") == "English"
149    assert first_track.get_attribute("src") == "wings_tracking_shot.en.vtt"
150
151
152@pytest.mark.parametrize("subtitle_label", ["English (CC)"])
153def test_subtitle_labels(page: Page, subtitle_label: str) -> None:
154    """
155    A video can have subtitles whose labels don't neatly map to
156    HTML attribute names.
157    """
158    e = create_video_entity(
159        video_path="tests/fixtures/media/wings_tracking_shot.mp4",
160        poster_path="tests/fixtures/media/wings_tracking_shot.jpg",
161    )
162    e["subtitles"] = [
163        {"label": subtitle_label, "path": "wings_tracking_shot.en.vtt"},
164    ]
165
166    page.evaluate(
167        """
168        const elem = document.createElement("chives-video");
169        elem.videoEntity = %s;
170        document.body.appendChild(elem);
171        """
172        % json.dumps(e),
173    )
174
175    chives_elem = page.locator("chives-video")
176
177    video_elem = chives_elem.locator("video")
178    track_elem = video_elem.locator("track")
179    assert track_elem.get_attribute("label") == subtitle_label