') ->toMatch('//') ->toContain('') ->toContain('type="checkbox"') ->toContain('wire:model="notify"') ->toContain('data-md-checkbox-check') ->toContain('data-md-checkbox-mixed') ->toContain('Notify me') ->toContain('On every download') ->not->toContain('data-md-indeterminate') ->not->toContain('min-w-0'); }); it('fills the box with an 18px tick from the 20 optical cut', function () { expect((string) $this->blade('')) ->toContain((string) $this->blade('')) ->toContain((string) $this->blade('')) ->toContain('--md-icon-size: 18px'); }); it('marks a checkbox that is partly ticked', function () { expect((string) $this->blade(''))->toContain('data-md-indeterminate'); }); it('gives a selection control without a label a 48px target', function () { expect((string) $this->blade(''))->toMatch('//') ->and((string) $this->blade(''))->toMatch('//') ->and((string) $this->blade(''))->toMatch('//'); // A labelled control is pressed anywhere along its row, so it needs no extra target. expect((string) $this->blade(''))->not->toContain('md-touch-target') ->and((string) $this->blade(''))->not->toContain('md-touch-target') ->and((string) $this->blade(''))->not->toContain('md-touch-target'); }); it('leaves a checkbox group to the caller and says how M3 wants it laid out', function () { $html = (string) $this->blade(<<<'BLADE'

Tell me about

BLADE); expect($html) ->toContain('class="grid gap-4 expanded:grid-cols-2"') ->toContain('Downloads') ->toContain('Comments') ->and(substr_count($html, 'data-md-checkbox-box'))->toBe(2); // The rule is guidance, not markup, so the component's header has to carry it. expect(file_get_contents(__DIR__.'/../../../resources/views/components/checkbox.blade.php')) ->toContain('expanded') ->toContain('contained region'); }); it('puts a checkbox at the end of its row on request', function () { expect((string) $this->blade(''))->toMatch('//') ->and((string) $this->blade(''))->not->toContain('data-md-right'); }); it('shows a checkbox\'s errors', function () { $html = (string) $this->withViewErrors(['terms' => ['Accept the terms to continue.']]) ->blade(''); expect($html) ->toContain('data-md-invalid') ->toContain('

') ->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' BLADE); expect($html) ->toMatch('/toContain('Who can open it') ->toContain('

') ->toContain('Share it separately') ->not->toContain('class=') ->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(''); expect($html) ->toMatch('/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('')) ->toContain('data-md-invalid') ->toMatch('/

/') ->toContain('Choose who can open it.'); }); it('draws a switch on a checkbox with the switch role', function () { $html = (string) $this->blade(''); expect($html) ->toMatch('/

/') ->toMatch('//') ->toContain('data-md-switch') ->toContain('role="switch"') ->toContain('type="checkbox"') ->toContain('wire:model.live="public"') ->toContain('data-md-switch-handle') ->not->toContain('class=') ->not->toContain('data-md-icons'); }); it('puts icons on a switch\'s handle', function () { expect((string) $this->blade(''))->toContain('data-md-icons="both"')->toContain('data-md-switch-on')->toContain('data-md-switch-off') ->and((string) $this->blade(''))->toContain('--md-icon-size: 16px') ->and((string) $this->blade(''))->toContain('data-md-icons="selected"'); }); it('draws the checkbox from its stylesheet, on the row the selection controls share', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/checkbox.css'); expect($css)->toContain("@import './selection.css';") ->toContain("@import './icon.css';") ->toContain('@layer material.components') ->toMatch('/\\[data-md-checkbox-box\\] \\{[^}]*width: 18px;[^}]*height: 18px;/') ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components/selection.css')) ->toContain('[data-md-selection-row]') ->toContain('@layer material.components') ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/checkbox.css';") ->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('selection.css'); }); it('lays the radio group out from its stylesheet, inline only from 600px', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/radio.css'); expect($css)->toContain("@import './selection.css';") ->toMatch('/@media \$width >= 600px\$ \\{\\s*\\[data-md-radio\\]\\[data-md-inline\\] \\[data-md-radio-options\\] \\{\\s*display: flex;/') ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/radio.css';") ->and((string) $this->blade('')) ->toMatch('/data-md-radio\\s+class="mt-4" style="order: 1"/'); }); it('draws the switch from its stylesheet', function () { expect((string) file_get_contents(__DIR__.'/../../../resources/css/components/toggle.css')) ->toContain("@import './selection.css';") ->toMatch('/\\[data-md-switch\\] \\{[^}]*width: 52px;[^}]*height: 32px;/') ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/toggle.css';"); });