livewire-material/tests/Browser/CommunicationTest.php

<?php

const SNACKBAR = "document.querySelector('[x-data=\"materialSnackbar\"] [aria-live]')";

const TOAST = "document.querySelector('[data-toast]')";

it('shows a toast as a snackbar, then the next in turn', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    $page->script("materialToast('First', { type: 'success', timeout: 600 }); materialToast('Second', { type: 'error' })");

    $page->assertScript(SNACKBAR."?.textContent.includes('First')")
        ->assertScript(SNACKBAR."?.getAttribute('role') === 'status'");

    $page->wait(1.2);

    $page->assertScript(SNACKBAR."?.textContent.includes('Second')")
        ->assertScript(SNACKBAR."?.getAttribute('role') === 'alert'");
});

it('shows a toast dispatched as a browser event, as the Toasts concern does', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    // Through Livewire, in the page's own realm: an event built inside Playwright's evaluate
    // carries a detail object Firefox's sandbox will not let the page read.
    $page->script("window.eval(\"Livewire.dispatch('toast', { type: 'info', title: 'Link copied', description: null, timeout: 4000 })\")");

    $page->assertScript(SNACKBAR."?.textContent.includes('Link copied')");
});

it('runs a toast\'s action and dismisses it', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    $page->script("window.__undone = false; materialToast('Share deleted', { action: { label: 'Undo', handler: () => window.__undone = true } })");

    $page->click('[x-data="materialSnackbar"] button:has-text("Undo")')
        ->assertScript('window.__undone === true')
        ->assertScript(SNACKBAR.' === null');
});

it('does not let a toast dismissed early cut the next one short', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    $page->script("window.eval(\"materialToast('Share deleted', { timeout: 800, action: { label: 'Undo' } }); materialToast('Link copied', { timeout: 2500 })\")");

    // A click with no hover or focus before it, as a screen reader activates a button: nothing has
    // paused the first toast's timer.
    $page->script("document.querySelector('[data-toast] button[aria-label=\"Dismiss\"]').click()");

    $page->assertScript(TOAST."?.textContent.includes('Link copied')")
        ->wait(1.2);

    $page->assertScript(TOAST."?.textContent.includes('Link copied')");
});

it('keeps a sticky toast aside while a passing one shows, brings back the newest, and lets it go once dismissed', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    // As an application dispatches it; built in the page's realm (see above).
    $page->script("window.eval(\"window.dispatchEvent(new CustomEvent('toast', { detail: { type: 'info', title: 'A new version is ready', sticky: true, timeout: 300, action: { label: 'Reload', event: 'material:test-reload' } } }))\")");

    $page->assertScript(TOAST."?.textContent.includes('A new version is ready')")
        ->wait(0.6);

    $page->assertScript(TOAST."?.textContent.includes('A new version is ready')");

    $page->script("window.eval(\"materialToast('Settings saved', { type: 'success', timeout: 900 }); materialToast('Version 2 is ready', { sticky: true })\")");

    $page->assertScript(TOAST."?.textContent.includes('Settings saved')")
        ->wait(1.3);

    $page->assertScript(TOAST."?.textContent.includes('Version 2 is ready')");

    $page->click('[data-toast] button[aria-label="Dismiss"]')
        ->assertScript(TOAST.' === null');

    // Dismissed rather than left to time out: the pointer still rests where the snackbar appears,
    // and hovering pauses it.
    $page->script("window.eval(\"materialToast('Link copied', { timeout: 0 })\")");

    $page->assertScript(TOAST."?.textContent.includes('Link copied')")
        ->click('[data-toast] button[aria-label="Dismiss"]')
        ->assertScript(TOAST.' === null');
});

it('dispatches a toast action\'s window event alongside its handler, and closes', function () {
    $page = visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");

    $page->script("window.eval(\"window.reloads = 0; window.handled = 0; window.addEventListener('material:test-reload', () => window.reloads++); materialToast('A new version is ready', { sticky: true, action: { label: 'Reload', event: 'material:test-reload', handler: () => window.handled++ } })\")");

    $page->click('[data-toast-action]')
        ->assertScript(TOAST.' === null')
        ->assertScript("window.eval('window.reloads') === 1")
        ->assertScript("window.eval('window.handled') === 1");
});

it('opens a persistent rich tooltip on press', function () {
    $bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')";

    visit('/material/communication')->waitForEvent('networkidle')
        ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
        ->click('#communication button:has-text("Press for details")')
        ->assertScript("{$bubble}.matches(':popover-open')");
});