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,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();
|
||||
});
|
||||
Reference in New Issue
Block a user