Andreas Reinhold / reiniandClaude Opus 5
4cc905b144
Plan step 36 (actions). <x-stat> renders data-md-stat with data-md-stat-header/-value/-description/-extra; no class list. stat.css draws the surface-container panel, the label-large header, the value as an emphasized-headline-md hero with tabular figures, and the body-small description. StatTest is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
35 lines
1.4 KiB
PHP
35 lines
1.4 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('shows a figure that counts, with its title and description', function () {
|
|
$html = (string) $this->blade('<x-stat title="Shares" value="1,204" icon="link" description="12 this week"><span>quota</span></x-stat>');
|
|
|
|
expect($html)
|
|
->toContain('data-md-stat')
|
|
->toContain('Shares')
|
|
->toContain('data-md-stat-value')
|
|
->toContain('x-figure>1,204</p>')
|
|
->toContain('data-md-stat-description')
|
|
->toContain('12 this week')
|
|
->toContain('data-md-stat-extra')
|
|
->toContain('<span>quota</span>')
|
|
->toContain('<svg')
|
|
->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat]'))->toMatchArray([
|
|
'background-color' => 'var(--md-sys-color-surface-container)',
|
|
'border-radius' => 'var(--md-sys-shape-corner-lg)',
|
|
])
|
|
->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat-value]'))->toMatchArray([
|
|
'font' => 'var(--md-sys-typescale-emphasized-headline-md)',
|
|
'font-variant-numeric' => 'tabular-nums',
|
|
]);
|
|
});
|
|
|
|
it('leaves out the description and slot when there is neither', function () {
|
|
$html = (string) $this->blade('<x-stat title="Files" value="8,317" />');
|
|
|
|
expect($html)
|
|
->not->toContain('data-md-stat-description')
|
|
->not->toContain('data-md-stat-extra');
|
|
});
|