blade(<<<'BLADE'
BLADE);
preg_match('/anchor-name: (--material-rich-tooltip-[a-z0-9]+)/', $html, $anchor);
expect($anchor)->not->toBeEmpty()
->and($html)
->toContain('data-md-rich-tooltip')
->toContain('')
->toContain('x-data="materialRichTooltip(false)"')
->toContain('popover="manual"')
->toContain('role="tooltip"')
->toContain('data-md-rich-tooltip-bubble')
->toContain('data-md-side="bottom"')
->toContain("position-anchor: {$anchor[1]}")
->toContain('data-md-rich-tooltip-title')
->toContain('>Expiry')
->toContain('data-md-rich-tooltip-text')
->toContain('Recipients lose access after this time.')
->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-bubble]'))->toMatchArray([
'border-radius' => 'var(--md-sys-shape-corner-md)',
'background-color' => 'var(--md-sys-color-surface-container)',
'box-shadow' => 'var(--md-sys-elevation-2)',
'max-width' => '312px',
])
->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-title]'))->toMatchArray([
'font' => 'var(--md-sys-typescale-title-sm)',
'color' => 'var(--md-sys-color-on-surface-variant)',
]);
});
it('opens on press and stays when persistent', function () {
expect((string) $this->blade(''))
->toContain('x-data="materialRichTooltip(true)"')
->toContain('popover="auto"')
->toContain('role="dialog"')
->toContain('data-md-rich-tooltip-actions')
->toContain('');
});
it('places the bubble by the side asked for, on the anchor positioning fallback that suits it', function () {
$css = ComponentStylesheet::read('rich-tooltip');
expect((string) $this->blade(''))->toContain('data-md-side="left"')
->and($css->declarations("[data-md-rich-tooltip-bubble][data-md-side='left']"))->toBe(['position-area' => 'left span-bottom'])
->and($css->declarations("[data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right'])"))->toMatchArray([
'position-try-fallbacks' => 'flip-inline, flip-block',
]);
});
it('falls back to bottom for an unknown side', function () {
expect((string) $this->blade(''))
->toContain('data-md-side="bottom"');
});