blade('');
expect($html)
->toContain('role="group"')
->toContain('Days')
->toContain('Pick any')
->toContain('x-modelable="selection"')
->toContain('x-on:click="toggle(0)"')
->toContain('x-bind:aria-pressed="selected(2).toString()"')
->and(substr_count($html, 'aria-pressed="true"'))->toBe(1)
->and(substr_count($html, 'aria-pressed="false"'))->toBe(2)
->and($html)->toContain('disabled');
});
it('entangles the selection with its Livewire property and renders it as the property says', function () {
Livewire::component('choices-probe', new class extends Component
{
/** @var list */
public array $days = [1, 3];
public function render(): string
{
return '
';
}
});
$html = Livewire::test('choices-probe')->html();
expect($html)
->toContain(".entangle('days').live")
->not->toContain('x-modelable')
->and(substr_count($html, 'aria-pressed="true"'))->toBe(2);
});
it('draws a searchable combobox with a popover list', function () {
$html = (string) $this->blade('');
expect($html)
->toContain('role="combobox"')
->toContain('aria-controls="zone-list"')
->toContain('aria-expanded="false"')
->toContain('toContain('id="zone-list"')
->toContain('role="listbox"')
->toContain('popover="manual"')
->toMatch('/anchor-name: (--material-choices-[a-z0-9]{10})/')
->toContain('x-modelable="value"')
->toContain('field-arrow')
->toContain('Nothing matches');
preg_match('/anchor-name: (--material-choices-[a-z0-9]{10})/', $html, $anchor);
expect($html)->toContain("position-anchor: {$anchor[1]}");
});
it('shows the errors for the property and its items', function () {
Livewire::component('choices-errors', new class extends Component
{
/** @var list */
public array $days = [];
public ?string $zone = null;
public function mount(): void
{
$this->addError('days.0', 'Mon is not a working day.');
$this->addError('zone', 'Choose a time zone.');
}
public function render(): string
{
return <<<'BLADE'
BLADE;
}
});
expect(Livewire::test('choices-errors')->html())
->toContain('Mon is not a working day.')
->toContain('Choose a time zone.')
->toContain('aria-invalid="true"');
});