[2.x] Clean up navigation view markup

packages/framework/resources/views/components/docs/sidebar-items.blade.php

@@ -6,6 +6,7 @@
     </ul>
 @else
     <ul id="sidebar-items" role="list">
+        @php /** @var \Hyde\Framework\Features\Navigation\NavGroupItem $group */ @endphp
         @foreach ($sidebar->getItems() as $group)
             <li class="sidebar-group" role="listitem" @if($sidebar->isCollapsible()) x-data="{ groupOpen: {{ $sidebar->isGroupActive($group->getGroupKey()) ? 'true' : 'false' }} }" @endif>
                 <header @class(['sidebar-group-header p-2 px-4 -ml-2 flex justify-between items-center', 'group hover:bg-black/10' => $sidebar->isCollapsible()]) @if($sidebar->isCollapsible()) @click="groupOpen = ! groupOpen" @endif>

packages/framework/resources/views/components/navigation/dropdown.blade.php

@@ -9,7 +9,7 @@
             @isset($items)
                 @foreach ($items as $item)
                     <li class="whitespace-nowrap">
-                        @include('hyde::components.navigation.navigation-link')
+                        <x-hyde::navigation.navigation-link :item="$item"/>
                     </li>
                 @endforeach
             @else

packages/framework/resources/views/components/navigation/navigation-link.blade.php

@@ -1,4 +1,6 @@
-<a href="{{ $item }}" {!! $item->isActive() ? 'aria-current="page"' : '' !!} @class([
-    'block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100',
-    'border-l-4 border-indigo-500 md:border-none font-medium -ml-6 pl-5 md:ml-0 md:pl-0 bg-gray-100 dark:bg-gray-800 md:bg-transparent dark:md:bg-transparent' => $item->isActive()
-])>{{ $item->getLabel() }}</a>
+<a href="{{ $item }}" {{ $attributes->except('item')->class([
+    'navigation-link block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100',
+    'navigation-link-active border-l-4 border-indigo-500 md:border-none font-medium -ml-6 pl-5 md:ml-0 md:pl-0 bg-gray-100 dark:bg-gray-800 md:bg-transparent dark:md:bg-transparent' => $item->isActive()
+])->merge([
+    'aria-current' => $item->isActive() ? 'page' : false,
+]) }}>{{ $item->getLabel() }}</a>

packages/framework/resources/views/layouts/navigation.blade.php

@@ -38,7 +38,7 @@
                     @if($item instanceof \Hyde\Framework\Features\Navigation\NavGroupItem)
                         <x-hyde::navigation.dropdown :label="$item->getLabel()" :items="$item->getItems()"/>
                     @else
-                        @include('hyde::components.navigation.navigation-link')
+                        <x-hyde::navigation.navigation-link :item="$item"/>
                     @endif
                 </li>
             @endforeach

packages/framework/tests/Unit/Views/NavigationLinkViewTest.php

@@ -4,9 +4,11 @@
 
 namespace Hyde\Framework\Testing\Unit\Views;
 
+use Hyde\Pages\InMemoryPage;
+use Hyde\Support\Models\Route;
 use Hyde\Testing\TestsBladeViews;
 use Hyde\Testing\Support\TestView;
-use Hyde\Foundation\Facades\Routes;
+use Illuminate\View\ComponentAttributeBag;
 use Hyde\Framework\Features\Navigation\NavItem;
 use Hyde\Testing\TestCase;
 
@@ -24,39 +26,66 @@ protected function setUp(): void
         $this->mockPage();
     }
 
-    protected function render(?NavItem $item = null): string
+    protected function testView(): TestView
     {
-        return view('hyde::components.navigation.navigation-link', [
-            'item' => $item ?? NavItem::forLink('foo.html', 'Foo'),
-        ])->render();
+        return $this->view(view('hyde::components.navigation.navigation-link', [
+            'item' => NavItem::forRoute(new Route(new InMemoryPage('foo')), 'Foo'),
+            'attributes' => new ComponentAttributeBag(),
+        ]));
     }
 
-    protected function testView(?NavItem $item = null): TestView
+    public function testComponentRenders()
     {
-        return $this->view(view('hyde::components.navigation.navigation-link', [
-            'item' => $item ?? NavItem::forLink('foo.html', 'Foo'),
-        ]));
+        $this->testView()->assertHasElement('<a>');
     }
 
     public function testComponentLinksToRouteDestination()
     {
-        $this->testView()->assertAttributeIs('href', 'foo.html');
+        $this->testView()->assertAttributeIs('href="foo.html"');
+    }
+
+    public function testComponentResolvesRelativeLinksForRoutes()
+    {
+        $this->mockCurrentPage('foo/bar');
+
+        $this->testView()->assertAttributeIs('href="../foo.html"');
     }
 
     public function testComponentUsesTitle()
     {
         $this->testView()->assertTextIs('Foo');
     }
 
