Files
coolify/tests/Feature/SidebarNavigationMarkupTest.php
T
Andras Bacsai 8e57a9ab6b feat(ui): align auth pages to shared shell and truncate team names
Move email verification and team invitation into x-auth.shell with
shared guidance/alert patterns. Truncate long team names in the mobile
header switcher so actions stay visible. Cover both with markup tests.
2026-08-05 21:35:13 +02:00

97 lines
5.0 KiB
PHP

<?php
it('initializes persisted sidebar state before enabling layout transitions', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
expect($layout)
->toContain("collapsed: localStorage.getItem('sidebarCollapsed') === 'true'")
->toContain('sidebarReady: false')
->toContain(":class=\"[collapsed ? 'lg:w-16' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']\"")
->toContain(":class=\"[collapsed ? 'lg:ml-16' : 'lg:ml-56', sidebarReady ? 'transition-[margin] duration-200' : '']\"");
});
it('shows the coolify icon in the collapsed desktop brand slot', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
expect($layout)
->toContain('x-show="collapsed" x-cloak src="/coolify-logo.svg" alt="Coolify"')
->not->toContain('>C</span>');
});
it('does not animate navbar padding when restoring collapsed state', function () {
$navbar = file_get_contents(resource_path('views/components/navbar.blade.php'));
expect($navbar)
->not->toContain('items-start gap-3 motion-safe:transition-all')
->not->toContain('overflow-hidden motion-safe:transition-all');
});
it('draws a single border between the desktop sidebar and main content', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
$navbar = file_get_contents(resource_path('views/components/navbar.blade.php'));
expect($navbar)->toContain('border-r border-neutral-200')
->and($layout)->not->toContain('lg:border-l border-neutral-200');
});
it('separates the mobile sidebar from the page with a visible border', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
expect($layout)->toContain('max-w-56 min-w-0 flex-col border-l border-neutral-200 bg-white shadow-xl dark:border-white/[0.12] dark:bg-panel');
});
it('truncates long team names within the mobile header', function () {
$layout = file_get_contents(resource_path('views/layouts/app.blade.php'));
$switcher = file_get_contents(resource_path('views/livewire/switch-team.blade.php'));
expect($layout)
->toContain('flex min-w-0 flex-1 items-center gap-2.5')
->toContain('size-8 shrink-0 items-center justify-center rounded-lg')
->toContain('flex shrink-0 items-center gap-1')
->and($switcher)
->toContain('group/team flex h-8 min-w-0 max-w-full items-center')
->toContain('min-w-0 truncate text-[13px]');
});
it('shows section titles and descriptions above settings navigation on smaller screens', function (string $view, string $title, string $description) {
$layout = file_get_contents(resource_path("views/components/{$view}"));
$css = file_get_contents(resource_path('css/app.css'));
expect($layout)
->toContain('<header class="settings-mobile-header xl:hidden">')
->toContain("<h1 class=\"settings-mobile-title\">{$title}</h1>")
->toContain("<p class=\"settings-mobile-description\">{$description}</p>")
->toContain('<section class="application-settings-workspace w-full max-w-[1180px]">')
->and($css)
->toContain('.settings-mobile-title')
->toContain('.settings-mobile-description')
->toContain('color: #000000;')
->toContain('.dark .settings-mobile-title')
->toContain('color: #ffffff;');
})->with([
['notification/settings-layout.blade.php', 'Notifications', 'Configure how your team receives deployment and system alerts.'],
['security/settings-layout.blade.php', 'Keys & Tokens', 'Manage SSH keys, cloud credentials, and API access tokens.'],
['settings/layout.blade.php', 'Instance Settings', 'Configure global settings for this Coolify instance.'],
['team/settings-layout.blade.php', 'Team', 'Manage your team, members, and access settings.'],
]);
it('uses the structured sidebar and action HUD for server navigation', function () {
$navbar = file_get_contents(resource_path('views/livewire/server/navbar.blade.php'));
$sidebar = file_get_contents(resource_path('views/components/server/sidebar.blade.php'));
$resources = file_get_contents(resource_path('views/livewire/server/resources.blade.php'));
$terminal = file_get_contents(resource_path('views/livewire/project/shared/execute-container-command.blade.php'));
expect($navbar)
->toContain('class="hidden xl:fixed xl:top-14 xl:right-4 xl:z-30 xl:flex')
->toContain('<x-resource-heading-tabs class="hidden" aria-hidden="true">')
->toContain('dark:bg-coolgray-100! dark:text-white!')
->and($sidebar)
->toContain("'label' => 'Proxy'")
->toContain("'label' => 'Sentinel'")
->toContain("'label' => 'Resources'")
->toContain("'label' => 'Terminal'")
->toContain("'label' => 'Security'")
->and($resources)->toContain('<x-server.sidebar :server="$server" activeMenu="resources" />')
->and($terminal)->toContain('<x-server.sidebar :server="$resource" activeMenu="terminal" />');
});