Andreas Reinhold / reiniandClaude Sonnet 5
cfc57a9867
Plan step 39 (part 0): the step 38 review found <x-scaffold> and <x-tooltip> never referencing $attributes, so a caller's class and style were silently dropped. The scaffold's root is its single data-md-scaffold div; the tooltip's root, documented in its header, is the standalone wrapper it draws around a trigger (data-md-tooltip-anchor, merged with its own anchor-name) — passed an anchor instead, it renders only a popover fragment beside another component's root and takes nothing of the caller's. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
66 lines
3.7 KiB
PHP
66 lines
3.7 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('wraps a trigger and anchors the bubble to it', function () {
|
|
$html = (string) $this->blade('<x-tooltip text="Copy link"><button>Copy</button></x-tooltip>');
|
|
|
|
preg_match('/anchor-name: (--material-tooltip-[a-z0-9]+)/', $html, $anchor);
|
|
|
|
expect($anchor)->not->toBeEmpty()
|
|
->and($html)
|
|
->toMatch('/<span data-md-tooltip-anchor style="anchor-name: --material-tooltip-[a-z0-9]+">\s*<button>Copy<\/button>/')
|
|
->toMatch('/<span\s+popover="manual"\s+aria-hidden="true"\s+x-data="materialTooltip"\s+data-md-tooltip\s+data-md-side="top"\s+style="position-anchor: '.preg_quote($anchor[1], '/').'"\s*>Copy link<\/span>/')
|
|
->not->toContain('class=');
|
|
});
|
|
|
|
it('places the bubble on the side asked for, 4px out, flipping when there is no room', function (string $side, string $axis, string $margin, string $flip) {
|
|
$css = ComponentStylesheet::read('tooltip');
|
|
|
|
expect((string) $this->blade("<x-tooltip text=\"Hi\" side=\"{$side}\"><span>x</span></x-tooltip>"))->toContain("data-md-side=\"{$side}\"")
|
|
->and($css->declarations("[data-md-tooltip][data-md-side='{$side}']"))->toBe(['position-area' => $side])
|
|
->and($css->declarations("[data-md-tooltip]:is({$axis})"))->toBe([$margin => 'var(--md-sys-measurement-space50)', 'position-try-fallbacks' => $flip]);
|
|
})->with([
|
|
'top' => ['top', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
|
|
'bottom' => ['bottom', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
|
|
'left' => ['left', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
|
|
'right' => ['right', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
|
|
]);
|
|
|
|
it('falls back to the top for a side it does not know', function () {
|
|
expect((string) $this->blade('<x-tooltip text="Hi" side="middle"><span>x</span></x-tooltip>'))->toContain('data-md-side="top"');
|
|
});
|
|
|
|
it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects spring', function () {
|
|
$css = ComponentStylesheet::read('tooltip');
|
|
|
|
expect($css->declarations('[data-md-tooltip]'))->toMatchArray([
|
|
'max-inline-size' => '200px',
|
|
'border-radius' => 'var(--md-sys-shape-corner-xs)',
|
|
'padding-block' => 'var(--md-sys-measurement-space50)',
|
|
'padding-inline' => 'var(--md-sys-measurement-space100)',
|
|
'background-color' => 'var(--md-sys-color-inverse-surface)',
|
|
'color' => 'var(--md-sys-color-inverse-on-surface)',
|
|
'font' => 'var(--md-sys-typescale-body-sm)',
|
|
'pointer-events' => 'none',
|
|
'opacity' => '0',
|
|
'transition-duration' => 'var(--md-sys-motion-effects-fast-duration)',
|
|
'transition-timing-function' => 'var(--md-sys-motion-effects-fast)',
|
|
'transition-behavior' => 'allow-discrete',
|
|
])
|
|
->and($css->declarations('[data-md-tooltip]:popover-open'))->toBe(['opacity' => '1'])
|
|
->and($css->declarations('[data-md-tooltip]:popover-open', ['@starting-style']))->toBe(['opacity' => '0']);
|
|
});
|
|
|
|
it('takes the caller\'s class and style on the standalone wrapper, its root', function () {
|
|
$root = layoutRoot((string) $this->blade('<x-tooltip text="Copy link" class="inline-flex" style="gap: 4px"><button>Copy</button></x-tooltip>'));
|
|
|
|
expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'inline-flex'])
|
|
->and($root['style'])->toStartWith('anchor-name: --material-tooltip-')->toEndWith('; gap: 4px;');
|
|
});
|
|
|
|
it('escapes its text', function () {
|
|
$this->blade('<x-tooltip text="<b>bold</b>"><span>x</span></x-tooltip>')
|
|
->assertSee('<b>bold</b>', false);
|
|
});
|