SealShare/tests/Browser/FrameTest.php

<?php

use App\Models\User;
use Illuminate\Support\Facades\Storage;

/**
 * The frame every page shares: the app layout's main region (resources/views/layouts/app.blade.php,
 * partials/toolbar.blade.php) and the page template's centred column inside it
 * (resources/views/components/page.blade.php), whichever page renders there.
 */
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('every page column is 40rem and centred on a wide window', function (string $url, bool $asAdmin) {
    if ($asAdmin) {
        $this->actingAs(User::factory()->admin()->create());
    }

    $metrics = ready(visit($url)->resize(1600, 900))->script("(() => {
        const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
        const rect = document.querySelector('[data-test=\"page\"]').getBoundingClientRect();
        return { width: rect.width, remPx, left: rect.left, right: window.innerWidth - rect.right };
    })()");

    expect($metrics['width'])->toEqualWithDelta(40 * $metrics['remPx'], 0.5);
    expect($metrics['left'])->toEqualWithDelta($metrics['right'], 1);
})->with([
    'sign-in' => ['/login', false],
    'upload' => ['/upload', false],
    'admin dashboard' => ['/admin/dashboard', true],
]);

test('the page column sits 16px from each edge on a phone', function () {
    $metrics = ready(visit('/login')->resize(393, 852))->script("(() => {
        const rect = document.querySelector('[data-test=\"page\"]').getBoundingClientRect();
        return { left: rect.left, right: window.innerWidth - rect.right };
    })()");

    expect($metrics['left'])->toEqualWithDelta(16, 1);
    expect($metrics['right'])->toEqualWithDelta(16, 1);
});

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('[data-test=\"page\"] [data-md-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 content keeps M3's margin at 599px and 600px", function () {
    // The main region spans the full window at every width (the page inside sets its own width),
    // so the padding it declares on its body is exactly the gap between its content and the 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);
});