Andreas Reinhold / reiniandClaude Opus 5
ab7317faae
<x-group hint-class> adds classes to the hint, as the text fields' hint-class does, and a validation message still replaces the hint. <x-menu-item icon-class> adds classes to the leading icon, for an icon whose colour means something of its own, such as a sport's glyph. A colour class there has to win over the component's own colour, and which of two colour utilities wins depends on the order Tailwind emits them (text-error comes before text-on-surface-variant). So when either prop is given, the component's own colour is written with a :where() variant that carries no specificity, as the fields' hint colour sits in the components layer. A disabled item's icon stays disabled. Without the props the markup is unchanged. The skill now also lists the fields' hint-class, which it had left out. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
100 lines
4.3 KiB
PHP
100 lines
4.3 KiB
PHP
<?php
|
|
|
|
use Livewire\Component;
|
|
use Livewire\Livewire;
|
|
|
|
it('groups buttons with the spacing of their size', function () {
|
|
expect((string) $this->blade('<x-button-group label="Views" size="md"><x-button label="Day" /></x-button-group>'))
|
|
->toContain('role="group"')
|
|
->toContain('aria-label="Views"')
|
|
->toContain('data-button-group="standard"')
|
|
->toContain('data-size="md"')
|
|
->toContain('gap-2')
|
|
->and((string) $this->blade('<x-button-group><x-button label="Day" /></x-button-group>'))
|
|
->toContain('gap-3');
|
|
});
|
|
|
|
it('connects buttons 2px apart', function () {
|
|
expect((string) $this->blade('<x-button-group connected><x-button label="Day" /></x-button-group>'))
|
|
->toContain('data-button-group="connected"')
|
|
->toContain('gap-0.5')
|
|
->not->toContain('flex-wrap');
|
|
});
|
|
|
|
it('marks icon buttons, which keep their width when a group is pressed', function () {
|
|
expect((string) $this->blade('<x-button icon="format_bold" aria-label="Bold" />'))->toContain('data-icon-button')
|
|
->and((string) $this->blade('<x-button label="Bold" />'))->not->toContain('data-icon-button');
|
|
});
|
|
|
|
it('draws a choice as connected radios', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-group label="Theme" name="theme" x-model="theme" :options="[
|
|
['id' => 'light', 'name' => 'Light', 'icon' => 'light_mode'],
|
|
['id' => 'dark', 'name' => 'Dark', 'disabled' => true],
|
|
]" />
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('<legend class="mb-2 type-label-lg text-on-surface-variant">Theme</legend>')
|
|
->toContain('data-button-group="connected"')
|
|
->toContain('type="radio"')
|
|
->toContain('name="theme"')
|
|
->toContain('x-model="theme"')
|
|
->toContain('value="light"')
|
|
->toContain('has-checked:bg-secondary has-checked:text-on-secondary')
|
|
->toContain('disabled')
|
|
->and(substr_count($html, '<svg'))->toBe(1);
|
|
});
|
|
|
|
it('draws several choices as checkboxes', function () {
|
|
expect((string) $this->blade('<x-group name="days" multiple variant="outlined" :options="[[\'id\' => \'mon\', \'name\' => \'Mon\']]" />'))
|
|
->toContain('type="checkbox"')
|
|
->toContain('name="days[]"')
|
|
->toContain('has-checked:bg-inverse-surface');
|
|
});
|
|
|
|
it('binds to a Livewire property and shows its validation message', function () {
|
|
$component = new class extends Component
|
|
{
|
|
public string $theme = 'dark';
|
|
|
|
public function save(): void
|
|
{
|
|
$this->validate(['theme' => 'in:light'], ['theme.in' => 'Pick light.']);
|
|
}
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-group wire:model="theme" hint="How it looks" :options="[['id' => 'light', 'name' => 'Light'], ['id' => 'dark', 'name' => 'Dark']]" />
|
|
</div>
|
|
BLADE;
|
|
}
|
|
};
|
|
|
|
Livewire::test($component)
|
|
->assertSeeHtml('wire:model="theme"')
|
|
->assertSee('How it looks')
|
|
->set('theme', 'light')
|
|
->assertSet('theme', 'light')
|
|
->set('theme', 'dark')
|
|
->call('save')
|
|
->assertSee('Pick light.')
|
|
->assertDontSee('How it looks');
|
|
});
|
|
|
|
it('adds hint-class to the hint, which a validation message still replaces', function () {
|
|
$options = [['id' => 'flat', 'name' => 'Flat'], ['id' => 'hilly', 'name' => 'Hilly']];
|
|
|
|
expect((string) $this->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="text-warning" :$options />', ['options' => $options]))
|
|
->toContain('<p class="mt-1 type-body-sm [:where(&)]:text-on-surface-variant text-warning">No elevation data here</p>')
|
|
->and((string) $this->blade('<x-group wire:model="terrain" hint="No elevation data here" :$options />', ['options' => $options]))
|
|
->toContain('<p class="mt-1 type-body-sm text-on-surface-variant">No elevation data here</p>');
|
|
|
|
expect((string) $this->withViewErrors(['terrain' => 'Pick a terrain.'])->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="text-warning" :$options />', ['options' => $options]))
|
|
->toContain('<p class="mt-1 type-body-sm text-error">Pick a terrain.</p>')
|
|
->not->toContain('No elevation data here')
|
|
->not->toContain('text-warning');
|
|
});
|