+    public function testComponentDoesNotHaveCurrentAttributesWhenCurrentRouteDoesNotMatch()
+    {
+        $this->testView()
+            ->assertDontSee('current')
+            ->assertDoesNotHaveAttribute('aria-current');
+    }
+
     public function testComponentIsCurrentWhenCurrentRouteMatches()
     {
-        $this->mockRoute(Routes::get('index'));
-        $this->assertStringContainsString('current', $this->render(NavItem::forRoute(Routes::get('index'), 'Home')));
+        $this->mockCurrentPage('foo');
+
+        $this->testView()
+            ->assertSee('current')
+            ->assertHasAttribute('aria-current')
+            ->assertAttributeIs('aria-current="page"');
+    }
+
+    public function testComponentDoesNotHaveActiveClassWhenNotActive()
+    {
+        $this->testView()
+            ->assertHasClass('navigation-link')
+            ->assertDoesNotHaveClass('navigation-link-active');
     }
 
-    public function testComponentHasAriaCurrentWhenCurrentRouteMatches()
+    public function testComponentHasActiveClassWhenActive()
     {
-        $this->mockRoute(Routes::get('index'));
-        $this->assertStringContainsString('aria-current="page"', $this->render(NavItem::forRoute(Routes::get('index'), 'Home')));
+        $this->mockCurrentPage('foo');
+
+        $this->testView()
+            ->assertHasClass('navigation-link')
+            ->assertHasClass('navigation-link-active');
     }
 }

packages/framework/tests/Unit/Views/NavigationMenuViewTest.php

@@ -73,7 +73,7 @@ public function testNavigationMenuWithRootPages()
         $contents = $foo->compile();
 
         $this->assertStringContainsString('<a href="foo.html" aria-current="page" class="', $contents);
-        $this->assertStringContainsString('<a href="bar.html"  class="', $contents);
+        $this->assertStringContainsString('<a href="bar.html" class="', $contents);
     }
 
     public function testNavigationMenuWithDropdownPages()

packages/framework/tests/Unit/Views/SidebarItemsViewTest.php

@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Hyde\Framework\Testing\Unit\Views;
+
+use Hyde\Hyde;
+use Hyde\Testing\TestCase;
+use Hyde\Support\Models\Route;
+use Hyde\Testing\TestsBladeViews;
+use Hyde\Pages\DocumentationPage;
+use Hyde\Testing\Support\TestView;
+use Hyde\Framework\Features\Navigation\DocumentationSidebar;
+use Hyde\Framework\Features\Navigation\NavigationMenuGenerator;
+
+/**
+ * @see resources/views/components/docs/sidebar-items.blade.php
+ */
+class SidebarItemsViewTest extends TestCase
+{
+    use TestsBladeViews;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->mockRoute();
+    }
+
+    protected function testView(): TestView
+    {
+        Hyde::routes()->addRoute(new Route(new DocumentationPage('foo')));
+        Hyde::routes()->addRoute(new Route(new DocumentationPage('bar')));
+        Hyde::routes()->addRoute(new Route(new DocumentationPage('baz')));
+
+        return $this->view(view('hyde::components.docs.sidebar-items', [
+            'sidebar' => NavigationMenuGenerator::handle(DocumentationSidebar::class),
+        ]));
+    }
+
+    public function testComponentRenders()
+    {
+        $this->testView()->assertHasElement('#sidebar-items')->assertSeeTimes('listitem', 3);
+    }
+
+    public function testViewDoesNotContainActiveStateWhenNoPageIsActive()
+    {
+        $this->testView()
+            ->assertDontSee('active')
+            ->assertDontSee('Table of contents')
+            ->assertDoesNotHaveAttribute('aria-current');
+    }
+
+    public function testViewContainsActiveStateWhenPageIsActive()
+    {
+        $this->mockCurrentPage('docs/foo');
+        $this->mockPage(new DocumentationPage('foo'));
+
+        $this->testView()
+            ->assertSeeOnce('active')
+            ->assertSeeOnce('Table of contents')
+            ->assertHasAttribute('aria-current')
+            ->assertAttributeIs('aria-current="true"');
+    }
+
+    public function testTypeAnnotationIsNotPresentInHtml()
+    {
+        $this->testView()->assertDontSee('@var')->assertDontSee('$group');
+    }
+}