minor test refactoring and improvements in table, list and br components

Author: pascalwengerter

app/concepts/br/view/br.haml

@@ -1,5 +1,5 @@
 - unless options[:times].nil?
   - options[:times].times do
-    %br
+    %br{@tag_attributes}
 - else
-  %br
+  %br{@tag_attributes}

app/concepts/ol/view/ol.haml

@@ -1,3 +1,3 @@
-%ol{"class": options[:class], "id": component_id}
+%ol{@tag_attributes}
   - if block_given?
     = yield

app/concepts/progress/cell/progress.rb

@@ -1,5 +1,14 @@
 module Progress::Cell
   class Progress < Component::Cell::Static
 
+    REQUIRED_KEYS = [:max]
+
+    def setup
+      @tag_attributes.merge!({
+         'value': options[:value] ||= 0, 
+         'max': options[:max]
+      })
+    end
+
   end
 end

app/concepts/progress/view/progress.haml

@@ -1,3 +1,3 @@
-%progress{"id": component_id, "class": options[:class], "value": options[:value], "max": options[:max]}
+%progress{@tag_attributes}
   - if block_given?
     = yield

app/concepts/table/view/table.haml

@@ -1,3 +1,3 @@
-%table{"class": options[:class], "id": component_id}
+%table{@tag_attributes}
   - if block_given?
     = yield

app/concepts/td/view/td.haml

@@ -1,8 +1,8 @@
 - if options[:text].nil?
-  %td{"class": options[:class], "id": component_id}
+  %td{@tag_attributes}
     - if block_given?
       = yield
 
 - else
-  %td{"class": options[:class], "id": component_id}
+  %td{@tag_attributes}
     = options[:text]

app/concepts/th/view/th.haml

@@ -1,8 +1,8 @@
 - if options[:text].nil?
-  %th{"class": options[:class], "id": component_id}
+  %th{@tag_attributes}
     - if block_given?
       = yield
 
 - else
-  %th{"class": options[:class], "id": component_id}
+  %th{@tag_attributes}
     = options[:text]

app/concepts/tr/view/tr.haml

@@ -1,3 +1,3 @@
-%tr{"class": options[:class], "id": component_id}
+%tr{@tag_attributes}
   - if block_given?
     = yield

spec/usage/components/br_spec.rb

@@ -18,6 +18,11 @@ def response
           plain 'hello'
           br times: 5
           plain 'world!'
+
+          # br tag with id and class
+          plain 'hello'
+          br id: 'my-br', class: 'fancy-br-class'
+          plain 'world!'
         }
       end
 
@@ -39,6 +44,10 @@ def response
     <br>
     <br>
     world!
+
+    hello
+    <br id="my-br" class="fancy-br-class">
+    world!
     HTML
 
     expected_static_output_2 = <<~HTML
@@ -53,6 +62,10 @@ def response
     <br/>
     <br/>
     world!
+
+    hello
+    <br id="my-br" class="fancy-br-class">
+    world!
     HTML
 
     expect(stripped(static_output)).to ( include(stripped(expected_static_output_1)) or include(stripped(expected_static_output_2)) )

spec/usage/components/progress_spec.rb

@@ -3,7 +3,7 @@
 
 describe 'Progress Component', type: :feature, js: true do
 
-  it 'Example 1' do
+  it 'Example 1: Test positive behavior' do
 
     class ExamplePage < Page::Cell::Page
 
@@ -13,6 +13,8 @@ def response
           progress value: 75, max: 100
           # enhanced progress bar
           progress id: 'my-id', class: 'my-class', value: 33, max: 330
+          # expect value to default to zero
+          progress max: 500
         }
       end
 
@@ -25,9 +27,28 @@ def response
     expected_static_output = <<~HTML
     <progress max="100" value="75"></progress>
     <progress id="my-id" max="330" value="33" class="my-class"></progress>
+    <progress max="500" value="0"></progress>
     HTML
 
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 
+  it 'Example 2: Test REQUIRED_KEYS' do
+
+    class ExamplePage < Page::Cell::Page
+
+      def response
+        components {
+          # miss max option
+          progress value: 75
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    expect(page).to have_content("progress > required key 'max' is missing")
+  end
+
 end

spec/usage/components/table_th_tr_td_spec.rb

@@ -72,10 +72,10 @@ def prepare
 
       def response
         components {
-          table class: 'foo' do
-            tr class: 'bar' do
+          table id: 'my-table-component', class: 'foo' do
+            tr id: 'my-first-table-row', class: 'bar' do
               @users.each do |user|
-                th text: user
+                th class: 'user-cell', text: user
               end
             end
             tr do
@@ -108,12 +108,12 @@ def response
     static_output = page.html
 
     expected_static_output = <<~HTML
-    <table class="foo">
+    <table id="my-table-component" class="foo">
       <tbody>
-        <tr class="bar">
-          <th>Jonas</th>
-          <th>Pascal</th>
-          <th>Chris</th>
+        <tr id="my-first-table-row" class="bar">
+          <th class="user-cell">Jonas</th>
+          <th class="user-cell">Pascal</th>
+          <th class="user-cell">Chris</th>
         </tr>
         <tr>
           <td>One</td>

spec/usage/components/ul_ol_li_spec.rb

@@ -17,7 +17,7 @@ def response
           end
 
           # advanced unordered list
-          ul id: 'custom-unordered-list' do
+          ul id: 'custom-unordered-list', class: 'custom-list' do
             li class: 'inline-li-element', text: 'I am inline text'
             li class: 'yield-li-element' do
               plain 'I am yielded plain'
@@ -42,7 +42,7 @@ def response
       <li>I am simple!</li>
     </ul>
 
-    <ul id="custom-unordered-list">
+    <ul id="custom-unordered-list" class="custom-list">
       <li class="inline-li-element">I am inline text</li>
       <li class="yield-li-element">I am yielded plain</li>
       <li class="inline-li-element">I am inline text</li>
@@ -66,7 +66,7 @@ def response
           end
 
           # advanced ordered list
-          ol id: 'custom-ordered-list' do
+          ol id: 'custom-ordered-list', class: 'custom-list' do
             li class: 'inline-li-element', text: 'I am inline text'
             li class: 'yield-li-element' do
               plain 'I am yielded plain'
@@ -91,7 +91,7 @@ def response
       <li>I am simple!</li>
     </ol>
 
-    <ol id="custom-ordered-list">
+    <ol id="custom-ordered-list" class="custom-list">
       <li class="inline-li-element">I am inline text</li>
       <li class="yield-li-element">I am yielded plain</li>
       <li class="inline-li-element">I am inline text</li>