SealShare/tests/Screenshots/ScreenshotsTest.php

<?php

use App\Services\QrCodeService;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Storage;
use Livewire\Features\SupportFileUploads\FileUploadConfiguration;
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
use Tests\Screenshots\DemoData;
use Tests\Screenshots\Publisher;

/*
 * The screenshots on the website and in the README, from fixed demo data with the clock frozen.
 * Not part of any test suite: `composer screenshots` runs this directory (Chromium), and each capture
 * is published to website/img/screenshots as soon as it is taken.
 */

beforeEach(function () {
    // Sessions have to outlive a request: a sign-in, an unlocked share.
    config(['session.driver' => 'file']);
    Storage::fake('shares');
    Storage::fake('tmp-for-tests');

    $this->travelTo(Carbon::parse('2026-10-01 09:30'));

    // Livewire deletes temporary uploads a day older than now, by the files' real modification
    // times: under the frozen clock that is every file this run stores.
    config(['livewire.temporary_file_upload.cleanup' => false]);

    DemoData::shares();
});

/**
 * A visited page on a device in a theme, once it can be used. Tests call `visit()` themselves, on a
 * line of its own: Pest starts its browser only for tests under tests/Browser or whose body calls
 * `visit(` after whitespace.
 */
function shotPage(mixed $visit, string $device, string $theme): mixed
{
    $pending = $device === 'desktop' ? $visit->on()->macbook14() : $visit->on()->iPhone15Pro();
    $page = $theme === 'dark' ? $pending->inDarkMode() : $pending->inLightMode();

    return $page->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
}

/**
 * Capture the viewport once fonts are in and every finite animation has run, then publish it.
 *
 * The in-process server listens on 127.0.0.1 at a random port, so links would read differently on
 * every run: the page is shown as it reads on an installation at https://files.example.com, the
 * server's origin replaced in text and fields, and the QR code drawn for that address.
 */
function shoot(mixed $page, string $device, string $theme, string $name): void
{
    $origin = 'https://files.example.com';
    $qrCode = app(QrCodeService::class)->svg($origin.'/s/'.DemoData::DELIVERY_TOKEN);

    $page->script("document.head.insertAdjacentHTML('beforeend', '<style>*{caret-color:transparent!important}</style>')");
    $page->script('(() => { const from = location.origin, to = '.json_encode($origin).'; document.querySelectorAll("input").forEach((input) => { input.value = input.value.replaceAll(from, to) }); const text = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT); while (text.nextNode()) { text.currentNode.nodeValue = text.currentNode.nodeValue.replaceAll(from, to) } document.querySelectorAll("[data-qr-code]").forEach((panel) => { panel.innerHTML = '.json_encode($qrCode).' }) })()');

    // Counting figures run on requestAnimationFrame rather than as Web Animations.
    $page->wait(1.2)
        ->assertScript("document.fonts.status === 'loaded' && document.getAnimations().every((animation) => animation.playState !== 'running' || animation.effect?.getComputedTiming().iterations === Infinity)");

    $capture = "{$device}-{$theme}-{$name}";

    $page->screenshot(fullPage: false, filename: $capture);

    Publisher::forProject()->publish($capture, $device, $theme, $name, $device === 'desktop' ? [1600, 800] : [1080, 540]);
}

/**
 * Put files into the uploader the way a finished upload does: stored as Livewire temporary uploads
 * and handed to `_finishUpload` by their signed names. A browser test cannot select files through
 * the file input, because the in-process server does not store a multipart upload.
 *
 * @param  array<string, int>  $files  relative path => size in kilobytes
 */
function selectFiles(mixed $page, array $files): void
{
    $signed = [];

    foreach ($files as $path => $kilobytes) {
        // Livewire's own storage for an arriving upload: the file and its name, type and size beside it.
        $stored = FileUploadConfiguration::storeTemporaryFile(UploadedFile::fake()->create(basename($path), $kilobytes), 'tmp-for-tests');

        $signed[] = TemporaryUploadedFile::signPath(basename($stored));
    }

    $relativePaths = array_map(fn (string $path): ?string => str_contains($path, '/') ? $path : null, array_keys($files));

    $page->script('(() => { const wire = Livewire.find(document.querySelector("[data-test=drop-zone]").closest("[wire\\\\:id]").getAttribute("wire:id")); wire.$set("relativePaths", '.json_encode($relativePaths).', false); wire._finishUpload("files", '.json_encode($signed).', true) })()');

    $page->assertSee('Selected Files ('.count($files).')');
}

$files = ['Q3 Report.pdf' => 2400, 'Contract 2026.pdf' => 380, 'Product photos/hero-shot.jpg' => 4800, 'Product photos/detail.jpg' => 3900];

test('desktop', function (string $theme) use ($files) {
    $upload = visit('/upload');
    $page = shotPage($upload, 'desktop', $theme);
    selectFiles($page, $files);
    $page->click('label:has-text("Password protect")')
        ->type('input[wire\:model="password"]', DemoData::PROTECTED_PASSWORD)
        ->type('input[wire\:model="maxDownloads"]', '5');
    // The drop zone, the files and the options fill the window; typing left the page wherever it scrolled.
    $page->script("document.activeElement?.blur(); window.scrollTo(0, document.querySelector('[data-test=drop-zone]').getBoundingClientRect().top + window.scrollY - 24)");
    shoot($page, 'desktop', $theme, '01-upload');

    $created = visit(route('share.created', DemoData::DELIVERY_TOKEN, false));
    $page = shotPage($created, 'desktop', $theme);
    shoot($page, 'desktop', $theme, '02-share-created');

    $page->click('[data-test="show-qr-code"]')
        ->assertScript("document.querySelector('[data-test=\"qr-code-dialog\"]').open");
    shoot($page, 'desktop', $theme, '03-qr-code');

    $download = visit(route('share.download', DemoData::DELIVERY_TOKEN, false));
    shoot(shotPage($download, 'desktop', $theme), 'desktop', $theme, '04-download');

    $this->actingAs(DemoData::admin());

    $dashboard = visit('/admin/dashboard');
    shoot(shotPage($dashboard, 'desktop', $theme), 'desktop', $theme, '05-admin-dashboard');

    // Branding typed in but not saved, so the other shots keep SealShare's own.
    $settings = visit('/admin/settings');
    $page = shotPage($settings, 'desktop', $theme)
        ->type('input[wire\\:model="siteTitle"]', 'Acme Files')
        ->type('textarea[wire\\:model="siteDescription"]', 'Send and receive files securely with Acme Engineering.');
    $page->script('document.activeElement?.blur(); window.scrollTo(0, 0)');
    shoot($page, 'desktop', $theme, '06-admin-settings');
})->with(['light', 'dark']);

test('phone', function (string $theme) use ($files) {
    $upload = visit('/upload');
    $page = shotPage($upload, 'phone', $theme);
    selectFiles($page, $files);
    shoot($page, 'phone', $theme, '01-upload');

    $password = visit(route('share.download', DemoData::PROTECTED_TOKEN, false));
    shoot(shotPage($password, 'phone', $theme), 'phone', $theme, '02-password');

    $download = visit(route('share.download', DemoData::DELIVERY_TOKEN, false));
    shoot(shotPage($download, 'phone', $theme), 'phone', $theme, '03-download');

    $created = visit(route('share.created', DemoData::DELIVERY_TOKEN, false));
    $page = shotPage($created, 'phone', $theme);
    $page->click('[data-test="show-qr-code"]')
        ->assertScript("document.querySelector('[data-test=\"qr-code-dialog\"]').open");
    shoot($page, 'phone', $theme, '04-qr-code');
})->with(['light', 'dark']);