Andreas Reinhold / reiniandClaude Opus 5
83ed671c4e
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m10s
tests / feature (8.5) (push) Successful in 1m6s
tests / browser (chrome, chromium) (push) Successful in 3m28s
tests / browser (firefox, firefox) (push) Successful in 4m20s
tests / browser (safari, webkit) (push) Failing after 6m16s
A data table styled from descendant selectors, a Livewire sort header with aria-sort, and Laravel's and Livewire's full and simple paginators drawn in M3, put in front of their own views. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
106 lines
3.7 KiB
PHP
106 lines
3.7 KiB
PHP
<?php
|
||
|
||
use Illuminate\Contracts\View\View;
|
||
use Illuminate\Pagination\LengthAwarePaginator;
|
||
use Illuminate\Support\Facades\Blade;
|
||
use Illuminate\Support\Facades\Route;
|
||
use Livewire\Component;
|
||
use Livewire\Livewire;
|
||
use Livewire\WithPagination;
|
||
|
||
class DataProbe extends Component
|
||
{
|
||
use WithPagination;
|
||
|
||
/** @var array{column: string, direction: string} */
|
||
public array $sortBy = ['column' => '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'
|
||
<div class="p-4">
|
||
<x-table>
|
||
<thead>
|
||
<tr>
|
||
<x-sort-header column="name" :sort-by="$sortBy" id="by-name">Name</x-sort-header>
|
||
<x-sort-header column="size" :sort-by="$sortBy" id="by-size">Size</x-sort-header>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach ($files as $file)
|
||
<tr wire:key="file-{{ $file['name'] }}"><td>{{ $file['name'] }}</td><td>{{ $file['size'] }}</td></tr>
|
||
@endforeach
|
||
</tbody>
|
||
</x-table>
|
||
|
||
{{ $files->links() }}
|
||
</div>
|
||
BLADE);
|
||
app('view')->addNamespace('probe', $views);
|
||
|
||
Livewire::component('data-probe', DataProbe::class);
|
||
|
||
Route::middleware('web')->get('/data-probe', fn () => Blade::render(<<<'BLADE'
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<x-theme-script />
|
||
@vite(config('livewire-material.showcase.vite'))
|
||
@livewireStyles
|
||
</head>
|
||
<body class="bg-surface">
|
||
<livewire:data-probe />
|
||
@livewireScripts
|
||
</body>
|
||
</html>
|
||
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-pagination] [aria-current="page"]', 'aria-current', 'page')
|
||
->click('[data-pagination] button[aria-label="Go to page 3"]')
|
||
->assertSee('21–25 of 25')
|
||
->assertSeeIn('[data-pagination] [aria-current="page"]', '3');
|
||
|
||
$page->click('[data-pagination] button[aria-label="Previous"]')
|
||
->assertSee('11–20 of 25');
|
||
|
||
$page->resize(400, 800)
|
||
->assertSee('Page 2 of 3');
|
||
});
|