Andreas Reinhold / reiniandClaude Sonnet 5
6897306e18
StylesheetsTest.php's new test runs DesignGuard's own family table (check (i)) over resources/views, resources/js, src, tests/Browser and tests/Feature — the guard turned on the package's own source, so the two never drift apart. tests/Feature/DesignGuardTest.php and tests/Fixtures/design-guard/ carry Tailwind on purpose and are left out. The scan found Tailwind-shaped class strings used as caller classes in 21 test files (a component test proving a caller's class lands on the root or a caller's size wins, mostly), left over from before Tailwind cleared the whole stack: replaced with neutral application-style names (`app-hero-icon`) or, where one already carries the right meaning, an `md-*` class (`md-text-end`, `md-ink-warning`). BreakpointsTest.php's own heredoc probe — which needs a genuine Tailwind-shaped breakpoint prefix to prove its detection works — now builds that one string from a placeholder at runtime, so its own source stays clean for this same scan. Plan step 42 (Phase F), Part A. 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="app-tooltip-wrapper" style="gap: 4px"><button>Copy</button></x-tooltip>'));
|
|
|
|
expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'app-tooltip-wrapper'])
|
|
->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);
|
|
});
|