Move browser-test probes off Tailwind utility classes
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:
co-authored by
Claude Sonnet 5
parent
067626c52e
commit
d15312023b
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user