Andreas Reinhold / reiniandClaude Opus 5
6c7414d60e
Plan step 36. <x-loading> renders data-md-loading and data-md-contained, and loading.css in material.components draws the 48px indicator in primary, the contained circle and the still shape under reduced motion. The view no longer reads the caller's classes to decide its size and colour: a caller's utility outranks the package's layer on its own. ActionStylesheetsTest checks the group's stylesheets for the package's shape (layer statement, plain imports, material.components, tokens, px breakpoints, imports of rendered components) and its views for class lists; tests/Support/ComponentStylesheet reads a rule's declarations. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
68 lines
3.4 KiB
PHP
68 lines
3.4 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('is a named progressbar, drawn by its stylesheet rather than by classes', function () {
|
|
$html = (string) $this->blade('<x-loading />');
|
|
|
|
expect($html)
|
|
->toContain('data-md-loading')
|
|
->toContain('role="progressbar"')
|
|
->toContain('aria-label="Loading"')
|
|
->toContain('<animateTransform')
|
|
->toMatch('/<svg data-md-loading-animated="data-md-loading-animated" aria-hidden="true" focusable="false"/')
|
|
->toMatch('/<svg data-md-loading-still="data-md-loading-still" aria-hidden="true" focusable="false"/')
|
|
->not->toContain('class=');
|
|
});
|
|
|
|
it('is 48px in the primary colour unless the caller sizes or colours it', function () {
|
|
$css = ComponentStylesheet::read('loading');
|
|
|
|
expect($css->declarations('[data-md-loading]'))
|
|
->toMatchArray(['inline-size' => '48px', 'block-size' => '48px', 'color' => 'var(--md-sys-color-primary)'])
|
|
// A caller's class lands on the root untouched, and outranks the package's layer.
|
|
->and((string) $this->blade('<x-loading class="size-24 text-tertiary" label="Uploading" />'))
|
|
->toContain('class="size-24 text-tertiary"')
|
|
->toContain('aria-label="Uploading"');
|
|
});
|
|
|
|
it('sits on a primary-container circle when contained', function () {
|
|
expect((string) $this->blade('<x-loading contained />'))->toContain('data-md-contained')
|
|
->and((string) $this->blade('<x-loading />'))->not->toContain('data-md-contained')
|
|
->and(ComponentStylesheet::read('loading')->declarations('[data-md-loading][data-md-contained]'))->toBe([
|
|
'border-radius' => 'var(--md-sys-shape-corner-full)',
|
|
'background-color' => 'var(--md-sys-color-primary-container)',
|
|
'color' => 'var(--md-sys-color-on-primary-container)',
|
|
]);
|
|
});
|
|
|
|
it('rests the same shape under reduced motion', function () {
|
|
$css = ComponentStylesheet::read('loading');
|
|
|
|
expect($css->declarations('[data-md-loading] > [data-md-loading-still]'))->toBe(['display' => 'none'])
|
|
->and($css->declarations('[data-md-loading] > [data-md-loading-animated]', ['@media (prefers-reduced-motion: reduce)']))->toBe(['display' => 'none'])
|
|
->and($css->declarations('[data-md-loading] > [data-md-loading-still]', ['@media (prefers-reduced-motion: reduce)']))->toBe(['display' => 'block']);
|
|
});
|
|
|
|
it('says nothing where something else already does', function () {
|
|
expect((string) $this->blade('<x-loading :label="false" />'))
|
|
->toContain('aria-hidden="true"')
|
|
->not->toContain('role="progressbar"');
|
|
|
|
expect((string) $this->blade('<x-button label="Save" wire:click="save" spinner />'))
|
|
->toContain('<animateTransform')
|
|
->not->toContain('role="progressbar"');
|
|
});
|
|
|
|
it('animates without script and rests the same shape', function () {
|
|
$animated = file_get_contents(__DIR__.'/../../../resources/svg/loading-indicator/indeterminate.svg');
|
|
$static = file_get_contents(__DIR__.'/../../../resources/svg/loading-indicator/static.svg');
|
|
|
|
expect($animated)->toStartWith('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">')
|
|
->toContain('repeatCount="indefinite"')
|
|
->not->toContain('<script')
|
|
->not->toContain('__ID__')
|
|
->and($static)->toStartWith('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">')
|
|
->not->toContain('<animate');
|
|
});
|