Merge pull request #551 from marcosvafilho/dynamic_page_id

Add dynamic html id to Matestack pages

Author: jonasjabari

docs/ui-in-pure-ruby/overview.md

@@ -144,6 +144,16 @@ end
 ```
 {% endcode %}
 
+Both the controller and action names will be dynamically added to the `id` attribute of the page's root element, allowing CSS rules to directly target specific pages, and tests to easily locate the page's content.
+
+For example, the above controller code will result in the following HTML markup:
+
+```markup
+  <div id="matestack-page-some-controller-overview" class="matestack-page-root">
+    <!-- page content -->
+  </div>
+```
+
 Learn more about Pages:
 
 {% page-ref page="pages/" %}

lib/matestack/ui/core/page.rb

@@ -15,7 +15,7 @@ def create_children
 
         def page
           if params[:only_page]
-            div class: 'matestack-page-root' do
+            div id: page_id, class: 'matestack-page-root' do
               yield
             end
           else
@@ -28,12 +28,12 @@ def page
                 end
                 div class: 'matestack-page-wrapper', 'v-bind:class': '{ "loading": loading === true }' do
                   div 'v-if': 'asyncPageTemplate == null' do
-                    div class: 'matestack-page-root' do
+                    div id: page_id, class: 'matestack-page-root' do
                       yield
                     end
                   end
                   div 'v-if': 'asyncPageTemplate != null' do
-                    div class: 'matestack-page-root' do
+                    div id: page_id, class: 'matestack-page-root' do
                       Base.new('v-runtime-template', ':template': 'asyncPageTemplate')
                     end
                   end
@@ -57,6 +57,17 @@ def component_attributes
           }
         end
 
+        def page_id
+          controller = params[:controller]
+                         .parameterize
+                         .dasherize
+
+          action = params[:action]
+                     .underscore
+                     .dasherize
+
+          "matestack-page-#{controller}-#{action}"
+        end
       end
     end
   end

spec/test/base/core/page/rendering_spec.rb

@@ -6,12 +6,41 @@
   before :all do
     Rails.application.routes.append do
       scope "page_rendering_components_spec" do
-        get '/page_test', to: 'page_test#my_action', as: 'rendering_page_test_action'
+        get '/page_rendering_test', to: 'page_rendering_test#my_action'
       end
     end
     Rails.application.reload_routes!
+
+    class ExamplePageRendering < Matestack::Ui::Page
+      def response
+        div do
+          plain "ExamplePage"
+        end
+      end
+    end
+
+    class PageRenderingTestController < ActionController::Base
+      include Matestack::Ui::Core::Helper
+
+      def my_action
+        render ExamplePageRendering
+      end
+    end
   end
 
-  it "wraps page content with a specific dom structure"
+  before :each do
+    visit "page_rendering_components_spec/page_rendering_test"
+  end
+
+  it "wraps content with a specific dom structure" do
+    expect(page).to have_xpath('//div[@id="matestack-ui"]/div[@class="matestack-page-container"]/div[@class="matestack-page-wrapper"]')
+  end
 
+  it "renders its root element with a dynamic id composed of {controller} and {action}" do
+    expect(page).to have_xpath('//div[@id="matestack-page-page-rendering-test-my-action"]')
+  end
+
+  it "renders its root element with a specific class" do
+    expect(page).to have_xpath('//div[@class="matestack-page-root"]')
+  end
 end