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/ActionsTest.php
+10 -10
View File
@@ -19,7 +19,7 @@ class MenuAnchorProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid justify-items-start gap-6 p-4">
<div style="display: grid; justify-items: start; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>renders: <span id="renders">{{ $renders }}</span></p>
<x-menu label="Share actions">
@@ -74,7 +74,7 @@ class MenuMorphProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="p-4">
<div style="padding: var(--md-sys-measurement-space200);">
<p id="outside">renders: <span id="renders">{{ $renders }}</span>, created: <span id="created">{{ $created }}</span></p>
<x-menu label="Sort">
@@ -115,7 +115,7 @@ function menuMorphProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:menu-morph-probe />
@livewireScripts
</body>
@@ -289,7 +289,7 @@ it('hangs a menu on its menu button, even when the button is fixed to a corner o
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:menu-anchor-probe />
@livewireScripts
</body>
@@ -335,7 +335,7 @@ it('paints a group\'s hint and a menu item\'s icon in the colour their classes n
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<span id="error-ink" class="md-ink-error">Reference</span>
<div id="terrain">
<x-group name="terrain" hint="No elevation data here" hint-class="md-ink-error" :options="[['id' => 'flat', 'name' => 'Flat']]" />
@@ -520,7 +520,7 @@ class GroupSizeProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid gap-6 p-4">
<div style="display: grid; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<x-group name="xs-group" size="xs" :options="[['id' => 'a', 'name' => 'A'], ['id' => 'b', 'name' => 'B']]" />
<x-group name="sm-group" size="sm" :options="[['id' => 'a', 'name' => 'A'], ['id' => 'b', 'name' => 'B']]" />
</div>
@@ -540,7 +540,7 @@ function groupSizeProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:group-size-probe />
@livewireScripts
</body>
@@ -680,7 +680,7 @@ function longMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:long-menu-probe />
@livewireScripts
</body>
@@ -703,7 +703,7 @@ function sheetMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:sheet-menu-probe />
@livewireScripts
</body>
@@ -897,7 +897,7 @@ function longFabMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:long-fab-menu-probe />
@livewireScripts
</body>
tests/Browser/BarsTest.php
+4 -4
View File
@@ -29,7 +29,7 @@ class BarsProbe extends Component
<x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
</x-app-bar>
<div class="space-y-6 p-4">
<div style="display: flex; flex-direction: column; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>tab: <span id="tab">{{ $tab }}</span></p>
<x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
@@ -75,7 +75,7 @@ function barsProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:bars-probe />
@livewireScripts
</body>
@@ -238,7 +238,7 @@ function appBarOverflowProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:app-bar-overflow-probe />
@livewireScripts
</body>
@@ -311,7 +311,7 @@ function toolbarScaffoldProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<x-scaffold :destinations="[
['title' => 'Inbox', 'icon' => 'inbox', 'url' => '/toolbar-scaffold-probe', 'active' => true],
['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],
tests/Browser/CarouselTest.php
+6 -6
View File
@@ -20,10 +20,10 @@ class CarouselMorphProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="p-4" style="width: 600px">
<div style="padding: var(--md-sys-measurement-space200); width: 600px;">
<x-carousel label="Server" item-width="200">
@foreach (range(1, $count) as $number)
<x-carousel-item wire:key="item-{{ $number }}"><div class="size-full bg-primary-container"></div></x-carousel-item>
<x-carousel-item wire:key="item-{{ $number }}"><div style="width: 100%; height: 100%; background-color: var(--md-sys-color-primary-container);"></div></x-carousel-item>
@endforeach
</x-carousel>
<button type="button" wire:click="add">Add</button>
@@ -204,11 +204,11 @@ it('mirrors in a right-to-left page', function () {
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<div class="p-4" style="width: 600px">
<body style="background-color: var(--md-sys-color-surface);">
<div style="padding: var(--md-sys-measurement-space200); width: 600px;">
<x-carousel label="Right to left" item-width="200" controls>
@foreach (range(1, 6) as $number)
<x-carousel-item><div class="size-full bg-primary-container"></div></x-carousel-item>
<x-carousel-item><div style="width: 100%; height: 100%; background-color: var(--md-sys-color-primary-container);"></div></x-carousel-item>
@endforeach
</x-carousel>
</div>
@@ -245,7 +245,7 @@ it('measures itself again after a Livewire morph adds an item', function () {
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:carousel-morph-probe />
@livewireScripts
</body>
tests/Browser/ChipsTest.php
+2 -2
View File
@@ -26,7 +26,7 @@ class ChipProbe 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>kinds: <span id="kinds">{{ implode(',', $kinds) }}</span></p>
<x-chip-set label="Kinds">
@@ -61,7 +61,7 @@ function chipProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:chip-probe />
@livewireScripts
</body>
tests/Browser/CommunicationTest.php
+2 -2
View File
@@ -21,7 +21,7 @@ class RichTooltipMorphProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="p-4">
<div style="padding: var(--md-sys-measurement-space200);">
<p id="outside">renders: <span id="renders">{{ $renders }}</span></p>
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time." persistent>
@@ -262,7 +262,7 @@ it('keeps a rich tooltip open while its action renders the component, and opens
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:rich-tooltip-morph-probe />
@livewireScripts
</body>
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" />
tests/Browser/DataTest.php
+2 -2
View File
@@ -32,7 +32,7 @@ function dataProbe()
$views = sys_get_temp_dir().'/livewire-material-data-probe';
@mkdir($views);
file_put_contents($views.'/data.blade.php', <<<'BLADE'
<div class="p-4">
<div style="padding: var(--md-sys-measurement-space200);">
<x-table>
<thead>
<tr>
@@ -69,7 +69,7 @@ function dataProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:data-probe />
@livewireScripts
</body>
tests/Browser/DatepickerTest.php
+6 -6
View File
@@ -26,7 +26,7 @@ class DateProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-6 p-4">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>expires: <span id="expires">{{ $expires }}</span></p>
<p>birthday: <span id="birthday">{{ $birthday }}</span></p>
<p>delivery: <span id="delivery">{{ $delivery }}</span></p>
@@ -57,7 +57,7 @@ function dateProbe(string $locale = 'en')
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:date-probe />
@livewireScripts
</body>
@@ -83,7 +83,7 @@ class DateFormatProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-6 p-4">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>sunday: <span id="sunday">{{ $sunday }}</span></p>
<p>iso: <span id="iso">{{ $iso }}</span></p>
<p>dotted: <span id="dotted">{{ $dotted }}</span></p>
@@ -113,7 +113,7 @@ function dateFormatProbe(string $locale = 'en')
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:date-format-probe />
@livewireScripts
</body>
@@ -134,7 +134,7 @@ class ScopedDateProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-6 p-4" x-data="{ step: 1 }">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);" x-data="{ step: 1 }">
<x-datepicker id="early-field" label="Early" wire:model.live="early" min="2026-09-10" week-start="0" />
<x-datepicker id="late-field" label="Late" wire:model.live="late" week-start="1" />
</div>
@@ -154,7 +154,7 @@ function scopedDateProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:scoped-date-probe />
@livewireScripts
</body>
tests/Browser/FieldsTest.php
+2 -2
View File
@@ -28,7 +28,7 @@ class FieldProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-4 p-4">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
<p>name: <span id="name">{{ $name }}</span></p>
<p>hours: <span id="hours">{{ $hours }}</span></p>
<p>files: <span id="files">{{ implode(',', $files) }}</span></p>
@@ -75,7 +75,7 @@ function fieldProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:field-probe />
<x-toast />
@livewireScripts
tests/Browser/PickingTest.php
+4 -4
View File
@@ -19,20 +19,20 @@ class PickProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-6 p-4">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>days: <span id="days">{{ json_encode($days) }}</span></p>
<p>zone: <span id="zone">{{ $zone }}</span></p>
<p>query: <span id="query">{{ $query }}</span></p>
<x-choices label="Days" wire:model.live="days" :options="[['id' => 1, 'name' => 'Mon'], ['id' => 2, 'name' => 'Tue'], ['id' => 3, 'name' => 'Wed']]" />
<div id="clip" class="h-24 overflow-hidden rounded-corner-md bg-surface-container p-2">
<div id="clip" style="height: 96px; overflow: hidden; border-radius: var(--md-sys-shape-corner-md); background-color: var(--md-sys-color-surface-container); padding: var(--md-sys-measurement-space100);">
<x-choices id="zone-field" label="Time zone" searchable wire:model.live="zone" :options="[['id' => 'Europe/Berlin', 'name' => 'Berlin'], ['id' => 'Europe/Zurich', 'name' => 'Zurich'], ['id' => 'UTC', 'name' => 'UTC', 'disabled' => true]]" />
</div>
<x-search id="find" wire:model.live="query" placeholder="Search files">
@foreach (array_filter(['holiday.zip', 'contract.pdf', 'review.mp4'], fn ($file) => $query === '' || str_contains($file, $query)) as $file)
<button type="button" wire:key="result-{{ $file }}" class="block w-full px-4 py-3 text-start">{{ $file }}</button>
<button type="button" wire:key="result-{{ $file }}" style="display: block; width: 100%; padding: var(--md-sys-measurement-space150) var(--md-sys-measurement-space200); text-align: start;">{{ $file }}</button>
@endforeach
<x-slot:empty>No files match.</x-slot:empty>
</x-search>
@@ -68,7 +68,7 @@ function pickProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:pick-probe />
@livewireScripts
</body>
tests/Browser/ProgressTest.php
+2 -2
View File
@@ -20,7 +20,7 @@ class ProgressMorphProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="p-4">
<div style="padding: var(--md-sys-measurement-space200);">
<x-progress :value="$done" label="Server" />
<button type="button" wire:click="advance">Advance</button>
</div>
@@ -132,7 +132,7 @@ it('follows a value the server changes through a Livewire morph', function () {
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:progress-morph-probe />
@livewireScripts
</body>
tests/Browser/SliderTest.php
+1 -1
View File
@@ -46,7 +46,7 @@ function sliderProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:slider-probe />
@livewireScripts
</body>
tests/Browser/ThemeTest.php
+1 -1
View File
@@ -174,7 +174,7 @@ it('repaints the page\'s own theme-color meta, and the next page\'s after wire:n
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<p id="page">This is page {{ $page }}.</p>
<a id="next" href="/theme-color-probe/two" wire:navigate>Next</a>
@livewireScripts
tests/Browser/TimepickerTest.php
+2 -2
View File
@@ -23,7 +23,7 @@ class TimeProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid max-w-md gap-6 p-4">
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>meeting: <span id="meeting-value">{{ $meeting ?? 'null' }}</span></p>
<p>alarm: <span id="alarm-value">{{ $alarm ?? 'null' }}</span></p>
<p>appointment: <span id="slot-value">{{ $appointment ?? 'null' }}</span></p>
@@ -49,7 +49,7 @@ function timeProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:time-probe />
@livewireScripts
</body>