'name', 'direction' => 'asc'];
public function render(): View
{
$files = collect(range(1, 25))->map(fn (int $n): array => ['name' => sprintf('file-%02d.zip', $n), 'size' => $n * 3 % 17]);
$files = $files->sortBy($this->sortBy['column'], SORT_REGULAR, $this->sortBy['direction'] === 'desc')->values();
$page = $this->getPage();
return view('probe::data', [
'files' => new LengthAwarePaginator($files->forPage($page, 10)->values(), $files->count(), 10, $page),
]);
}
}
function dataProbe()
{
$views = sys_get_temp_dir().'/livewire-material-data-probe';
@mkdir($views);
file_put_contents($views.'/data.blade.php', <<<'BLADE'
Name
Size
@foreach ($files as $file)
| {{ $file['name'] }} | {{ $file['size'] }} |
@endforeach
{{ $files->links() }}
| dense-a.zip | 1 |
| dense-b.zip | 2 |
BLADE);
app('view')->addNamespace('probe', $views);
Livewire::component('data-probe', DataProbe::class);
Route::middleware('web')->get('/data-probe', fn () => Blade::render(<<<'BLADE'
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
@livewireScripts
BLADE));
return visit('/data-probe')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
}
it('sorts by a column and flips the direction on a second press', function () {
$first = "document.querySelector('tbody tr td').textContent.trim()";
$page = dataProbe()
->assertAttribute('#by-name', 'aria-sort', 'ascending')
->assertScript("{$first} === 'file-01.zip'");
$page->click('#by-name button')
->assertAttribute('#by-name', 'aria-sort', 'descending')
->assertScript("{$first} === 'file-25.zip'");
$page->click('#by-size button')
->assertAttribute('#by-size', 'aria-sort', 'ascending')
->assertScript("! document.querySelector('#by-name').hasAttribute('aria-sort')");
});
it('pages through Livewire results and marks the current page', function () {
$page = dataProbe()
->assertSee('1–10 of 25')
->assertAttribute('[data-md-pagination] [aria-current="page"]', 'aria-current', 'page')
->click('[data-md-pagination] button[aria-label="Go to page 3"]')
->assertSee('21–25 of 25')
->assertSeeIn('[data-md-pagination] [aria-current="page"]', '3');
$page->click('[data-md-pagination] button[aria-label="Previous"]')
->assertSee('11–20 of 25');
$page->resize(400, 800)
->assertSee('Page 2 of 3');
});
it('draws 52px rows, and 36px ones only in a table that asks to be dense', function () {
$row = fn (string $table): string => "document.querySelector('{$table} tbody tr').getBoundingClientRect().height";
dataProbe()
->assertScript("Math.abs(({$row('[data-md-table]:not([data-md-dense])')}) - 52) <= 1")
->assertScript("Math.abs(({$row('#dense-table')}) - 36) <= 1")
->assertScript("getComputedStyle(document.querySelector('#dense-table tr[aria-selected=\"true\"]')).backgroundColor !== 'rgba(0, 0, 0, 0)'")
->assertScript("getComputedStyle(document.querySelector('[data-md-table] thead th')).borderBottomWidth === '1px'");
});
it('lets the sort button be pressed anywhere in its 48px target', function () {
dataProbe()
->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const after = getComputedStyle(button, '::after'); return button.getBoundingClientRect().height < 48 && after.minHeight === '48px' && after.minWidth === '48px'; })()")
->assertScript("(() => { const button = document.querySelector('#by-size [data-md-sort-header-button]'); const box = button.getBoundingClientRect(); const probe = document.elementFromPoint(box.left + box.width / 2, box.top + box.height / 2 - 22); return probe === button; })()");
});
it('draws each page step 40px and lets it be pressed anywhere in its 48px target', function () {
dataProbe()
->assertScript("(() => { const step = document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]'); const box = step.getBoundingClientRect(); return box.width === 40 && box.height === 40 && document.elementFromPoint(box.left + box.width / 2, box.top - 3) === step; })()")
->assertScript("getComputedStyle(document.querySelector('[data-md-pagination] [aria-current=\"page\"]')).backgroundColor !== 'rgba(0, 0, 0, 0)'");
});
it('shows a page step\'s keyboard focus ring, from md-focus-ring', function () {
$step = "document.querySelector('[data-md-pagination] button[aria-label=\"Go to page 2\"]')";
$page = dataProbe();
// A key press first puts the browser in keyboard modality, as a keyboard user would be —
// Firefox only counts a scripted focus as :focus-visible after one.
$page->keys('#by-name [data-md-sort-header-button]', 'Tab');
$page->script("{$step}.focus()");
$page->assertScript("document.activeElement === {$step}")
->assertScript("getComputedStyle({$step}).outlineStyle === 'solid'")
->assertScript("getComputedStyle({$step}).outlineWidth === '3px'");
});