BLADE; } }; Livewire::test($component) ->assertSeeHtml('assertSeeHtml('wire:ignore.self') ->assertSeeHtml('open: window.Livewire.find(') ->assertSeeHtml("entangle('confirming').live") ->assertSeeHtml('close() { this.open = typeof this.open === \'boolean\' ? false : null }') ->assertSeeHtml('rounded-corner-xl bg-surface-container-high') ->assertSeeHtml('type-headline-sm') ->assertSee('This cannot be undone.') ->assertSeeHtml('text-center') ->assertDontSeeHtml('wire:model="confirming"'); }); it('uses the surrounding Alpine scope without wire:model, and stays open when persistent', function () { $html = (string) $this->blade('Text'); expect($html) ->toContain('x-data="{ close() { this.open = false } }"') ->toContain('x-on:cancel.prevent=""') ->not->toContain('x-on:click.self') ->toContain('max-sm:h-dvh') ->toContain('aria-label="Close"'); }); it('keeps a full-screen dialog\'s subtitle on a phone, where its bar carries the title', function () { $html = (string) $this->blade('Text'); expect($html) ->toMatch('/

/') ->toContain('

Scan the code

') ->not->toContain('
') ->and((string) $this->blade('Text'))->toContain('
') ->and((string) $this->blade('Text'))->toContain('

Only a subtitle

'); }); it('slides a side sheet in from either edge, and is a pane from xl when asked', function () { expect((string) $this->blade('Body')) ->toContain('x-trap.inert.noscroll="open && ! wide"') ->toContain('end-0 sm:rounded-s-corner-lg') ->toContain('bg-surface-container-low') ->toContain('role="dialog"') ->toContain('aria-label="Close"') ->and((string) $this->blade('Body'))->toContain('start-0 sm:rounded-e-corner-lg') ->and((string) $this->blade('Body')) ->toContain('data-pane') ->toContain('--pane-width: 28rem') ->toContain("matchMedia('(min-width: 80rem)')"); }); it('draws a modal bottom sheet with a drag handle, or a standard one without a scrim', function () { expect((string) $this->blade('Body')) ->toContain('...materialBottomSheet(false)') ->toContain('bg-scrim/32') ->toContain('x-trap.inert.noscroll="open"') ->toContain('rounded-t-corner-xl bg-surface-container-low') ->toContain('data-drag-handle') ->toContain('aria-modal="true"') ->and((string) $this->blade('Body')) ->toContain('...materialBottomSheet(true)') ->not->toContain('bg-scrim/32') ->not->toContain('aria-modal'); });