Andreas Reinhold / reiniandClaude Opus 5
bdbb76a0bd
<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20 cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape size> writes --md-shape-size. Both draw from plain-CSS stylesheets in material.components, gathered in components.css until all.css replaces it; a caller's size class still wins while the other components are rewritten. Plan steps 35 and 36, the prop every component rewrite depends on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
44 lines
2.1 KiB
PHP
44 lines
2.1 KiB
PHP
<?php
|
|
|
|
use Illuminate\View\ViewException;
|
|
use NoNameWeb\LivewireMaterial\Support\SvgFile;
|
|
|
|
it('ships M3 Expressive\'s 35 shapes', function () {
|
|
expect(SvgFile::shapeNames())->toHaveCount(35)
|
|
->toContain('circle', 'cookie-9', 'clover-4', 'soft-burst', 'pixel-triangle', 'heart');
|
|
});
|
|
|
|
it('draws every shape as one path in the text colour, filling a 100-unit box', function () {
|
|
foreach (SvgFile::shapeNames() as $shape) {
|
|
$svg = file_get_contents(__DIR__."/../../../resources/svg/shapes/{$shape}.svg");
|
|
|
|
expect($svg)->toMatch('#^<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor"><path d="[MCZ0-9. -]+"/></svg>\n$#');
|
|
|
|
preg_match_all('/-?\d+(?:\.\d+)?/', str($svg)->after(' d="')->before('"')->toString(), $numbers);
|
|
$xs = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 0, ARRAY_FILTER_USE_KEY));
|
|
$ys = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 1, ARRAY_FILTER_USE_KEY));
|
|
|
|
expect(min([...$xs, ...$ys]))->toBeGreaterThanOrEqual(0)
|
|
->and(max([...$xs, ...$ys]))->toBeLessThanOrEqual(100)
|
|
->and(max(max($xs) - min($xs), max($ys) - min($ys)))->toBeGreaterThanOrEqual(96, "{$shape} does not fill its box");
|
|
}
|
|
});
|
|
|
|
it('renders a shape hidden from assistive tech', function () {
|
|
$this->blade('<x-shape name="cookie-9" class="size-20 text-secondary-container" />')
|
|
->assertSee('<svg data-md-shape="data-md-shape" aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
|
|
});
|
|
|
|
it('draws the size it is given', function () {
|
|
$this->blade('<x-shape name="cookie-9" size="160" />')
|
|
->assertSee('style="--md-shape-size: 160px"', false);
|
|
|
|
$this->blade('<x-shape name="cookie-9" size="huge" />')
|
|
->assertDontSee('--md-shape-size', false);
|
|
});
|
|
|
|
it('refuses a shape that does not exist', function () {
|
|
expect(fn () => $this->blade('<x-shape name="blob" />'))
|
|
->toThrow(ViewException::class, 'There is no M3 Expressive shape named [blob].');
|
|
});
|