Add core component tests

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

matestack-ui-core.gemspec

@@ -8,7 +8,7 @@ Gem::Specification.new do |s|
   s.name        = "matestack-ui-core"
   s.version     = Matestack::Ui::Core::VERSION
   s.authors     = ["Jonas Jabari", "Pascal Wengerter", "Christopher Bastert"]
-  s.email       = ["jonas@basemate.io", "pascal@basemate.io", "chris@basemate.io"]
+  s.email       = ["jonas@basemate.com", "pascal@basemate.com", "chris@basemate.com"]
   s.homepage    = "https://basemate.io"
   s.summary     = "Escape the frontend hustle. Create beautiful software easily. Use matestack."
   s.description = "We're replacing the original view-layer of Ruby on Rails, the most productive MVC framework we know, with our technology. By introducing matestack we get dynamic, fast and simple user interfaces without the need to touch HTML/HAML/ERB/JS/CSS. Plus, it feels like a single page application, but there's no need for all the API hustle SPAs usually bring with them."

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>