thepraandClaude Opus 5.5
4da6a398d7
daisyUI fills a ticked checkbox only for a colour variant, so without one it drew a tick on nothing: a checkbox without a colour now takes the primary colour, filled and raised like a button once ticked (an inset well while not), and a radio's dot is the primary colour. A file input's own button (Choose File, Browse…) is raised like the app's buttons instead of daisyUI's flat neutral block, and on a touch screen the file input is 44px tall like the other fields; it had stayed at its small 32px. Mobile/ControlsTests opens Settings' Data import/export on the narrowest phone, which the sweep (sections closed) never reached, and photographs it in both themes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
57 lines
3.1 KiB
C#
57 lines
3.1 KiB
C#
using decePubClient.E2E.Support;
|
|
|
|
using Microsoft.Playwright;
|
|
|
|
namespace decePubClient.E2E.Mobile
|
|
{
|
|
// Controls the sweep doesn't reach, since it measures pages with their sections closed: Settings' Data import/export
|
|
// opened on the narrowest phone, its file inputs and checkboxes thumb-sized and drawn like the rest of the app (a
|
|
// ticked box filled, not a tick on nothing), in both themes. Photos go to tests/e2e/out/mobile-controls/.
|
|
[Trait("Category", "Mobile")]
|
|
public sealed class ControlsTests(Browser browser)
|
|
{
|
|
static readonly Phone Phone = Phone.Narrow360;
|
|
static readonly string OutDir = Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "out", "mobile-controls");
|
|
|
|
[Fact]
|
|
public async Task Data_transfer_controls_are_thumb_sized_and_drawn_like_the_rest()
|
|
{
|
|
await using var session = await SignIn.As(browser, Pasture.Personas().First(), Phone);
|
|
var page = session.Page;
|
|
await Results.Cell("client.mobile.controls.data-transfer", "privapub", Phone.Key, async () =>
|
|
{
|
|
await page.GotoAsync($"{Pasture.Site}/settings");
|
|
var header = page.Locator(".collapse-title", new() { HasText = "Data import/export" }).First;
|
|
await header.TapAsync();
|
|
var archive = page.Locator("[data-archive]");
|
|
await archive.WaitForAsync(new() { Timeout = 30000 });
|
|
|
|
Fit.AssertTouchable(await Fit.Now(page, "[data-archive]"));
|
|
Fit.AssertTouchable(await Fit.Now(page, "[data-import]"));
|
|
|
|
// a ticked box is filled: daisyUI leaves it transparent unless a colour asks otherwise
|
|
var ticked = archive.Locator("input[type=checkbox]:checked").First;
|
|
var fill = await ticked.EvaluateAsync<string>("e => getComputedStyle(e).backgroundColor");
|
|
Assert.False(fill is "transparent" or "rgba(0, 0, 0, 0)", $"a ticked checkbox is drawn on nothing ({fill})");
|
|
// a file input is as tall as the other fields on a touch screen
|
|
foreach (var input in await page.Locator("[data-archive] input[type=file], [data-import] input[type=file]").AllAsync())
|
|
Assert.True((await input.BoundingBoxAsync())!.Height >= 44, $"a file input is {(await input.BoundingBoxAsync())!.Height}px tall: "
|
|
+ await input.EvaluateAsync<string>("e => { const s = getComputedStyle(e); return `${e.className} --size=${s.getPropertyValue('--size')} height=${s.height} coarse=${matchMedia('(pointer: coarse)').matches}`; }"));
|
|
// photos the size of the screen: one of an element taller than the screen makes Playwright resize the page,
|
|
// which drops the touch emulation for what comes after
|
|
Directory.CreateDirectory(OutDir);
|
|
foreach (var theme in new[] { "neo-dark", "neo-light" })
|
|
{
|
|
await page.EvaluateAsync("t => document.documentElement.setAttribute('data-theme', t)", theme);
|
|
foreach (var (part, what) in new[] { ("archive", "[data-archive-make]"), ("restore", "input[data-archive-file]"), ("csv", "[data-import]") })
|
|
{
|
|
await page.Locator(what).First.EvaluateAsync("e => e.scrollIntoView({ block: 'start' })");
|
|
await page.ScreenshotAsync(new() { Path = Path.Combine(OutDir, $"{part}-{theme}.png"), Animations = ScreenshotAnimations.Disabled });
|
|
}
|
|
}
|
|
await session.AssertGuards();
|
|
}, page);
|
|
}
|
|
}
|
|
}
|