blade('| a |
'))
->toContain('')
->and((string) $this->blade(''))->toContain('data-md-size="xs"')
->and((string) $this->blade(''))->toContain('data-md-size="sm"');
});
it('tightens a table only when the caller asks for it', function () {
expect((string) $this->blade(''))->not->toContain('data-md-dense')
->and((string) $this->blade(''))->toContain('data-md-dense');
});
it('draws 52px rows, 36px dense ones, from its stylesheet in the components layer', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/table.css');
expect($css)->toContain('@layer material.components')
->toMatch('/\\[data-md-table\\] \\{\\s*--cell-x: 12px;\\s*--cell-y: var\\(--md-sys-measurement-space200\\);/')
->toMatch('/\\[data-md-table\\]\\[data-md-dense\\] \\{\\s*--cell-y: var\\(--md-sys-measurement-space100\\);/')
->toContain('[data-md-table] :where(tbody tr[aria-selected=\'true\'])')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/table.css';")
->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('table.css');
});
it('sorts by its column, ascending first and then flipping', function () {
expect((string) $this->blade('Size'))
->not->toContain('aria-sort')
->toContain('wire:click="$set(\'sortBy\', {"column":"size","direction":"asc"})"')
->and((string) $this->blade('Size'))
->toContain('aria-sort="ascending"')
->toContain('class="text-end"')
->toContain('$set(\'order\', {"column":"size","direction":"desc"})')
->and((string) $this->blade('Size'))
->toContain('aria-sort="descending"')
->toContain('"direction":"asc"');
});
it('gives the sort button and every page control a 48px target', function () {
$pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
expect((string) $this->blade('Size'))
->toContain('touch-target')
->and((string) $pages->links())
->toContain('state-layer focus-ring touch-target');
});
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('3')
->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'
{{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, $this->getPage(), ['path' => '/'])) ->links() }}
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');
});