') ->toMatch('//') ->toContain('type="radio"') ->toContain('name="theme"') ->toContain('x-model="theme"') ->toContain('value="light"') ->toContain('disabled') ->toContain('Light') ->and(substr_count($html, 'toBe(1); }); it('squares a choice\'s ends, and still rounds the chosen segment', function () { $options = [['id' => 'a', 'name' => 'A']]; expect((string) $this->blade('', ['options' => $options]))->toContain('data-md-button-group="connected" data-md-size="sm" data-md-shape="square"') ->and((string) $this->blade('', ['options' => $options]))->toContain('data-md-shape="round"') ->and(ComponentStylesheet::read('button-group')->declarations("[data-md-button-group][data-md-shape='square']"))->toBe(['--md-button-group-outer' => 'var(--md-button-group-inner)']) ->and(ComponentStylesheet::read('button-group')->declarations("[data-md-button-group='connected'] > :is([aria-pressed='true'], :has(:checked))"))->toBe(['--md-button-group-corner' => 'var(--md-button-group-full)']) ->and(ComponentStylesheet::read('group')->imports())->toBe(['./icon.css', './button-group.css']); }); it('keeps a 48px target and a 48px minimum width on the smallest connected segments, from the foundation\'s class', function () { $css = ComponentStylesheet::read('group'); $options = [['id' => 'a', 'name' => 'A']]; expect($css->declarations("[data-md-group]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-group-segment]"))->toBe(['min-inline-size' => 'var(--md-sys-measurement-space600)']) ->and($css->has("[data-md-group]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-group-segment]::after"))->toBeFalse() ->and($css->declarations('[data-md-group-segment]'))->toMatchArray(['min-inline-size' => '0']) ->and(ComponentStylesheet::read('button-group')->declarations("[data-md-button-group='connected']:is([data-md-size='xs'], [data-md-size='sm']) > *"))->toBe(['min-inline-size' => 'var(--md-sys-measurement-space600)']) ->and((string) $this->blade('', ['options' => $options])) ->toMatch('/class="md-state-layer\s+md-touch-target\s*"/') ->and((string) $this->blade('', ['options' => $options])) ->toMatch('/class="md-state-layer\s*"/') ->not->toContain('md-touch-target'); }); it('sizes its segments as M3\'s buttons', function (string $size, string $height, string $padding, string $type, int $icon) { $html = (string) $this->blade(" 'a', 'name' => 'A', 'icon' => 'home']]\" />"); expect($html)->toContain("data-md-size=\"{$size}\"")->toContain("--md-icon-size: {$icon}px") ->and(ComponentStylesheet::read('group')->declarations("[data-md-group][data-md-size='{$size}'] [data-md-group-segment]"))->toMatchArray([ 'block-size' => $height, 'padding-inline' => $padding, 'font' => "var(--md-sys-typescale-{$type})", ]); })->with([ 'xs' => ['xs', '32px', 'var(--md-sys-measurement-space200)', 'label-lg', 20], 'sm' => ['sm', '40px', 'var(--md-sys-measurement-space200)', 'label-lg', 20], 'md' => ['md', '56px', 'var(--md-sys-measurement-space300)', 'title-md', 24], 'lg' => ['lg', '96px', 'var(--md-sys-measurement-space600)', 'headline-sm', 32], 'xl' => ['xl', '136px', 'var(--md-sys-measurement-space800)', 'headline-lg', 40], ]); it('draws several choices as checkboxes, in the toggle button\'s colours', function () { $css = ComponentStylesheet::read('group'); expect((string) $this->blade('')) ->toContain('type="checkbox"') ->toContain('name="days[]"') ->toContain('data-md-variant="outlined"') ->toContain('data-md-multiple') ->and($css->declarations('[data-md-group-segment]:has(:checked)'))->toBe(['--md-group-container' => 'var(--md-sys-color-secondary)', '--md-group-label' => 'var(--md-sys-color-on-secondary)']) ->and($css->declarations("[data-md-group][data-md-variant='filled'] [data-md-group-segment]:has(:checked)"))->toBe(['--md-group-container' => 'var(--md-sys-color-primary)', '--md-group-label' => 'var(--md-sys-color-on-primary)']) ->and($css->declarations("[data-md-group][data-md-variant='outlined'] [data-md-group-segment]:has(:checked)"))->toBe(['--md-group-container' => 'var(--md-sys-color-inverse-surface)', '--md-group-label' => 'var(--md-sys-color-inverse-on-surface)', 'border-color' => 'transparent']) ->and($css->declarations('[data-md-group-segment]:has(:disabled)'))->toMatchArray(['cursor' => 'not-allowed']) ->and($css->declarations('[data-md-group-segment]:has(:disabled)::before'))->toBe(['display' => 'none']) ->and($css->declarations('[data-md-group-segment]:has(:focus-visible)'))->toBe(['outline' => '3px solid var(--md-sys-color-secondary)', 'outline-offset' => '2px']) ->and($css->declarations('[data-md-group-segment]:has(:focus-visible)::before'))->toBe(['opacity' => 'var(--md-sys-state-focus-state-layer-opacity)']) ->and($css->has('[data-md-group-segment]::before'))->toBeFalse() ->and((string) $this->blade(''))->toContain('data-md-variant="tonal"'); }); 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'

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('', ['options' => $options])) ->toContain('

No elevation data here

') ->and((string) $this->blade('', ['options' => $options])) ->toContain('

No elevation data here

') ->and(ComponentStylesheet::read('group')->declarations('[data-md-group-hint]'))->toBe(['color' => 'var(--md-sys-color-on-surface-variant)']); expect((string) $this->withViewErrors(['terrain' => 'Pick a terrain.'])->blade('', ['options' => $options])) ->toContain('

Pick a terrain.

') ->not->toContain('No elevation data here') ->not->toContain('md-ink-warning'); });