Andreas Reinhold / reiniandClaude Fable 5.1
9fb3126038
Plan steps 15-17's testing. `tests/Feature/BreakpointsTest.php` reads every file under resources/views, resources/css and resources/js — showcase example heredocs included — and fails on any Tailwind breakpoint prefix and on any media query or `matchMedia` string at 40, 48, 64 or 80rem (or 640/768/1024/ 1280px, or the 39.99rem that stood for "below 640"). Both scans were checked against a deliberately reintroduced `sm:w-auto` and an 80rem query. Every render test that asserted a `sm:`/`lg:`/`xl:` class now asserts the M3 class, the drawer's pane query is 52.5rem, and the theme script keeps `data-rail-auto` through `wire:navigate`. NavigationTest drives the shell at 599/600/839/840/1199/1200/1600 with the expectation each class carries: the bar on a compact window, the 96px rail from the medium class's first pixel, a standard rail collapsed through expanded whose menu button widens it in place with no scrim, and the rail expanded to begin with from large and at extra-large. (Not run here — the Browser suite is out of scope for this stream.) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
93 lines
4.0 KiB
PHP
93 lines
4.0 KiB
PHP
<?php
|
|
|
|
it('draws a checkbox whose row is its label', function () {
|
|
$html = (string) $this->blade('<x-checkbox id="notify" label="Notify me" hint="On every download" wire:model="notify" class="mt-2" />');
|
|
|
|
expect($html)
|
|
->toContain('<div class="min-w-0 mt-2">')
|
|
->toContain('<label for="notify" data-selection')
|
|
->toContain('data-checkbox')
|
|
->toContain('type="checkbox"')
|
|
->toContain('wire:model="notify"')
|
|
->toContain('data-check')
|
|
->toContain('data-mixed')
|
|
->toContain('Notify me')
|
|
->toContain('On every download')
|
|
->not->toContain('data-indeterminate');
|
|
});
|
|
|
|
it('marks a checkbox that is partly ticked', function () {
|
|
expect((string) $this->blade('<x-checkbox label="Select all" indeterminate />'))->toContain('data-indeterminate');
|
|
});
|
|
|
|
it('puts a checkbox at the end of its row on request', function () {
|
|
expect((string) $this->blade('<x-checkbox label="Show" right />'))->toContain('flex-row-reverse justify-between');
|
|
});
|
|
|
|
it('shows a checkbox\'s errors', function () {
|
|
$html = (string) $this->withViewErrors(['terms' => ['Accept the terms to continue.']])
|
|
->blade('<x-checkbox id="terms" label="I accept the terms" wire:model="terms" />');
|
|
|
|
expect($html)
|
|
->toContain('data-invalid')
|
|
->toContain('aria-invalid="true"')
|
|
->toContain('aria-describedby="terms-support"')
|
|
->toContain('Accept the terms to continue.');
|
|
});
|
|
|
|
it('draws radio buttons in a fieldset named by its question', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-radio label="Who can open it" wire:model.live="audience" :options="[
|
|
['id' => 'anyone', 'name' => 'Anyone with the link'],
|
|
['id' => 'password', 'name' => 'Anyone with the password', 'hint' => 'Share it separately'],
|
|
['id' => 'team', 'name' => 'My team', 'disabled' => true],
|
|
]" />
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('<fieldset')
|
|
->toContain('Who can open it</legend>')
|
|
->and(substr_count($html, 'type="radio"'))->toBe(3)
|
|
->and(substr_count($html, 'name="audience"'))->toBe(3)
|
|
->and(substr_count($html, 'wire:model.live="audience"'))->toBe(3)
|
|
->and($html)->toContain('value="password"')
|
|
->toContain('Share it separately')
|
|
->toMatch('/value="team"\s+disabled/');
|
|
});
|
|
|
|
it('names unbound radios after their group and checks the given value', function () {
|
|
$html = (string) $this->blade('<x-radio name="theme" value="dark" inline :options="[[\'id\' => \'light\', \'name\' => \'Light\'], [\'id\' => \'dark\', \'name\' => \'Dark\']]" />');
|
|
|
|
expect($html)
|
|
->toContain('medium:flex')
|
|
->and(substr_count($html, 'name="theme"'))->toBe(2)
|
|
->and($html)->toMatch('/value="dark"\s+checked/')
|
|
->not->toMatch('/value="light"\s+checked/');
|
|
});
|
|
|
|
it('shows the errors of a radio group', function () {
|
|
expect((string) $this->withViewErrors(['audience' => ['Choose who can open it.']])
|
|
->blade('<x-radio wire:model="audience" :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))
|
|
->toContain('data-invalid')
|
|
->toContain('Choose who can open it.');
|
|
});
|
|
|
|
it('draws a switch on a checkbox with the switch role', function () {
|
|
$html = (string) $this->blade('<x-toggle id="public" label="Public link" wire:model.live="public" right />');
|
|
|
|
expect($html)
|
|
->toContain('<label for="public" data-selection')
|
|
->toContain('data-switch')
|
|
->toContain('role="switch"')
|
|
->toContain('type="checkbox"')
|
|
->toContain('wire:model.live="public"')
|
|
->toContain('data-handle')
|
|
->toContain('flex-row-reverse')
|
|
->not->toContain('data-icons');
|
|
});
|
|
|
|
it('puts icons on a switch\'s handle', function () {
|
|
expect((string) $this->blade('<x-toggle label="Wi-Fi" icons />'))->toContain('data-icons="both"')->toContain('data-on')->toContain('data-off')
|
|
->and((string) $this->blade('<x-toggle label="Wi-Fi" icons="selected" />'))->toContain('data-icons="selected"');
|
|
});
|