livewire-material/tests/Feature/Components/ChoicesTest.php

<?php

use Livewire\Component;
use Livewire\Livewire;

it('lays every option out as a filter chip', function () {
    $html = (string) $this->blade('<x-choices label="Days" hint="Pick any" :value="[2]" :options="[[\'id\' => 1, \'name\' => \'Mon\'], [\'id\' => 2, \'name\' => \'Tue\'], [\'id\' => 3, \'name\' => \'Wed\', \'disabled\' => true]]" />');

    expect($html)
        ->toMatch('/<div\\s+data-md-choices\\s/')
        ->not->toContain('data-md-searchable')
        ->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<int> */
        public array $days = [1, 3];

        public function render(): string
        {
            return '<div><x-choices wire:model.live="days" :options="[[\'id\' => 1, \'name\' => \'Mon\'], [\'id\' => 2, \'name\' => \'Tue\'], [\'id\' => 3, \'name\' => \'Wed\']]" /></div>';
        }
    });

    $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('<x-choices id="zone" label="Time zone" searchable icon="public" value="Europe/Zurich" :options="[[\'id\' => \'Europe/Zurich\', \'name\' => \'Zurich\']]" />');

    expect($html)
        ->toMatch('/<div\\s+data-md-choices\\s+data-md-searchable\\s/')
        ->toContain('role="combobox"')
        ->toContain('aria-controls="zone-list"')
        ->toContain('aria-expanded="false"')
        ->toContain('<ul')
        ->toContain('id="zone-list"')
        ->toContain('role="listbox"')
        ->toContain('popover="manual"')
        ->toMatch('/anchor-name: (--material-choices-[a-z0-9]{10})/')
        ->toContain('x-modelable="value"')
        ->toContain('data-md-field-arrow')
        // WAI-ARIA's combobox keyboard, Home and End included.
        ->toContain('x-on:keydown.home="jump($event, false)"')
        ->toContain('x-on:keydown.end="jump($event, true)"')
        ->toContain('<li x-show="filtered.length === 0" data-md-choices-empty>Nothing matches</li>')
        ->toContain('data-md-field-menu')
        ->toContain('data-md-field-option')
        ->not->toContain('class=');

    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<int> */
        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'
                <div>
                    <x-choices wire:model="days" :options="[['id' => 1, 'name' => 'Mon']]" />
                    <x-choices wire:model="zone" searchable :options="[['id' => 'UTC', 'name' => 'UTC']]" />
                </div>
                BLADE;
        }
    });

    expect(Livewire::test('choices-errors')->html())
        ->toContain('Mon is not a working day.')
        ->toContain('Choose a time zone.')
        ->toContain('aria-invalid="true"');
});

it('brings the stylesheets of what it renders, and draws its empty row', function () {
    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/choices.css');

    expect($css)->toContain("@import './field.css';")
        ->toContain("@import './chip-set.css';")
        ->toContain("@import './chip.css';")
        ->toContain('[data-md-choices-empty] {');
});