Move onto Livewire Material 2.0.0 and leave Tailwind behind
Livewire Material 2.0.0 aligns every component with Material 3 Expressive and carries no Tailwind anywhere, so SealShare drops tailwindcss and its Vite plugin and writes its views in the package's vocabulary: layout components (<x-pane>, <x-stack>, <x-row>, <x-grid>, <x-form>) with M3's spacing tokens, the md-type-*/md-ink-* text classes, and --md-sys-* tokens in its own small stylesheet. - resources/css/app.css opens with the package's layer order, imports foundation.css and the stylesheet of each component the views render, then the scheme, regenerated with the 2025 colour rules at M3's three contrast levels. The app's own rules follow, one section per view, on tokens and on M3's breakpoints (600/840/1200/1600px) only. - Every view is rewritten in that vocabulary while SealShare keeps the shape it had: the admin table, the admin settings, the recovery codes, the share options and the download page are cards, and their fields fill them rather than stopping at the 40rem bound a card already bounds. The user settings pages became cards too, to match the admin's, each with the sections that stand apart from its one subject — deleting the account, the recovery codes — in a card beside it. Material 3 decides how a component behaves, not whether a container survives: buttons keep their label's width, a form's actions end it, and each heading level keeps one type role. - The layouts clear the floating toolbar by the --material-bottom-toolbar the package publishes, and the snackbar clears it by itself. - The two-factor setup QR code comes from QrCodeService, so it keeps a white field and quiet zone in the dark theme and still scans. - Browse Files is a real button that opens the file input, reachable and visibly focused from the keyboard. - Tests: the design test scans views, JS, CSS and app/ and checks the CSS entry both ways (no missing, no unused import). New Chromium suites cover the frame, settings and admin, the share flow, and every page at M3's breakpoint edges (599/600, 839/840, 1199/1200, 1600px). The package's renamed data-md-* hooks replace the 1.x ones. - Boost's update brings the material-3 guideline and skill and drops the Tailwind skill. composer.json requires nonameweb/livewire-material ^2.0 from the Gitea repository, resolved at the 2.0.0 tag. The CHANGELOG records the move as 2.1.0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
461bc23f0a
commit
a88a052d9a
@@ -0,0 +1,271 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Setting;
|
||||
use App\Models\Share;
|
||||
use App\Models\User;
|
||||
use App\Services\ShareService;
|
||||
use Illuminate\Http\UploadedFile;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
/**
|
||||
* The walk: every page's chrome and content across M3's breakpoint edges — 599, 600, 839, 840,
|
||||
* 1199, 1200, 1600px, height 900, light theme — one visit per page, reused across widths by
|
||||
* resizing the same page rather than revisiting it. FrameTest.php and SettingsAndAdminTest.php
|
||||
* already assert the app-main margin, the auth card's alignment and the stat grid's column count
|
||||
* at their own boundary for the pages they cover; this file re-asserts those three plus the
|
||||
* section navigation's picker/tab-bar switch (untested until now), and walks every page group A/B/C
|
||||
* left unchecked at a breakpoint: the rest of the auth flow, the setup wizard, the system password
|
||||
* prompt, every settings page and a 404.
|
||||
*/
|
||||
beforeEach(function () {
|
||||
config(['session.driver' => 'file']);
|
||||
Storage::fake('shares');
|
||||
});
|
||||
|
||||
/**
|
||||
* Resize $page to each of M3's seven edge widths and assert what must hold at all of them: no
|
||||
* horizontal overflow, exactly one <main>, no skipped heading level, and — scrolled to the bottom —
|
||||
* the floating toolbar covers no interactive element and no visible text. $buttonSelector, when
|
||||
* given, is also asserted narrower than the form it sits in (M3: a button's width is "dynamic to
|
||||
* fit label", never stretched). $atEachWidth, when given, runs after those checks with the page and
|
||||
* the current width, for a caller's own edge-specific assertions without a resize of their own.
|
||||
*/
|
||||
function walkBreakpoints($page, ?string $buttonSelector = null, ?callable $atEachWidth = null): void
|
||||
{
|
||||
foreach ([599, 600, 839, 840, 1199, 1200, 1600] as $width) {
|
||||
$page->resize($width, 900);
|
||||
|
||||
$metrics = $page->script(<<<'JS'
|
||||
(() => {
|
||||
const overflowOk = document.documentElement.scrollWidth <= window.innerWidth + 1;
|
||||
const mainCount = document.querySelectorAll('main').length;
|
||||
|
||||
const levels = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]
|
||||
.filter((h) => h.offsetParent !== null)
|
||||
.map((h) => parseInt(h.tagName.slice(1), 10));
|
||||
let seen = 0;
|
||||
let headingSkipped = false;
|
||||
for (const level of levels) {
|
||||
if (level > seen + 1) {
|
||||
headingSkipped = true;
|
||||
break;
|
||||
}
|
||||
seen = Math.max(seen, level);
|
||||
}
|
||||
|
||||
window.scrollTo(0, document.body.scrollHeight);
|
||||
|
||||
const toolbar = document.querySelector('[data-test="app-toolbar"]');
|
||||
let toolbarClear = true;
|
||||
if (toolbar) {
|
||||
const t = toolbar.getBoundingClientRect();
|
||||
const clearOf = (r) => r.right <= t.left + 0.5 || r.left >= t.right - 0.5
|
||||
|| r.bottom <= t.top + 0.5 || r.top >= t.bottom - 0.5;
|
||||
|
||||
const interactive = [...document.querySelectorAll('a, button, input, select, textarea, [tabindex]')];
|
||||
const textLeaves = [...document.querySelectorAll('*')]
|
||||
.filter((el) => el.children.length === 0 && el.textContent.trim().length > 0);
|
||||
|
||||
toolbarClear = [...new Set([...interactive, ...textLeaves])]
|
||||
.filter((el) => !toolbar.contains(el))
|
||||
.every((el) => {
|
||||
const r = el.getBoundingClientRect();
|
||||
return (r.width === 0 || r.height === 0) || clearOf(r);
|
||||
});
|
||||
}
|
||||
|
||||
return { overflowOk, mainCount, headingSkipped, toolbarClear };
|
||||
})()
|
||||
JS);
|
||||
|
||||
expect($metrics['overflowOk'])->toBeTrue();
|
||||
expect($metrics['mainCount'])->toBe(1);
|
||||
expect($metrics['headingSkipped'])->toBeFalse();
|
||||
expect($metrics['toolbarClear'])->toBeTrue();
|
||||
|
||||
if ($buttonSelector !== null) {
|
||||
$fits = $page->script("(() => {
|
||||
const button = document.querySelector('{$buttonSelector}');
|
||||
if (! button) { return null; }
|
||||
const form = button.closest('[data-md-form]') ?? button.parentElement;
|
||||
const formRect = form.getBoundingClientRect();
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
return formRect.width === 0 ? null : buttonRect.width < formRect.width - 0.5;
|
||||
})()");
|
||||
|
||||
if ($fits !== null) {
|
||||
expect($fits)->toBeTrue();
|
||||
}
|
||||
}
|
||||
|
||||
if ($atEachWidth !== null) {
|
||||
$atEachWidth($page, $width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
test('the upload page holds at every breakpoint, guest and admin', function (?string $as) {
|
||||
if ($as === 'admin') {
|
||||
$this->actingAs(User::factory()->admin()->create());
|
||||
}
|
||||
|
||||
$margins = [];
|
||||
|
||||
walkBreakpoints(ready(visit('/upload')), null, function ($page, $width) use (&$margins) {
|
||||
if (in_array($width, [599, 600], true)) {
|
||||
$margins[$width] = $page->script("(() => {
|
||||
const style = getComputedStyle(document.querySelector('[data-md-pane-body]'));
|
||||
return { left: parseFloat(style.paddingLeft), right: parseFloat(style.paddingRight) };
|
||||
})()");
|
||||
}
|
||||
});
|
||||
|
||||
// M3's margin: 16px below `medium` (600px), 24px from it (foundations.md § Layout → Breakpoints).
|
||||
expect($margins[599]['left'])->toEqualWithDelta(16, 1);
|
||||
expect($margins[599]['right'])->toEqualWithDelta(16, 1);
|
||||
expect($margins[600]['left'])->toEqualWithDelta(24, 1);
|
||||
expect($margins[600]['right'])->toEqualWithDelta(24, 1);
|
||||
})->with([
|
||||
'guest' => [null],
|
||||
'admin' => ['admin'],
|
||||
]);
|
||||
|
||||
test('the share-created page holds at every breakpoint', function () {
|
||||
$share = app(ShareService::class)->createShare(
|
||||
[['file' => UploadedFile::fake()->create('holiday-photos.zip', 100), 'relativePath' => null]],
|
||||
[],
|
||||
);
|
||||
|
||||
walkBreakpoints(ready(visit(route('share.created', $share, false))));
|
||||
});
|
||||
|
||||
test('the download page holds locked and unlocked at every breakpoint', function () {
|
||||
$share = app(ShareService::class)->createShare(
|
||||
[['file' => UploadedFile::fake()->create('holiday-photos.zip', 100), 'relativePath' => null]],
|
||||
['password' => 'let-me-in'],
|
||||
);
|
||||
|
||||
$page = ready(visit(route('share.download', $share, false)));
|
||||
|
||||
walkBreakpoints($page, 'button[type="submit"]');
|
||||
|
||||
$page->resize(1280, 900);
|
||||
$page->type('input[type="password"]', 'let-me-in')->press('Unlock');
|
||||
$page->wait(1);
|
||||
|
||||
walkBreakpoints($page);
|
||||
});
|
||||
|
||||
test('the auth flow pages hold at every breakpoint', function (Closure $url, string $buttonSelector) {
|
||||
walkBreakpoints(ready(visit($url())), $buttonSelector);
|
||||
})->with([
|
||||
'login' => [fn () => route('login', [], false), '[data-test="login-button"]'],
|
||||
'forgot password' => [fn () => route('password.request', [], false), '[data-test="email-password-reset-link-button"]'],
|
||||
'reset password' => [fn () => route('password.reset', ['token' => 'a-fake-token', 'email' => 'test@example.com'], false), '[data-test="reset-password-button"]'],
|
||||
]);
|
||||
|
||||
test('the two-factor challenge page holds at every breakpoint', function () {
|
||||
$user = User::factory()->create();
|
||||
$this->withSession(['login.id' => $user->getKey()]);
|
||||
|
||||
walkBreakpoints(ready(visit(route('two-factor.login', [], false))), 'button[type="submit"]');
|
||||
});
|
||||
|
||||
test('the email verification prompt holds at every breakpoint', function () {
|
||||
$this->actingAs(User::factory()->unverified()->create());
|
||||
|
||||
walkBreakpoints(ready(visit(route('verification.notice', [], false))));
|
||||
});
|
||||
|
||||
test('the password confirmation page holds at every breakpoint', function () {
|
||||
$this->actingAs(User::factory()->create());
|
||||
|
||||
walkBreakpoints(ready(visit(route('password.confirm', [], false))), '[data-test="confirm-password-button"]');
|
||||
});
|
||||
|
||||
test('the setup wizard holds at every breakpoint', function () {
|
||||
// EnsureSetupComplete only renders /setup while no admin exists; Pest.php's beforeEach creates
|
||||
// one for every test, so this one removes it first.
|
||||
User::query()->where('is_admin', true)->delete();
|
||||
|
||||
walkBreakpoints(ready(visit(route('setup', [], false))), 'button[type="submit"]');
|
||||
});
|
||||
|
||||
test('the system password prompt holds at every breakpoint', function () {
|
||||
Setting::set('system_password', bcrypt('secret'));
|
||||
|
||||
walkBreakpoints(ready(visit(route('system-password', [], false))), 'button[type="submit"]');
|
||||
});
|
||||
|
||||
test('the settings pages hold at every breakpoint', function (string $url, ?string $buttonSelector) {
|
||||
$user = User::factory()->create();
|
||||
$this->actingAs($user)->withSession(['auth.password_confirmed_at' => time()]);
|
||||
|
||||
$navSwitch = [];
|
||||
|
||||
walkBreakpoints(ready(visit($url)), $buttonSelector, function ($page, $width) use (&$navSwitch) {
|
||||
if (in_array($width, [599, 600], true)) {
|
||||
$navSwitch[$width] = $page->script("(() => {
|
||||
const picker = document.querySelector('[data-md-section-nav-picker]');
|
||||
const nav = document.querySelector('[data-md-section-nav] > nav');
|
||||
return {
|
||||
pickerVisible: !!picker && getComputedStyle(picker).display !== 'none',
|
||||
navVisible: !!nav && getComputedStyle(nav).display !== 'none',
|
||||
};
|
||||
})()");
|
||||
}
|
||||
});
|
||||
|
||||
// <x-section-nav>: a picker below `medium` (600px), M3's secondary tabs from it (section-nav.css).
|
||||
expect($navSwitch[599]['pickerVisible'])->toBeTrue();
|
||||
expect($navSwitch[599]['navVisible'])->toBeFalse();
|
||||
expect($navSwitch[600]['pickerVisible'])->toBeFalse();
|
||||
expect($navSwitch[600]['navVisible'])->toBeTrue();
|
||||
})->with([
|
||||
'profile' => ['/settings/profile', '[data-test="update-profile-button"]'],
|
||||
'password' => ['/settings/password', '[data-test="update-password-button"]'],
|
||||
'appearance' => ['/settings/appearance', null],
|
||||
'two-factor' => ['/settings/two-factor', null],
|
||||
]);
|
||||
|
||||
test('the admin dashboard holds at every breakpoint', function () {
|
||||
$this->actingAs(User::factory()->admin()->create());
|
||||
Share::factory()->count(3)->create();
|
||||
|
||||
$columns = [];
|
||||
|
||||
walkBreakpoints(ready(visit('/admin/dashboard')), null, function ($page, $width) use (&$columns) {
|
||||
if (in_array($width, [839, 840], true)) {
|
||||
$columns[$width] = $page->script("(() => {
|
||||
const rects = [...document.querySelectorAll('[data-md-stat]')].map((el) => el.getBoundingClientRect());
|
||||
return new Set(rects.map((r) => Math.round(r.left))).size;
|
||||
})()");
|
||||
}
|
||||
});
|
||||
|
||||
// <x-grid :columns="['compact' => 2, 'expanded' => 4]">: 2 columns below `expanded` (840px), 4 from it.
|
||||
expect($columns[839])->toBe(2);
|
||||
expect($columns[840])->toBe(4);
|
||||
});
|
||||
|
||||
test('the admin settings page holds at every breakpoint', function () {
|
||||
$this->actingAs(User::factory()->admin()->create());
|
||||
|
||||
walkBreakpoints(ready(visit('/admin/settings')), '[data-test="save-settings"]');
|
||||
});
|
||||
|
||||
test('a 404 holds at every breakpoint', function () {
|
||||
// No resources/views/errors/404.blade.php exists in SealShare, but that is not Laravel's own
|
||||
// minimal fallback either: NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider appends
|
||||
// its own error-view root to `view.paths`, so `errors::404` resolves to the package's own
|
||||
// resources/views/error-pages/errors/404.blade.php first (verified by rendering the route
|
||||
// in-process: the response carries `data-md-error-page`) — a whole document with its own
|
||||
// <main data-md-error-page>, one <h1 data-md-error-headline> and no toolbar (it does not include
|
||||
// partials.toolbar), never Alpine or Livewire, so ready() does not apply; a network-idle wait
|
||||
// stands in for it.
|
||||
config(['app.debug' => false]);
|
||||
|
||||
$page = visit('/this-page-does-not-exist-at-all')->waitForEvent('networkidle');
|
||||
|
||||
walkBreakpoints($page);
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
/**
|
||||
* Group A's frame: the auth layout's centred card and the app layout's main column
|
||||
* (resources/views/layouts/*, partials/*, components/*), regardless of which page renders inside
|
||||
* them — a page's own content may still be unstyled (a later batch), but the chrome around it is
|
||||
* group A's and must hold its geometry.
|
||||
*/
|
||||
beforeEach(function () {
|
||||
config(['session.driver' => 'file']);
|
||||
Storage::fake('shares');
|
||||
});
|
||||
|
||||
test('the sign-in page has exactly one main landmark and never scrolls sideways', function () {
|
||||
foreach ([[393, 852], [1280, 800]] as [$width, $height]) {
|
||||
ready(visit('/login')->resize($width, $height))
|
||||
->assertScript("document.querySelectorAll('main').length === 1")
|
||||
->assertScript('document.documentElement.scrollWidth <= window.innerWidth');
|
||||
}
|
||||
});
|
||||
|
||||
test('the sign-in card is capped at 28rem and sits 16px from each edge on a phone', function () {
|
||||
$page = ready(visit('/login')->resize(393, 852));
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const rect = document.querySelector('.auth-card').getBoundingClientRect();
|
||||
return { left: rect.left, right: window.innerWidth - rect.right, width: rect.width };
|
||||
})()");
|
||||
|
||||
expect($metrics['left'])->toEqualWithDelta(16, 1);
|
||||
expect($metrics['right'])->toEqualWithDelta(16, 1);
|
||||
|
||||
$page->resize(1280, 800);
|
||||
|
||||
$capped = $page->script("(() => {
|
||||
const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
return document.querySelector('.auth-card').getBoundingClientRect().width <= 28 * remPx + 0.5;
|
||||
})()");
|
||||
|
||||
expect($capped)->toBeTrue();
|
||||
});
|
||||
|
||||
test('the sign-in card top-aligns below 600px and centres from 600px', function () {
|
||||
// The gap above the card and the gap below it, inside .auth-main's own content box (between
|
||||
// its top and bottom padding) — equal gaps is the geometric definition of "centred", and it
|
||||
// needs no assumption about the padding's pixel values, only that they exist on both edges.
|
||||
$gaps = fn (int $width) => ready(visit('/login')->resize($width, 900))->script("(() => {
|
||||
const main = document.querySelector('.auth-main');
|
||||
const mainStyle = getComputedStyle(main);
|
||||
const mainRect = main.getBoundingClientRect();
|
||||
const cardRect = document.querySelector('.auth-card').getBoundingClientRect();
|
||||
const contentTop = mainRect.top + parseFloat(mainStyle.paddingTop);
|
||||
const contentBottom = mainRect.bottom - parseFloat(mainStyle.paddingBottom);
|
||||
return { above: cardRect.top - contentTop, below: contentBottom - cardRect.bottom };
|
||||
})()");
|
||||
|
||||
$narrow = $gaps(599);
|
||||
// Below 600px the card is flush against the top of the content box: no extra gap above it.
|
||||
expect($narrow['above'])->toBeLessThan(2);
|
||||
expect($narrow['below'])->toBeGreaterThan($narrow['above'] + 10);
|
||||
|
||||
$wide = $gaps(600);
|
||||
// From 600px the gap above equals the gap below: the card is vertically centred.
|
||||
expect($wide['above'])->toEqualWithDelta($wide['below'], 2);
|
||||
expect($wide['above'])->toBeGreaterThan($narrow['above'] + 10);
|
||||
});
|
||||
|
||||
test('the sign-in submit button is end-aligned at its own width, not stretched', function () {
|
||||
$page = ready(visit('/login')->resize(393, 852));
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const form = document.querySelector('[data-md-form]').getBoundingClientRect();
|
||||
const button = document.querySelector('[data-test=\"login-button\"]').getBoundingClientRect();
|
||||
return { formWidth: form.width, formRight: form.right, buttonWidth: button.width, buttonRight: button.right };
|
||||
})()");
|
||||
|
||||
expect($metrics['buttonWidth'])->toBeLessThan($metrics['formWidth']);
|
||||
expect($metrics['buttonRight'])->toEqualWithDelta($metrics['formRight'], 1);
|
||||
});
|
||||
|
||||
test('the floating toolbar never covers the sign-in card once scrolled to the bottom', function () {
|
||||
$page = ready(visit('/login')->resize(393, 667));
|
||||
|
||||
$page->script('window.scrollTo(0, document.body.scrollHeight)');
|
||||
|
||||
$overlap = $page->script("(() => {
|
||||
const card = document.querySelector('.auth-card').getBoundingClientRect();
|
||||
const toolbar = document.querySelector('[data-test=\"app-toolbar\"]').getBoundingClientRect();
|
||||
return card.bottom - toolbar.top;
|
||||
})()");
|
||||
|
||||
expect($overlap)->toBeLessThanOrEqual(0.5);
|
||||
});
|
||||
|
||||
test("a snackbar clears SealShare's floating toolbar", function () {
|
||||
$page = ready(visit('/login')->resize(393, 852));
|
||||
|
||||
$page->script("window.materialToast('Link copied', { timeout: 10000 })");
|
||||
$page->wait(0.5);
|
||||
|
||||
$gap = $page->script("(() => {
|
||||
const snackbar = document.querySelector('[data-md-toast-snackbar]').getBoundingClientRect();
|
||||
const toolbar = document.querySelector('[data-test=\"app-toolbar\"]').getBoundingClientRect();
|
||||
return toolbar.top - snackbar.bottom;
|
||||
})()");
|
||||
|
||||
expect($gap)->toBeGreaterThanOrEqual(16 - 0.5);
|
||||
});
|
||||
|
||||
test("the app layout's main column is capped at 64rem and centred on a wide window", function () {
|
||||
$page = ready(visit('/upload')->resize(1600, 900));
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const rect = document.querySelector('.app-main').getBoundingClientRect();
|
||||
return {
|
||||
width: rect.width,
|
||||
cap: 64 * remPx,
|
||||
left: rect.left,
|
||||
right: window.innerWidth - rect.right,
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($metrics['width'])->toBeLessThanOrEqual($metrics['cap'] + 0.5);
|
||||
expect($metrics['left'])->toEqualWithDelta($metrics['right'], 1);
|
||||
});
|
||||
|
||||
test("the app layout's content keeps M3's margin at 599px and 600px", function () {
|
||||
// Below the 64rem cap the pane spans the full window (no centring offset), so the padding
|
||||
// it declares on its body is exactly the gap between its content and the window's edge.
|
||||
$margins = fn (int $width) => ready(visit('/upload')->resize($width, 900))->script("(() => {
|
||||
const main = document.querySelector('.app-main').getBoundingClientRect();
|
||||
const style = getComputedStyle(document.querySelector('[data-md-pane-body]'));
|
||||
return {
|
||||
spansWindow: main.left === 0 && Math.abs(main.right - window.innerWidth) < 0.5,
|
||||
left: parseFloat(style.paddingLeft),
|
||||
right: parseFloat(style.paddingRight),
|
||||
};
|
||||
})()");
|
||||
|
||||
$narrow = $margins(599);
|
||||
expect($narrow['spansWindow'])->toBeTrue();
|
||||
expect($narrow['left'])->toEqualWithDelta(16, 1);
|
||||
expect($narrow['right'])->toEqualWithDelta(16, 1);
|
||||
|
||||
$wide = $margins(600);
|
||||
expect($wide['spansWindow'])->toBeTrue();
|
||||
expect($wide['left'])->toEqualWithDelta(24, 1);
|
||||
expect($wide['right'])->toEqualWithDelta(24, 1);
|
||||
});
|
||||
@@ -8,15 +8,6 @@ use Illuminate\Http\UploadedFile;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use NoNameWeb\LivewireMaterial\Support\Scheme;
|
||||
|
||||
/**
|
||||
* A page of SealShare, once it can be used: loaded, with Alpine and Livewire started.
|
||||
*/
|
||||
function ready(mixed $page): mixed
|
||||
{
|
||||
return $page->waitForEvent('networkidle')
|
||||
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
// Sessions have to outlive a request here: a sign-in, a verified share password.
|
||||
config(['session.driver' => 'file']);
|
||||
@@ -26,7 +17,7 @@ beforeEach(function () {
|
||||
test('files dragged over the drop zone turn its shape into a burst', function () {
|
||||
$page = ready(visit('/upload'));
|
||||
|
||||
$burst = "getComputedStyle(document.querySelectorAll('[data-test=drop-zone] span.absolute')[1]).opacity";
|
||||
$burst = "getComputedStyle(document.querySelector('[data-test=drop-zone-burst]')).opacity";
|
||||
|
||||
$page->assertScript("{$burst} === '0'");
|
||||
|
||||
@@ -51,7 +42,7 @@ test('a new share\'s link can be copied from the page the upload leads to', func
|
||||
|
||||
$page->script("window.eval(\"Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText: async (text) => { window.copied = text } } })\")");
|
||||
|
||||
$page->click('[data-field-copy]')
|
||||
$page->click('[data-md-field-copy]')
|
||||
->assertScript("typeof window.copied === 'string' && window.copied.includes('/s/')")
|
||||
->assertSee('Copied to the clipboard');
|
||||
});
|
||||
@@ -63,7 +54,9 @@ test('a new share\'s QR code opens in a dialog and saves as a PNG', function ()
|
||||
|
||||
$page->click('[data-test="show-qr-code"]')
|
||||
->assertScript("document.querySelector('[data-test=\"qr-code-dialog\"]').open")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-qr-code]')).backgroundColor === 'rgb(255, 255, 255)'")
|
||||
// The white field and quiet zone are baked into the SVG itself (App\Services\QrCodeService),
|
||||
// not a background colour on its container, so a scanner keeps its contrast in dark mode too.
|
||||
->assertScript("document.querySelector('[data-qr-code] svg rect').getAttribute('fill') === '#ffffff'")
|
||||
->assertScript("document.querySelector('[data-qr-code] svg').getBoundingClientRect().width > 200")
|
||||
->assertSee('Recipients also need the password.');
|
||||
|
||||
@@ -150,7 +143,7 @@ test('a first visit follows the system theme, and Appearance switches it', funct
|
||||
|
||||
$page = ready(visit('/settings/appearance')->inDarkMode());
|
||||
|
||||
$page->click('[data-theme-option="light"]')
|
||||
$page->click('label:has(input[name="material-theme"][value="light"])')
|
||||
->assertScript("document.documentElement.dataset.theme === 'light'")
|
||||
->assertScript("localStorage.getItem('sealshare-theme') === 'light'");
|
||||
});
|
||||
@@ -161,7 +154,7 @@ test('an admin previews a colour profile, saves it, and every page wears it', fu
|
||||
$page = ready(visit('/admin/settings'));
|
||||
|
||||
$page->assertScript("document.documentElement.getAttribute('data-scheme') === 'indigo'")
|
||||
->click('[data-test="color-profile"] [data-scheme-option="teal"]')
|
||||
->click('[data-test="color-profile"] [data-md-scheme-picker-option="teal"]')
|
||||
->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'");
|
||||
|
||||
expect(Setting::get('color_profile'))->toBeNull();
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Share;
|
||||
use App\Models\User;
|
||||
|
||||
/**
|
||||
* Group B's settings and admin pages: the geometry and behaviour the review changed without a
|
||||
* browser (resources/views/pages/settings/*, two-factor/recovery-codes.blade.php,
|
||||
* resources/views/livewire/admin/*). Group A's frame is tests/Browser/FrameTest.php; the share
|
||||
* flow is not yet rewritten and stays out of scope here.
|
||||
*
|
||||
* Out of scope by a later decision (M3's guidance over 1.x's look, reworked in this batch): form
|
||||
* actions' placement/width, the shares table's relation to its card, and the admin settings
|
||||
* cards' grouping — now end-aligned actions, a card-free shares section and headed/divided
|
||||
* settings sections respectively. Nothing here asserts any of those; a browser run follows this
|
||||
* review.
|
||||
*/
|
||||
beforeEach(function () {
|
||||
config(['session.driver' => 'file']);
|
||||
});
|
||||
|
||||
test('the profile form keeps the Email field clear of the Name label above it', function () {
|
||||
$user = User::factory()->create();
|
||||
$this->actingAs($user);
|
||||
|
||||
$page = ready(visit('/settings/profile')->resize(1280, 800));
|
||||
// Livewire fills the fields' values a beat after first paint, and the label's float is a CSS
|
||||
// transition off that: wait it out, or the label is still measured at its unfloated rest position.
|
||||
$page->wait(1);
|
||||
|
||||
$gap = $page->script("(() => {
|
||||
const fields = document.querySelectorAll('[data-md-input]');
|
||||
const nameBox = fields[0].querySelector('[data-md-field-box]').getBoundingClientRect();
|
||||
const emailLabel = fields[1].querySelector('[data-md-field-label]').getBoundingClientRect();
|
||||
return emailLabel.top - nameBox.bottom;
|
||||
})()");
|
||||
|
||||
// The Email field's floated label sits above its own box; it must clear the Name field's box
|
||||
// above it rather than overlap it (M3's 16px form gap is exactly what makes room for this).
|
||||
expect($gap)->toBeGreaterThan(-0.5);
|
||||
});
|
||||
|
||||
test('two-factor setup draws a scannable QR code and a visible manual key in dark theme', function () {
|
||||
$user = User::factory()->create();
|
||||
$this->actingAs($user)->withSession(['auth.password_confirmed_at' => time()]);
|
||||
|
||||
$page = ready(visit('/settings/two-factor')->inDarkMode()->resize(1280, 800));
|
||||
|
||||
$page->click('button:has-text("Enable 2FA")');
|
||||
$page->wait(1);
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const box = document.querySelector('.settings-two-factor-qr').getBoundingClientRect();
|
||||
const rect = document.querySelector('.settings-two-factor-qr svg rect');
|
||||
const keyInput = document.querySelector('dialog[open] input[readonly]');
|
||||
const keyBox = keyInput ? keyInput.getBoundingClientRect() : null;
|
||||
return {
|
||||
width: box.width,
|
||||
height: box.height,
|
||||
rem: remPx,
|
||||
fill: rect ? rect.getAttribute('fill') : null,
|
||||
keyVisible: !!keyInput && !!keyBox && keyBox.width > 0 && getComputedStyle(keyInput).visibility !== 'hidden',
|
||||
keyFilled: !!keyInput && keyInput.value.length > 0,
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($metrics['width'])->toEqualWithDelta(16 * $metrics['rem'], 1);
|
||||
expect($metrics['height'])->toEqualWithDelta(16 * $metrics['rem'], 1);
|
||||
expect(strtolower((string) $metrics['fill']))->toBe('#ffffff');
|
||||
expect($metrics['keyVisible'])->toBeTrue();
|
||||
expect($metrics['keyFilled'])->toBeTrue();
|
||||
});
|
||||
|
||||
test('the admin dashboard sizes its stat grid by width and never scrolls sideways on a phone', function () {
|
||||
$admin = User::factory()->admin()->create();
|
||||
Share::factory()->count(3)->create();
|
||||
$this->actingAs($admin);
|
||||
|
||||
$columns = fn (int $width) => ready(visit('/admin/dashboard')->resize($width, 900))->script("(() => {
|
||||
const rects = [...document.querySelectorAll('[data-md-stat]')].map((el) => el.getBoundingClientRect());
|
||||
return {
|
||||
rows: new Set(rects.map((r) => Math.round(r.top))).size,
|
||||
cols: new Set(rects.map((r) => Math.round(r.left))).size,
|
||||
};
|
||||
})()");
|
||||
|
||||
$narrow = $columns(839);
|
||||
expect($narrow['rows'])->toBe(2);
|
||||
expect($narrow['cols'])->toBe(2);
|
||||
|
||||
$wide = $columns(840);
|
||||
expect($wide['rows'])->toBe(1);
|
||||
expect($wide['cols'])->toBe(4);
|
||||
|
||||
// The table is wide enough on a phone to need its own horizontal scroll (so this is not a
|
||||
// vacuous check); the page itself must never pick that scroll up.
|
||||
$phone = ready(visit('/admin/dashboard')->resize(393, 852));
|
||||
|
||||
$overflow = $phone->script("(() => {
|
||||
const scroller = document.querySelector('.admin-shares-table-scroll');
|
||||
return {
|
||||
tableNeedsScroll: scroller.scrollWidth > scroller.clientWidth + 1,
|
||||
pageScrollWidth: document.documentElement.scrollWidth,
|
||||
windowWidth: window.innerWidth,
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($overflow['tableNeedsScroll'])->toBeTrue();
|
||||
expect($overflow['pageScrollWidth'])->toBeLessThanOrEqual($overflow['windowWidth']);
|
||||
});
|
||||
|
||||
test('deleting the account opens its dialog onto a reachable password field, and Escape closes it', function () {
|
||||
$user = User::factory()->create();
|
||||
$this->actingAs($user);
|
||||
|
||||
$page = ready(visit('/settings/profile')->resize(1280, 800));
|
||||
|
||||
$page->click('[data-test=delete-user-button]');
|
||||
$page->wait(0.5);
|
||||
|
||||
$state = $page->script("(() => {
|
||||
const dialog = document.querySelector('dialog[open]');
|
||||
const input = dialog ? dialog.querySelector('input[type=password]') : null;
|
||||
return {
|
||||
open: !!dialog,
|
||||
reachable: !!input && (document.activeElement === input || (input.tabIndex !== -1 && !input.disabled)),
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($state['open'])->toBeTrue();
|
||||
expect($state['reachable'])->toBeTrue();
|
||||
|
||||
$page->keys('dialog[open] input[type=password]', 'Escape');
|
||||
$page->wait(0.5);
|
||||
|
||||
$page->assertScript("document.querySelector('dialog[open]') === null");
|
||||
});
|
||||
@@ -0,0 +1,192 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Share;
|
||||
use App\Models\User;
|
||||
use App\Services\ShareService;
|
||||
use Illuminate\Http\UploadedFile;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
|
||||
/**
|
||||
* The share flow (upload, share created, share download) and today's rework of it, plus the
|
||||
* settings/admin buttons and sections reworked alongside it — all changed since the last browser
|
||||
* run (148ff38) without one. tests/Browser/SealShareTest.php, FrameTest.php and
|
||||
* SettingsAndAdminTest.php already cover the flow's existing behaviour; this file adds what that
|
||||
* rework introduced and does not re-assert what those already do (the copy-to-clipboard toast, the
|
||||
* dragover burst, the QR code's fill and PNG export).
|
||||
*/
|
||||
beforeEach(function () {
|
||||
config(['session.driver' => 'file']);
|
||||
Storage::fake('shares');
|
||||
});
|
||||
|
||||
test('tab reaches Browse Files with its focus ring, and Enter or Space opens the file picker', function () {
|
||||
$page = ready(visit('/upload'));
|
||||
|
||||
// A spy, not a real dialog: Playwright would otherwise have to field a native file chooser.
|
||||
$page->script("window.eval(\"window.__fileInputClicks = 0; HTMLInputElement.prototype.click = function () { if (this.type === 'file') { window.__fileInputClicks++ } }\")");
|
||||
|
||||
// "body" alone is not a CSS-explicit selector to this plugin's guesser (no special chars) and
|
||||
// falls back to a text search, which never matches and times out; "html > body" is explicit and
|
||||
// focuses nothing new (the body takes no tabindex), so the Tab lands where a fresh page load
|
||||
// would send it: the first tabbable element.
|
||||
$page->keys('html > body', 'Tab');
|
||||
|
||||
$page->assertScript("document.activeElement.matches('[data-md-button]') && document.activeElement.textContent.trim() === 'Browse Files'");
|
||||
|
||||
$ring = $page->script('getComputedStyle(document.activeElement).outlineStyle');
|
||||
expect($ring)->toBe('solid');
|
||||
|
||||
$page->keys(':focus', 'Enter');
|
||||
$page->assertScript('window.__fileInputClicks === 1');
|
||||
|
||||
$page->keys(':focus', 'Space');
|
||||
$page->assertScript('window.__fileInputClicks === 2')
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
test('the selected files list avoids horizontal overflow once files are chosen', function () {
|
||||
// Pest's in-process browser server never parses the multipart body a real file selection sends
|
||||
// (vendor/pestphp/pest-plugin-browser/src/Drivers/LaravelHttpServer.php:257, `[], // @TODO
|
||||
// files...`) — Livewire's temporary-upload request has nowhere to land, so a selected file can
|
||||
// never reach this list to be measured. tests/Feature/FileUploadTest.php covers the list's data
|
||||
// through Livewire::test(); driving a real selection through the browser is impractical here.
|
||||
})->skip('the in-process browser server drops multipart uploads (LaravelHttpServer.php:257): a real file selection cannot reach the list');
|
||||
|
||||
test('the drop zone hides its burst again once the drag leaves', function () {
|
||||
$page = ready(visit('/upload'));
|
||||
|
||||
$burst = "getComputedStyle(document.querySelector('[data-test=drop-zone-burst]')).opacity";
|
||||
|
||||
$page->assertScript("{$burst} === '0'");
|
||||
|
||||
$page->script("window.eval(\"document.querySelector('[data-test=drop-zone]').dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true }))\")");
|
||||
$page->assertScript("{$burst} === '1'");
|
||||
|
||||
$page->script("window.eval(\"document.querySelector('[data-test=drop-zone]').dispatchEvent(new DragEvent('dragleave', { bubbles: true, cancelable: true }))\")");
|
||||
$page->assertScript("{$burst} === '0'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
test('the QR dialog holds its code inside the box, and Escape returns focus to the button that opened it', function () {
|
||||
$share = Share::factory()->create();
|
||||
|
||||
$page = ready(visit(route('share.created', $share, false)));
|
||||
|
||||
$page->click('[data-test="show-qr-code"]');
|
||||
$page->wait(1);
|
||||
|
||||
$page->assertScript("document.querySelector('[data-test=\"qr-code-dialog\"]').open");
|
||||
|
||||
$inside = $page->script("(() => {
|
||||
const dialog = document.querySelector('[data-test=\"qr-code-dialog\"]').getBoundingClientRect();
|
||||
const qr = document.querySelector('[data-qr-code] svg').getBoundingClientRect();
|
||||
return qr.left >= dialog.left - 1 && qr.right <= dialog.right + 1
|
||||
&& qr.top >= dialog.top - 1 && qr.bottom <= dialog.bottom + 1;
|
||||
})()");
|
||||
expect($inside)->toBeTrue();
|
||||
|
||||
$page->keys(':focus', 'Escape');
|
||||
$page->wait(1);
|
||||
|
||||
$page->assertScript("! document.querySelector('[data-test=\"qr-code-dialog\"]').open")
|
||||
->assertScript("document.activeElement === document.querySelector('[data-test=\"show-qr-code\"]')")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
test('the download page fits a phone before and after unlocking a password-protected share', function () {
|
||||
$share = app(ShareService::class)->createShare(
|
||||
[['file' => UploadedFile::fake()->create('a-genuinely-quite-long-holiday-photos-archive-from-portugal.zip', 120), 'relativePath' => null]],
|
||||
['password' => 'let-me-in'],
|
||||
);
|
||||
|
||||
$page = ready(visit(route('share.download', $share, false))->resize(393, 852));
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const button = document.querySelector('button[type=submit]');
|
||||
const form = button.closest('[data-md-form]').getBoundingClientRect();
|
||||
const rect = button.getBoundingClientRect();
|
||||
return { formWidth: form.width, formRight: form.right, buttonWidth: rect.width, buttonRight: rect.right };
|
||||
})()");
|
||||
|
||||
expect($metrics['buttonWidth'])->toBeLessThan($metrics['formWidth']);
|
||||
expect($metrics['buttonRight'])->toEqualWithDelta($metrics['formRight'], 1);
|
||||
$page->assertScript('document.documentElement.scrollWidth <= window.innerWidth');
|
||||
|
||||
$page->type('input[type="password"]', 'let-me-in')->press('Unlock');
|
||||
$page->wait(1);
|
||||
|
||||
$page->assertScript("document.querySelector('h2').tagName === 'H2' && document.querySelector('h2').textContent.trim() === 'Shared Files'");
|
||||
|
||||
$rows = $page->script("(() => {
|
||||
const rows = [...document.querySelectorAll('[data-md-list-item]')];
|
||||
return {
|
||||
count: rows.length,
|
||||
allFit: rows.every((row) => row.getBoundingClientRect().right <= window.innerWidth + 0.5),
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($rows['count'])->toBeGreaterThan(0);
|
||||
expect($rows['allFit'])->toBeTrue();
|
||||
$page->assertScript('document.documentElement.scrollWidth <= window.innerWidth')
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
test('the settings Save button is end-aligned at less than the form\'s width', function (string $url, string $button) {
|
||||
$this->actingAs($url === '/admin/settings' ? User::factory()->admin()->create() : User::factory()->create());
|
||||
|
||||
$page = ready(visit($url)->resize(1280, 800));
|
||||
|
||||
$metrics = $page->script("(() => {
|
||||
const button = document.querySelector('{$button}');
|
||||
const form = button.closest('[data-md-form]').getBoundingClientRect();
|
||||
const rect = button.getBoundingClientRect();
|
||||
return { formWidth: form.width, formRight: form.right, buttonWidth: rect.width, buttonRight: rect.right };
|
||||
})()");
|
||||
|
||||
expect($metrics['buttonWidth'])->toBeLessThan($metrics['formWidth']);
|
||||
expect($metrics['buttonRight'])->toEqualWithDelta($metrics['formRight'], 1);
|
||||
})->with([
|
||||
['/settings/profile', '[data-test="update-profile-button"]'],
|
||||
['/admin/settings', '[data-test="save-settings"]'],
|
||||
]);
|
||||
|
||||
test('the admin dashboard heads its shares table with an h2 and drops the card', function () {
|
||||
$admin = User::factory()->admin()->create();
|
||||
Share::factory()->count(2)->create();
|
||||
$this->actingAs($admin);
|
||||
|
||||
$page = ready(visit('/admin/dashboard'));
|
||||
|
||||
$result = $page->script("(() => {
|
||||
const heading = [...document.querySelectorAll('h2')].find((h) => h.textContent.trim() === 'All Shares');
|
||||
const table = document.querySelector('table');
|
||||
return {
|
||||
headingIsH2: heading?.tagName === 'H2',
|
||||
headingBeforeTable: !!heading && !!table
|
||||
&& !!(heading.compareDocumentPosition(table) & Node.DOCUMENT_POSITION_FOLLOWING),
|
||||
noCard: document.querySelectorAll('[data-md-card]').length === 0,
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($result['headingIsH2'])->toBeTrue();
|
||||
expect($result['headingBeforeTable'])->toBeTrue();
|
||||
expect($result['noCard'])->toBeTrue();
|
||||
});
|
||||
|
||||
test('the admin settings page has five headed sections and no card', function () {
|
||||
$this->actingAs(User::factory()->admin()->create());
|
||||
|
||||
$page = ready(visit('/admin/settings'));
|
||||
|
||||
$result = $page->script("(() => {
|
||||
return {
|
||||
// Every dialog's own title is an h2 too (components/modal.blade.php), whether open or
|
||||
// not: exclude those to count only the page's own section headings.
|
||||
h2Count: document.querySelectorAll('h2:not([data-md-modal-title])').length,
|
||||
noCard: document.querySelectorAll('[data-md-card]').length === 0,
|
||||
};
|
||||
})()");
|
||||
|
||||
expect($result['h2Count'])->toBe(5);
|
||||
expect($result['noCard'])->toBeTrue();
|
||||
});
|
||||
@@ -25,8 +25,8 @@ function toolbarLink(string $html, string $url): string
|
||||
test('pages have a floating toolbar at the bottom instead of a top app bar', function () {
|
||||
$html = $this->get(route('upload'))->assertOk()->getContent();
|
||||
|
||||
expect($html)->not->toContain('data-app-bar')
|
||||
->and(toolbar($html))->toContain('role="toolbar"')->toContain('data-toolbar-place="bottom"');
|
||||
expect($html)->not->toContain('data-md-app-bar')
|
||||
->and(toolbar($html))->toContain('role="toolbar"')->toContain('data-md-toolbar-place="bottom"');
|
||||
});
|
||||
|
||||
test('a guest gets the upload page, the theme toggle and a way to log in, without tooltips', function () {
|
||||
@@ -34,7 +34,7 @@ test('a guest gets the upload page, the theme toggle and a way to log in, withou
|
||||
|
||||
expect(toolbarLink($html, route('upload')))->toContain('aria-current="page"')->toContain('aria-label="Upload"')
|
||||
->and(toolbarLink($html, route('login')))->not->toBe('')
|
||||
->and(toolbar($html))->toContain('Log in')->toContain('data-theme-toggle')->not->toContain('popover')->not->toContain('data-account-menu');
|
||||
->and(toolbar($html))->toContain('Log in')->toContain('data-md-theme-toggle')->not->toContain('popover')->not->toContain('data-md-account-menu');
|
||||
|
||||
expect(toolbar($this->get(route('login'))->getContent()))->not->toContain(route('login').'"');
|
||||
});
|
||||
@@ -47,7 +47,7 @@ test('an admin gets the admin pages and the account menu, the current page marke
|
||||
expect(toolbarLink($html, route('admin.dashboard')))->toContain('aria-current="page"')
|
||||
->and(toolbarLink($html, route('upload')))->not->toContain('aria-current')
|
||||
->and(toolbarLink($html, route('admin.settings')))->not->toContain('aria-current')
|
||||
->and(toolbar($html))->toContain('data-account-menu')->toContain('data-test="logout-button"')->not->toContain('Log in');
|
||||
->and(toolbar($html))->toContain('data-md-account-menu')->toContain('data-test="logout-button"')->not->toContain('Log in');
|
||||
});
|
||||
|
||||
test('a user who is not an admin gets no admin pages', function () {
|
||||
|
||||
@@ -3,8 +3,11 @@
|
||||
use Illuminate\Support\Facades\File;
|
||||
use NoNameWeb\LivewireMaterial\Testing\DesignGuard;
|
||||
|
||||
test('views and code use only what the design system compiles', function () {
|
||||
expect(DesignGuard::scan([resource_path('views'), resource_path('js'), app_path()])->violations())->toBe([]);
|
||||
test('views, stylesheets and code use only what the design system provides', function () {
|
||||
expect(DesignGuard::scan([resource_path('views'), resource_path('js'), resource_path('css'), app_path()])
|
||||
->missingStylesheets(resource_path('css/app.css'))
|
||||
->unusedStylesheets(resource_path('css/app.css'))
|
||||
->violations())->toBe([]);
|
||||
});
|
||||
|
||||
test('nothing of maryUI or daisyUI is left behind', function () {
|
||||
|
||||
@@ -6,6 +6,7 @@ use App\Services\QrCodeService;
|
||||
test('the share created page offers the link as a QR code and through the share sheet', function () {
|
||||
$share = Share::factory()->create();
|
||||
$url = route('share.download', $share);
|
||||
$svg = app(QrCodeService::class)->svg($url);
|
||||
|
||||
$response = $this->get(route('share.created', $share));
|
||||
|
||||
@@ -14,8 +15,12 @@ test('the share created page offers the link as a QR code and through the share
|
||||
->assertSee('data-test="show-qr-code"', false)
|
||||
->assertSee('data-test="share-sheet"', false)
|
||||
->assertSee('share-'.$share->token.'.png')
|
||||
->assertSee('<div data-qr-code class="mx-auto aspect-square w-full max-w-80 rounded-corner-lg bg-white p-2 [&>svg]:size-full">'.app(QrCodeService::class)->svg($url).'</div>', false)
|
||||
->assertDontSee('Recipients also need the password.');
|
||||
|
||||
// Structure, not the 1.x class string: the `data-qr-code` hook directly wraps the service's own
|
||||
// SVG, which draws its own white field and quiet zone — no colour class or literal colour here.
|
||||
expect($response->getContent())
|
||||
->toMatch('#<div[^>]*\bdata-qr-code\b[^>]*>'.preg_quote($svg, '#').'</div>#');
|
||||
});
|
||||
|
||||
test('the QR code dialog reminds that a protected share also needs its password', function () {
|
||||
|
||||
@@ -53,3 +53,13 @@ function something()
|
||||
{
|
||||
// ..
|
||||
}
|
||||
|
||||
/**
|
||||
* A page of SealShare, once it can be used: loaded, with Alpine and Livewire started. Shared by
|
||||
* every file under tests/Browser, so a browser test needs no visit() of its own to define it.
|
||||
*/
|
||||
function ready(mixed $page): mixed
|
||||
{
|
||||
return $page->waitForEvent('networkidle')
|
||||
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user