noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
145f60aa1175af29fb72f1f03fdd8dcebf5c4d44
livewire-material/tests/Feature/Components/NavigationBarTest.php
T
Andreas Reinhold / reiniandClaude Opus 5 fb7007c976
tests / feature (8.4) (push) Successful in 2m0s
Details
tests / feature (8.5) (push) Successful in 2m0s
Details
tests / browser (chrome, chromium) (push) Failing after 8m3s
Details
tests / browser (firefox, firefox) (push) Failing after 12m58s
Details
tests / browser (safari, webkit) (push) Failing after 13m8s
Details
Take Tailwind out of the package, and its detection out of the guard 
Tailwind left the stack in 2.0.0, but the package still carried about 330
mentions of it. What the guard's Tailwind detection protected — a class
that compiles to nothing — is now protected by a check that does not care
where a dead class came from.

DesignGuard: about 500 lines of Tailwind tables, scales, palettes and
"2.0.0 replacement" hints give way to one check — a class a view or PHP
file writes that neither the application's stylesheets nor the package's
own declare. It catches a utility of any framework, a typo and a class
whose rules were deleted alike, so it also found two classes ReStride
draws nothing with. A stylesheet has to be in reach for it: the `.css`
files among the scanned paths, or what the `missingStylesheets()` entry
imports. The class reader no longer mistakes an array index for a class
list (`$block['base']`), and it reads the array a class helper is given,
where it read nothing before.

The package's own three Tailwind self-guards go with it. Only their one
unique check stays, as a test of its own: every `matchMedia` width in
resources/js is an M3 breakpoint.

The pagination views are `material.blade.php` and
`simple-material.blade.php`; only Laravel's and Livewire's default theme
names ever made them `tailwind`. The provider sets `Paginator`'s default
views and switches `livewire.pagination_theme` to `material` when it is
still Livewire's own default, so no application can forget the config; a
theme an application chose, and a component's own `$paginationTheme` or
`paginationView()`, still win.

The rest is prose: the layer-order guidance for an application that still
builds Tailwind, the Tailwind wording in the README, the Boost guidelines
and the development skill, and about 25 "this used to be a Tailwind
utility" comments, along with every "plan step NN" pointer into a
gitignored folder. The reset keeps its credit, and NOTICE now carries it
too.

Feature suite 1159 passed, Chrome browser suite 299 passed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 21:07:39 +02:00

114 lines
7.1 KiB
PHP
Raw Blame History

