Add data tables, sort headers and M3 paginators

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
2026-09-13 08:32:59 +02:00
parent f90695cedd
commit 83ed671c4e
16 changed files with 613 additions and 1 deletions
@@ -0,0 +1,68 @@
+<?php
+
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Pagination\Paginator;
+use Livewire\Component;
+use Livewire\Livewire;
+use Livewire\WithPagination;
+
+it('marks a table for its styles and takes a size', function () {
+    expect((string) $this->blade('<x-table class="min-w-160"><tbody><tr><td>a</td></tr></tbody></x-table>'))
+        ->toContain('<table data-table data-size="sm" class="min-w-160">')
+        ->and((string) $this->blade('<x-table size="xs" />'))->toContain('data-size="xs"')
+        ->and((string) $this->blade('<x-table size="huge" />'))->toContain('data-size="sm"');
+});
+
+it('sorts by its column, ascending first and then flipping', function () {
+    expect((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'name\', \'direction\' => \'asc\']">Size</x-sort-header>'))
+        ->not->toContain('aria-sort')
+        ->toContain('wire:click="$set(\'sortBy\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;asc&quot;})"')
+        ->and((string) $this->blade('<x-sort-header column="size" model="order" :sort-by="[\'column\' => \'size\', \'direction\' => \'asc\']" class="text-end">Size</x-sort-header>'))
+        ->toContain('aria-sort="ascending"')
+        ->toContain('class="text-end"')
+        ->toContain('$set(\'order\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;desc&quot;})')
+        ->and((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'size\', \'direction\' => \'desc\']">Size</x-sort-header>'))
+        ->toContain('aria-sort="descending"')
+        ->toContain('&quot;direction&quot;:&quot;asc&quot;');
+});
+
+it('draws Laravel\'s paginators in M3', function () {
+    $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
+
+    expect((string) $pages->links())
+        ->toContain('data-pagination')
+        ->toContain('Page 3 of 10')
+        ->toContain('21–30 of 95')
+        ->toContain('<span aria-current="page" class="grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums bg-secondary-container text-on-secondary-container max-sm:hidden">3</span>')
+        ->toContain('href="/shares?page=2" rel="prev"')
+        ->toContain('aria-label="Go to page 4"')
+        ->not->toContain('text-gray');
+
+    expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
+        ->toContain('data-pagination')
+        ->toContain('href="/shares?page=1"')
+        ->toContain('href="/shares?page=3"')
+        ->toContain('Previous');
+});
+
+it('draws Livewire\'s paginators in M3, wired to its page actions', function () {
+    Livewire::component('paging-probe', new class extends Component
+    {
+        use WithPagination;
+
+        public function render(): string
+        {
+            return <<<'BLADE'
+                <div>
+                    {{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, $this->getPage(), ['path' => '/'])) ->links() }}
+                </div>
+                BLADE;
+        }
+    });
+
+    expect(Livewire::test('paging-probe')->html())
+        ->toContain('data-pagination')
+        ->toContain('wire:click="gotoPage(2, \'page\')"')
+        ->toContain('wire:click="nextPage(\'page\')"')
+        ->not->toContain('text-gray');
+});