diff options
Diffstat (limited to 'packages/meshbay-hub/tests/test_welcome_layout_measured.py')
| -rw-r--r-- | packages/meshbay-hub/tests/test_welcome_layout_measured.py | 48 |
1 files changed, 36 insertions, 12 deletions
diff --git a/packages/meshbay-hub/tests/test_welcome_layout_measured.py b/packages/meshbay-hub/tests/test_welcome_layout_measured.py index da72f34..5a77cb9 100644 --- a/packages/meshbay-hub/tests/test_welcome_layout_measured.py +++ b/packages/meshbay-hub/tests/test_welcome_layout_measured.py @@ -40,34 +40,46 @@ def _items(*keys: str) -> str: def _page() -> str: li = _items + # The source row carries the full URL rather than the host name it shows: + # an unbreakable string longer than the real one. + docs = "".join( + f'<li><span class="welcome-docs-label">{_en(label)}</span>' + f'<span class="welcome-docs-links">{links}</span></li>' + for label, links in [ + ("welcome.docs_source", "https://git.meshbay.org/meshbay.git/about/"), + ("welcome.docs_user", f"{_en('welcome.docs_quickstart')} · {_en('welcome.docs_userguide')}"), + ("welcome.docs_devel", f"{_en('welcome.docs_design')} · {_en('welcome.docs_protocol')}"), + ]) return textwrap.dedent(f""" <nav class="nav"><div class="nav-left"><a class="nav-brand" href="#/">MeshBay</a></div> <div class="nav-right"><button class="nav-btn">Login</button></div></nav> <div class="layout"><main class="main"><div class="page-center"><div class="welcome"> - <div class="card login-card"><h2>Login</h2> + <div class="welcome-side"><div class="card login-card"><h2>Login</h2> <form><input type="text" placeholder="Username" /> <input type="password" placeholder="Password" /><button>Login</button></form> <div class="login-footer">No account? <a href="#/register">Register</a></div> <div class="login-footer"><a href="#/reset">Forgot your passphrase?</a></div> </div> + <div class="welcome-links"><a class="welcome-cta" href="#">{_en('welcome.download')}</a> + <a class="welcome-legal" href="#">{_en('welcome.legal')}</a></div></div> <section class="welcome-pitch"> <h1 class="welcome-title">{_en('welcome.title')}</h1> <p class="welcome-lead">{_en('welcome.lead')}</p> <ul class="welcome-apps">{li('welcome.app_chat', 'welcome.app_photos', 'welcome.app_media', 'welcome.app_video', 'welcome.app_music')}</ul> - <p>{_en('welcome.groups')}</p> - <p class="welcome-e2e"><span>{_en('welcome.e2e')}</span></p> + <h2 class="welcome-h">{_en('welcome.how_title')}</h2> + <ol class="welcome-steps">{li('welcome.step_home', 'welcome.step_anywhere', + 'welcome.step_share')}</ol> <h2 class="welcome-h">{_en('welcome.uses_title')}</h2> <ul class="welcome-uses">{li('welcome.use_chat', 'welcome.use_photos', 'welcome.use_media', 'welcome.use_apps')}</ul> - <div class="welcome-hub"><h2 class="welcome-h">{_en('welcome.hub_title')}</h2> - <p>{_en('welcome.hub_body')}</p> - <p class="welcome-hub-never">{_en('welcome.hub_never')}</p> - <ul class="welcome-never">{li('welcome.never_transit', 'welcome.never_stored', - 'welcome.never_e2e')}</ul> - <p class="welcome-hub-free">{_en('welcome.hub_free')}</p></div> - <div class="welcome-links"><a class="welcome-cta" href="#">{_en('welcome.download')}</a> - <a class="welcome-legal" href="#">{_en('welcome.legal')}</a></div> + <div class="welcome-private"><span class="welcome-private-icon"></span><div> + <h2 class="welcome-private-title">{_en('welcome.private_title')}</h2> + <p>{_en('welcome.private_body')}</p> + <ul class="welcome-badges">{li('welcome.badge_free', 'welcome.badge_open', + 'welcome.badge_no_ads', 'welcome.badge_no_tracking')}</ul></div></div> + <div class="welcome-docs"><h2 class="welcome-h">{_en('welcome.docs_title')}</h2> + <ul>{docs}</ul></div> </section> </div></div></main></div> """) @@ -76,7 +88,8 @@ def _page() -> str: PHONES = [320, 360, 412] DESKTOPS = [1100, 1440] WIDTHS = PHONES + [768] + DESKTOPS -SELECTORS = [".welcome", ".login-card", ".welcome-pitch"] +SELECTORS = [".welcome", ".login-card", ".welcome-pitch", ".welcome-steps", ".welcome-docs", + ".welcome-links"] @pytest.fixture(scope="module") @@ -140,3 +153,14 @@ def test_the_pair_is_centred_in_the_window(measured): middle = measured["1440"]["docScrollW"] / 2 centre = box["left"] + box["width"] / 2 assert abs(centre - middle) <= 2, f"the page is centred on x={centre}, not {middle}" + + +@pytest.mark.parametrize("width", WIDTHS) +def test_the_download_and_legal_links_sit_under_the_form(measured, width): + card, links = _box(measured, width, ".login-card"), _box(measured, width, ".welcome-links") + assert links["top"] >= card["top"] + card["height"], ( + f"at {width} px the links are not below the sign-in form") + assert links["top"] - (card["top"] + card["height"]) <= 40, ( + f"at {width} px the links are far below the form") + assert abs(links["left"] - card["left"]) <= 1 and abs(links["width"] - card["width"]) <= 1, ( + f"at {width} px the links are not aligned with the form") |