<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('draws a navigation landmark around its items', function () {
expect((string) $this->blade('<x-navigation-bar><x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" /></x-navigation-bar>'))
->toMatch('/<nav\s+aria-label="Main"\s+data-md-navigation-bar/')
->toContain('data-md-navigation-bar-items')
->and((string) $this->blade('<x-navigation-bar label="Sections" />'))->toContain('aria-label="Sections"');
});
it('links a destination through wire:navigate unless told not to', function () {
expect((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" />'))
->toContain('<a data-md-navigation-bar-item')
->toContain('href="/inbox"')
->toContain('wire:navigate')
->and((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" no-wire-navigate />'))->not->toContain('wire:navigate')
->and((string) $this->blade('<x-navigation-bar-item label="Help" icon="help" link="https://example.com" external />'))
->toContain('target="_blank"')
->not->toContain('wire:navigate');
});
it('is a button without a link', function () {
expect((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" wire:click="show(\'inbox\')" />'))
->toContain('<button data-md-navigation-bar-item')
->toContain('type="button"')
->not->toContain('href=');
});
it('marks the current destination with aria-current and the filled icon', function () {
$active = (string) $this->blade('<x-navigation-bar-item label="Starred" icon="star" link="/starred" active />');
$inactive = (string) $this->blade('<x-navigation-bar-item label="Starred" icon="star" link="/starred" />');
$symbol = fn (string $html): string => preg_match('/<svg.*?<\/svg>/s', $html, $svg) ? $svg[0] : '';
expect($active)->toContain('aria-current="page"')->toContain('data-md-active')
->and($inactive)->not->toContain('aria-current')->not->toContain('data-md-active')
->and($symbol($active))->toBe(trim((string) $this->blade('<x-icon name="star" filled />')))
->and($symbol($inactive))->toBe(trim((string) $this->blade('<x-icon name="star" />')))
->and($symbol($active))->not->toBe($symbol($inactive));
});
it('badges the icon with a dot or a count that screen readers hear', function () {
$count = (string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" badge="1200" />');
$dot = (string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" :badge="true" badge-label="New mail" />');
expect($count)->toContain('999+')->toContain('<span class="md-visually-hidden">, 1200</span>')
->and($dot)->toContain('data-md-dot')->toContain('<span class="md-visually-hidden">, New mail</span>')
->and((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" />'))->not->toContain('md-visually-hidden');
});
it('keeps the bar item on the label and state-layer colours M3 tokens', function () {
$bar = ComponentStylesheet::read('navigation-bar-item');
$shared = ComponentStylesheet::read('navigation-item');
// NavigationBarTokens names one label font for both icon positions: label-medium.
expect($bar->declarations('[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill]', ['@container (width >= 600px)']))
->not->toHaveKey('font')
// The indicator and the pill wash in on-secondary-container, as the rail's do, from
// the shared file both the bar's and the rail's items import.
->and($shared->declarations('[data-md-navigation-bar-item] [data-md-navigation-indicator]::before, [data-md-navigation-bar-item] [data-md-navigation-pill]::before, [data-md-navigation-rail-item]::before, [data-md-navigation-rail-item] [data-md-navigation-indicator]::before'))
->toHaveKey('background-color', 'var(--md-sys-color-on-secondary-container)');
});
it('takes M3\'s tall container, which keeps the vertical item layout at every width', function () {
expect((string) $this->blade('<x-navigation-bar tall><x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" /></x-navigation-bar>'))
->toMatch('/data-md-navigation-bar\s+data-md-tall\s/')
->and((string) $this->blade('<x-navigation-bar />'))->not->toContain('data-md-tall');
$css = ComponentStylesheet::read('navigation-bar');
// NavigationBarTokens.TallContainerHeight, 80dp, against the short bar's 64.
expect($css->declarations('[data-md-navigation-bar][data-md-tall] [data-md-navigation-bar-items]'))
->toBe(['min-height' => '80px']);
// The vertical layout is the base — a compact bar and a tall one at any width share it — and
// only the short bar's horizontal layout is behind the 600px container query, so no rule
// inside it reaches an item without saying `:not([data-md-tall])` first.
$item = ComponentStylesheet::read('navigation-bar-item');
expect($item->has('[data-md-navigation-bar-item]'))->toBeTrue()
->and($item->has('[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]', ['@container (width >= 600px)']))->toBeTrue();
});
it('hides on a scroll down and springs back on a scroll up', function () {
expect((string) $this->blade('<x-navigation-bar hide-on-scroll />'))
->toContain('data-md-hide-on-scroll')
->toContain('x-data="materialNavigationBar"')
->toContain('x-bind:data-md-hidden="away ? \'\' : null"')
// Focus reaching the bar brings it back — the web's nearest answer to M3's "never hide it
// while a screen reader is active".
->toContain('x-on:focusin="show()"')
->and((string) $this->blade('<x-navigation-bar />'))
->not->toContain('data-md-hide-on-scroll')
->not->toContain('materialNavigationBar');
$css = ComponentStylesheet::read('navigation-bar');
// The spatial spring, which reduced motion zeroes along with every other duration token.
expect($css->declarations('[data-md-navigation-bar][data-md-hide-on-scroll]'))
->toBe(['transition' => 'translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default)'])
->and($css->declarations('[data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden]'))
->toBe(['translate' => '0 100%'])
// Reads --material-bottom-bar back from <x-scaffold>: layout/scaffold.css publishes it in
// `material.layout`, which this rule's own `material.components` always outranks, so both
// sit in a layer.
->and($css->declarations('[data-md-scaffold]:has([data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden])'))
->toBe(['--material-bottom-bar' => 'calc(var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px))']);
expect(file_get_contents(__DIR__.'/../../../resources/js/navigation.js'))
// Never out from under a snackbar, a bottom sheet or a drawer resting on its edge.
->toContain("document.querySelectorAll('[data-md-toast-snackbar], [role=\"dialog\"]')");
});
Reference in New Issue View Git Blame Copy Permalink