c6369a6ddb
Selecting an avatar or workspace logo now opens a crop dialog (drag + zoom) before uploading, so the image is framed the way it renders. The crop is performed client-side and the resized 512x512 result is what gets uploaded. This reworks the idea from #131 without its cropper dependency: vue-advanced-cropper was last released ~2 years ago and we did not want an unmaintained package for something this load-bearing. What we need is narrow (fixed 1:1, a circle/square mask, fixed-size output), so a small canvas-based cropper covers it: - imageCrop.ts: pure transform math (cover-fit, clamp, zoom, viewport->source). - ImageCropperDialog.vue: CSS-transform preview, pointer drag, wheel/button zoom, a ResizeObserver to measure the modal (no requestAnimationFrame timing hacks), and a canvas toBlob only on save. - PhotoUpload.vue: opens the cropper on file select; the mask shape follows the display shape (round avatar / square logo) instead of always being round. - crop_* strings added to all 15 locales. Also installs Pest browser testing (pest-plugin-browser + Playwright) and adds a browser test for the crop flow. TestCase only calls withoutVite() for non-browser tests, since browser tests need the real Vite assets to boot the SPA. The Pest browser server does not parse multipart uploads, so the test asserts the crop dispatches the correct upload request; endpoint persistence stays covered by ProfileUpdateTest.
89 lines
3.3 KiB
PHP
89 lines
3.3 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
use App\Models\User;
|
|
|
|
/**
|
|
* Inject a real image into the hidden file input and dispatch `change`, driving
|
|
* the same flow a user's file selection would. The plugin's attach() sends
|
|
* localPaths, which Playwright rejects over its websocket connection, so a
|
|
* DataTransfer is used instead. The poll waits for the SPA to mount first.
|
|
*/
|
|
function selectPhoto(mixed $page): void
|
|
{
|
|
$base64 = base64_encode((string) file_get_contents(base_path('tests/fixtures/blue-logo.png')));
|
|
|
|
$page->script(<<<JS
|
|
(async () => {
|
|
const findInput = () => document.querySelector('input[type="file"]');
|
|
for (let attempt = 0; attempt < 50 && !findInput(); attempt++) {
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
}
|
|
const input = findInput();
|
|
const bytes = Uint8Array.from(atob('{$base64}'), (character) => character.charCodeAt(0));
|
|
const file = new File([bytes], 'logo.png', { type: 'image/png' });
|
|
const data = new DataTransfer();
|
|
data.items.add(file);
|
|
input.files = data.files;
|
|
input.dispatchEvent(new Event('change', { bubbles: true }));
|
|
})();
|
|
JS);
|
|
}
|
|
|
|
/**
|
|
* Capture the next multipart request the page sends. The Pest browser server
|
|
* does not parse multipart bodies (its file handling is an open TODO), so we
|
|
* assert the crop dispatches the right upload rather than that it persists —
|
|
* server-side persistence is covered by ProfileUpdateTest.
|
|
*/
|
|
function recordUpload(mixed $page): void
|
|
{
|
|
$page->script(<<<'JS'
|
|
(() => {
|
|
window.__uploadRequest = null;
|
|
const open = XMLHttpRequest.prototype.open;
|
|
const send = XMLHttpRequest.prototype.send;
|
|
XMLHttpRequest.prototype.open = function (method, url) {
|
|
this.__method = method;
|
|
this.__url = url;
|
|
return open.apply(this, arguments);
|
|
};
|
|
XMLHttpRequest.prototype.send = function (body) {
|
|
if (body instanceof FormData) {
|
|
window.__uploadRequest = { method: this.__method, url: this.__url, keys: [...body.keys()] };
|
|
}
|
|
return send.apply(this, arguments);
|
|
};
|
|
})();
|
|
JS);
|
|
}
|
|
|
|
test('cropping a selected photo dispatches a cropped avatar upload', function () {
|
|
$this->actingAs(User::factory()->create());
|
|
|
|
$page = visit(route('app.profile.edit'));
|
|
|
|
selectPhoto($page);
|
|
recordUpload($page);
|
|
|
|
// Auto-waits for the cropper dialog to open and its Save button to become
|
|
// enabled — the button only enables once the image has loaded and been
|
|
// measured inside the modal, which is exactly what a broken cropper fails.
|
|
$page->click('@crop-save')
|
|
->assertNoJavaScriptErrors();
|
|
|
|
$request = json_decode((string) $page->script(<<<'JS'
|
|
(async () => {
|
|
for (let attempt = 0; attempt < 80 && !window.__uploadRequest; attempt++) {
|
|
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
}
|
|
return JSON.stringify(window.__uploadRequest);
|
|
})();
|
|
JS), true);
|
|
|
|
expect($request)->not->toBeNull()
|
|
->and($request['method'])->toBe('POST')
|
|
->and($request['url'])->toContain('/settings/profile/photo')
|
|
->and($request['keys'])->toContain('photo');
|
|
});
|