blade('Until the expiry.');
expect($html)
->toContain('toContain('wire:ignore.self')
->toContain(' open ')
->toContain('data-md-collapse')
->toContain('data-md-variant="filled"')
->toContain('data-md-collapse-icon')
->toContain('data-md-collapse-chevron')
->toContain('How long do links last?')
->toContain('Until the expiry.')
->toContain('class="md-state-layer md-focus-ring"');
});
it('has no Alpine on it without a binding', function () {
$html = (string) $this->blade('Body');
expect($html)
->toMatch('/not->toContain('x-data')
->not->toContain('x-modelable')
->not->toContain('x-on:toggle')
->and((string) $this->blade('Body'))
->toMatch('/blade('Body');
expect($html)
->toMatch('/x-data="{ collapseOpen:\s*true\s*}"/')
->toContain('x-modelable="collapseOpen"')
->toContain('x-model="advanced"')
->toContain('x-effect="$el.open = collapseOpen"')
->toContain('x-on:toggle="collapseOpen = $el.open"')
->toMatch('/\sopen\s/');
});
it('entangles its open state with a Livewire property and renders open as the property is', function (bool $fineTuning) {
Livewire::component('collapse-probe', new class extends Component
{
public bool $fineTuning = false;
public function render(): string
{
return 'Body
';
}
});
$html = Livewire::test('collapse-probe', ['fineTuning' => $fineTuning])->html();
expect($html)
->toContain(".entangle('fineTuning').live")
->not->toContain('x-modelable')
->not->toContain('wire:model');
preg_match('/]*>/', $html, $tag);
expect(preg_match('/\sopen\s/', $tag[0]) === 1)->toBe($fineTuning);
})->with(['open' => true, 'closed' => false]);
it('draws a filled collapse\'s padding and an open one\'s chevron on its own parts, never a nested collapse\'s', function () {
$css = ComponentStylesheet::read('collapse');
expect($css->declarations("[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space200)'])
->and($css->declarations("[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space200)'])
->and($css->declarations('[data-md-collapse][open] > [data-md-collapse-summary] > [data-md-collapse-chevron]'))->toBe(['rotate' => '180deg'])
->and($css->declarations('[data-md-collapse-summary]'))->toHaveKey('gap', '12px');
});