noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move browser-test probes off Tailwind utility classes

Browse Source 
Plan step 38 (last batch), plan step 42's target for tests/: every
Tailwind utility class in a tests/Browser/*.php probe's Blade string
or Livewire component render() (~60 class attributes across 14 files)
becomes an inline style built from --md-sys-color-*/--md-sys-shape-*/
--md-sys-measurement-* tokens or a literal px value for an arbitrary
demo size — PickingTest's clip box, every probe's <body
class="bg-surface">, the grid/stack/row wrapper divs, the carousel
item's coloured filler. No test's assertions, selectors or expected
text change; these are layout containers around the components under
test, not anything a test reads.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 05:34:20 +02:00
co-authored by Claude Sonnet 5
parent 067626c52e
commit d15312023b
14 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ContainmentTest.php
+11 -11
View File
@@ -21,7 +21,7 @@ class OverlayProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="space-y-4 p-4">
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
<p>confirming: <span id="confirming">{{ var_export($confirming, true) }}</span></p>
<p>deleting: <span id="deleting">{{ var_export($deletingId, true) }}</span></p>
<p>renders: <span id="renders">{{ $renders }}</span></p>
@@ -65,7 +65,7 @@ class CollapseProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="space-y-4 p-4">
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
<p>fine tuning: <span id="fine-tuning">{{ var_export($fineTuning, true) }}</span></p>
<p>renders: <span id="renders">{{ $renders }}</span></p>
@@ -97,7 +97,7 @@ function collapseProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:collapse-probe />
@livewireScripts
</body>
@@ -120,7 +120,7 @@ function overlayProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:overlay-probe />
@livewireScripts
</body>
@@ -258,7 +258,7 @@ function nestedDialogProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:nested-dialog-probe />
@livewireScripts
</body>
@@ -396,7 +396,7 @@ function textOnlyDialogProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:text-only-dialog-probe />
@livewireScripts
</body>
@@ -637,8 +637,8 @@ it('slides the side sheet in from its own edge in a right-to-left page', functio
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<div x-data="{ open: false }" class="p-4">
<body style="background-color: var(--md-sys-color-surface);">
<div x-data="{ open: false }" style="padding: var(--md-sys-measurement-space200);">
<x-button label="Open" x-on:click="open = true" />
<x-drawer title="Filters">Narrow the list down.</x-drawer>
</div>
@@ -706,7 +706,7 @@ it('keeps a basic dialog\'s own title and padding when it is nested inside a ful
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:nested-fullscreen-dialog-probe />
@livewireScripts
</body>
@@ -764,8 +764,8 @@ it('keeps a selected segmented row\'s fill under the hover and focus tint', func
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<div class="p-4" style="max-width: 400px">
<body style="background-color: var(--md-sys-color-surface);">
<div style="padding: var(--md-sys-measurement-space200); max-width: 400px;">
<x-list segmented label="Rows">
<x-list-item title="Selected" link="#segmented-selected-row-probe" :selected="true" />
<x-list-item title="Plain" link="#segmented-selected-row-probe" />