Merge pull request #254 from DFE-Digital/automatic-active-class-on-cu…

…rrent-page

Automatic active nav item on current page

app/components/govuk_component/header_component.rb

@@ -55,7 +55,7 @@ def container_classes
   class NavigationItem < GovukComponent::Base
     attr_reader :text, :href, :options, :active
 
-    def initialize(text:, href: nil, options: {}, active: false, classes: [], html_attributes: {})
+    def initialize(text:, href: nil, options: {}, active: nil, classes: [], html_attributes: {})
       super(classes: classes, html_attributes: html_attributes)
 
       @text    = text
@@ -65,6 +65,8 @@ def initialize(text:, href: nil, options: {}, active: false, classes: [], html_a
     end
 
     def active?
+      return current_page?(href) if active.nil?
+
       active
     end
 

spec/components/govuk_component/header_component_spec.rb

@@ -1,6 +1,13 @@
 require 'spec_helper'
 
 RSpec.describe(GovukComponent::HeaderComponent, type: :component) do
+  before do
+    allow_any_instance_of(GovukComponent::HeaderComponent::NavigationItem).to(
+      receive(:request).and_return(double(ActionDispatch::Request, get?: true, path: current_page))
+    )
+  end
+
+  let(:current_page) { "/item-3" }
   let(:component_css_class) { 'govuk-header' }
 
   let(:product_name) { 'Order an amazing ID' }
@@ -213,6 +220,14 @@
         end
       end
 
+      specify 'nav item on current page has active class' do
+        active_link = navigation_items.detect { |item| item[:href] == current_page }
+
+        expect(rendered_component).to have_tag('nav') do
+          with_tag('li', text: active_link.fetch(:text), with: { class: 'govuk-header__navigation-item--active' }, count: 1)
+        end
+      end
+
       describe 'menu button (for mobile)' do
         let(:button_text) { 'Menu' }
         let(:button_classes) { %w(govuk-header__menu-button govuk-js-header-toggle) }