ui_bibz 2.5.5 → 3.0.0.alpha6

data/test/ui/core/forms/selects/select_field_test.rb

@@ -4,9 +4,9 @@ require 'test_helper'
 
 class SelectFieldTest < ActionView::TestCase
   test 'Select Field' do
-    options  = options_for_select(2.times.map { |i| "option #{i}" })
+    options  = options_for_select(Array.new(2) { |i| "option #{i}" })
     actual   = UiBibz::Ui::Core::Forms::Selects::SelectField.new('example', option_tags: options).render
-    expected = "<select name=\"example\" id=\"example\" class=\"select-field form-control custom-select\"><option value=\"option 0\">option 0</option>
+    expected = "<select name=\"example\" id=\"example\" class=\"select-field form-control form-select\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></select>"
 
     assert_equal expected, actual
@@ -14,7 +14,7 @@ class SelectFieldTest < ActionView::TestCase
 
   test 'Select Field refresh' do
     actual   = UiBibz::Ui::Core::Forms::Selects::SelectField.new('example', refresh: { target: { url: '/' } }).render
-    expected = '<div class="field-refresh input-group ui_surround_field"><select name="example" id="example" class="select-field form-control custom-select"></select><div class="input-group-btn"><span data-connect="{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#example&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}" class="btn-secondary ui-bibz-connect btn input-refresh-button"><i class="glyph fas fa-sync-alt"></i> </span></div></div>'
+    expected = '<div class="field-refresh input-group ui_surround_field"><select name="example" id="example" class="select-field form-control form-select"></select><span data-connect="{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#example&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}" class="btn-secondary ui-bibz-connect btn input-refresh-button"><i class="glyph fas fa-sync-alt"></i> </span></div>'
 
     assert_equal expected, actual
   end

data/test/ui/core/forms/surrounds/surround_field_test.rb

@@ -7,7 +7,7 @@ class SurroundFieldTest < ActionView::TestCase
     actual = UiBibz::Ui::Core::Forms::Surrounds::SurroundField.new.tap do |sf|
       sf.glyph 'pencil'
     end.render
-    expected = '<div class="input-group ui_surround_field"><span class="input-group-addon"><i class="glyph fas fa-pencil"></i></span></div>'
+    expected = '<div class="input-group ui_surround_field"><span class="input-group-text"><i class="glyph fas fa-pencil"></i></span></div>'
 
     assert_equal expected, actual
   end
@@ -16,7 +16,7 @@ class SurroundFieldTest < ActionView::TestCase
     actual = UiBibz::Ui::Core::Forms::Surrounds::SurroundField.new.tap do |sf|
       sf.addon 'content addon'
     end.render
-    expected = '<div class="input-group ui_surround_field"><span class="input-group-addon">content addon</span></div>'
+    expected = '<div class="input-group ui_surround_field"><span class="input-group-text">content addon</span></div>'
 
     assert_equal expected, actual
   end
@@ -51,7 +51,43 @@ class SurroundFieldTest < ActionView::TestCase
       sf.addon '€'
       sf.glyph 'pencil'
     end.render
-    expected = '<div class="input-group ui_surround_field"><div class="input-group-btn"><button class="btn-secondary btn">Submit</button></div><span class="input-group-addon">€</span><span class="input-group-addon"><i class="glyph fas fa-pencil"></i></span></div>'
+    expected = '<div class="input-group ui_surround_field"><div class="input-group-btn"><button class="btn-secondary btn">Submit</button></div><span class="input-group-text">€</span><span class="input-group-text"><i class="glyph fas fa-pencil"></i></span></div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'surround_field with html' do
+    actual = UiBibz::Ui::Core::Forms::Surrounds::SurroundField.new.tap do |sf|
+      sf.html 'Content'
+      sf.html do
+        " Content 2"
+      end
+    end.render
+    expected = "<div class=\"input-group ui_surround_field\">Content Content 2</div>"
+
+    assert_equal expected, actual
+  end
+
+  test "surround with all fields" do
+    actual = UiBibz::Ui::Core::Forms::Surrounds::SurroundField.new.tap do |sf|
+      sf.glyph 'gem'
+      sf.addon "test"
+      sf.button "button"
+      sf.button_group do |bg|
+        bg.button "test"
+      end
+      sf.button_link "link", url: "#"
+      sf.checkbox_field :check
+      sf.radio_field :radio
+      sf.text_field :text
+      sf.date_picker_field :date
+      sf.dropdown_select_field :dropdown_select
+      sf.select_field :select
+      sf.auto_complete_field :auto
+      sf.button_refresh
+    end.render
+
+    expected = "<div class=\"input-group ui_surround_field\"><span class=\"input-group-text\"><i class=\"glyph fas fa-gem\"></i></span><span class=\"input-group-text\">test</span><div class=\"input-group-btn\"><button class=\"btn-secondary btn\">button</button></div><div class=\"input-group-btn\" role=\"group\"><button class=\"btn-secondary btn\">test</button></div><div class=\"input-group-btn\"><a class=\"btn-secondary btn\" role=\"button\" href=\"#\">link</a></div><div class=\"input-group-text\" label=\"false\"><input type=\"checkbox\" name=\"check\" id=\"check\" value=\"1\" class=\"form-check-input\" /><label class=\"form-check-label\" for=\"check\">check</label></div><div class=\"input-group-text\" label=\"false\"><input type=\"radio\" name=\"radio\" id=\"radio_\" class=\"form-check-input\" /><label class=\"form-check-label\" for=\"radio_\">radio</label></div><input type=\"text\" name=\"text\" id=\"text\" class=\"form-control\" /><input type=\"text\" name=\"date\" id=\"date\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"yyyy-mm-dd\" data-date-today-btn=\"linked\" data-date-toggle-active=\"true\" class=\"date_picker form-control\" /><select name=\"dropdown_select\" id=\"dropdown_select\" data-wrapper-classes=\"input-group-btn\" class=\"btn-secondary multi-select-field\"></select><select name=\"select\" id=\"select\" class=\"select-field form-control form-select\"></select><input type=\"text\" name=\"auto\" id=\"auto\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"auto-datalist\" /><datalist id=\"auto-datalist\"></datalist><span data-connect=\"{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;data&quot;:[]}}\" class=\"btn-secondary ui-bibz-connect btn input-refresh-button\"><i class=\"glyph fas fa-sync-alt\"></i> </span></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/forms/textareas/markdown_editor_field_test.rb

@@ -5,7 +5,7 @@ require 'test_helper'
 class MarkdownEditorFieldTest < ActionView::TestCase
   test 'markdown_editor' do
     actual = UiBibz::Ui::Core::Forms::Textareas::MarkdownEditorField.new('comments').render
-    expected = "<textarea name=\"comments\" id=\"comments\" data-provide=\"markdown\" data-iconlibrary=\"fa-5\">
+    expected = "<textarea name=\"comments\" id=\"comments\" data-provide=\"markdown\" data-iconlibrary=\"fa\">
 </textarea>"
 
     assert_equal expected, actual

data/test/ui/core/forms/texts/auto_complete_field_test.rb

@@ -4,7 +4,7 @@ require 'test_helper'
 
 class AutoCompleteFieldTest < ActionView::TestCase
   test 'auto_complete_field' do
-    options = options_for_select(2.times.map { |i| "option #{i}" })
+    options = options_for_select(Array.new(2) { |i| "option #{i}" })
     actual = UiBibz::Ui::Core::Forms::Texts::AutoCompleteField.new('test', { option_tags: options }, { id: 'test' }).render
     expected = "<input type=\"text\" name=\"test\" id=\"test\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></datalist>"
@@ -13,28 +13,28 @@ class AutoCompleteFieldTest < ActionView::TestCase
   end
 
   test 'auto_complete_field with refresh button' do
-    options = options_for_select(2.times.map { |i| "option #{i}" })
+    options = options_for_select(Array.new(2) { |i| "option #{i}" })
     actual = UiBibz::Ui::Core::Forms::Texts::AutoCompleteField.new('test', { option_tags: options, refresh: { target: { url: '/' } } }, { id: 'test' }).render
     expected = "<div class=\"field-refresh input-group ui_surround_field\"><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
-<option value=\"option 1\">option 1</option></datalist><div class=\"input-group-btn\"><span data-connect=\"{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#test-datalist&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}\" class=\"btn-secondary ui-bibz-connect btn input-refresh-button\"><i class=\"glyph fas fa-sync-alt\"></i> </span></div></div>"
+<option value=\"option 1\">option 1</option></datalist><span data-connect=\"{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#test-datalist&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}\" class=\"btn-secondary ui-bibz-connect btn input-refresh-button\"><i class=\"glyph fas fa-sync-alt\"></i> </span></div>"
 
     assert_equal expected, actual
   end
 
   test 'auto_complete_field with refresh button and append content' do
-    options = options_for_select(2.times.map { |i| "option #{i}" })
+    options = options_for_select(Array.new(2) { |i| "option #{i}" })
     actual = UiBibz::Ui::Core::Forms::Texts::AutoCompleteField.new('test', { option_tags: options, append: 'Append content', refresh: { target: { url: '/' } } }, { id: 'test' }).render
-    expected = "<div class=\"field-refresh input-group ui_surround_field\"><span class=\"input-group-addon\">Append content</span><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
-<option value=\"option 1\">option 1</option></datalist><div class=\"input-group-btn\"><span data-connect=\"{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#test-datalist&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}\" class=\"btn-secondary ui-bibz-connect btn input-refresh-button\"><i class=\"glyph fas fa-sync-alt\"></i> </span></div></div>"
+    expected = "<div class=\"field-refresh input-group ui_surround_field\"><span class=\"input-group-text\">Append content</span><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
+<option value=\"option 1\">option 1</option></datalist><span data-connect=\"{&quot;events&quot;:&quot;click&quot;,&quot;mode&quot;:&quot;remote&quot;,&quot;target&quot;:{&quot;selector&quot;:&quot;#test-datalist&quot;,&quot;url&quot;:&quot;/&quot;,&quot;data&quot;:[]}}\" class=\"btn-secondary ui-bibz-connect btn input-refresh-button\"><i class=\"glyph fas fa-sync-alt\"></i> </span></div>"
 
     assert_equal expected, actual
   end
 
   test 'auto_complete_field with prepend content' do
-    options = options_for_select(2.times.map { |i| "option #{i}" })
+    options = options_for_select(Array.new(2) { |i| "option #{i}" })
     actual = UiBibz::Ui::Core::Forms::Texts::AutoCompleteField.new('test', { option_tags: options, prepend: 'Append content' }, { id: 'test' }).render
     expected = "<div class=\"input-group ui_surround_field\"><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control auto-complete-field\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
-<option value=\"option 1\">option 1</option></datalist><span class=\"input-group-addon\">Append content</span></div>"
+<option value=\"option 1\">option 1</option></datalist><span class=\"input-group-text\">Append content</span></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/forms/texts/text_field_test.rb

@@ -12,14 +12,14 @@ class TextFieldTest < ActionView::TestCase
 
   test 'text_field with prepend and append' do
     actual = UiBibz::Ui::Core::Forms::Texts::TextField.new('test', append: '1', prepend: '2').render
-    expected = '<div class="input-group ui_surround_field"><span class="input-group-addon">1</span><input type="text" name="test" id="test" class="form-control" /><span class="input-group-addon">2</span></div>'
+    expected = '<div class="input-group ui_surround_field"><span class="input-group-text">1</span><input type="text" name="test" id="test" class="form-control" /><span class="input-group-text">2</span></div>'
 
     assert_equal expected, actual
   end
 
   test 'text_field size' do
     actual = UiBibz::Ui::Core::Forms::Texts::TextField.new('test', size: :xs, append: '1', prepend: '2').render
-    expected = '<div class="input-group-xs input-group ui_surround_field"><span class="input-group-addon">1</span><input type="text" name="test" id="test" class="form-control form-control-xs" /><span class="input-group-addon">2</span></div>'
+    expected = '<div class="input-group-xs input-group ui_surround_field"><span class="input-group-text">1</span><input type="text" name="test" id="test" class="form-control form-control-xs" /><span class="input-group-text">2</span></div>'
 
     assert_equal expected, actual
   end

data/test/ui/core/layouts/col_test.rb

@@ -7,7 +7,7 @@ class ColTest < ActionView::TestCase
 
   test 'col with options' do
     actual   = ui_col('test', { num: 1, push: 2, offset: 3, pull: 4 }, { class: 'test' })
-    expected = '<div class="test col-md-1 col-md-push-2 offset-md-3 col-md-pull-4">test</div>'
+    expected = '<div class="test col-1 col-push-2 offset-3 col-pull-4">test</div>'
 
     assert_equal expected, actual
   end
@@ -22,11 +22,20 @@ class ColTest < ActionView::TestCase
   end
 
   test 'col' do
-    actual   = ui_col do
+    actual = ui_col do
       'test'
     end
     expected = '<div class="col">test</div>'
 
     assert_equal expected, actual
   end
+
+  test 'col with integer in parameter' do
+    actual = ui_col 3 do
+      'test'
+    end
+    expected = '<div class="col-3">test</div>'
+
+    assert_equal expected, actual
+  end
 end

data/test/ui/core/layouts/container_test.rb

@@ -5,10 +5,24 @@ require 'test_helper'
 class UiHelperTest < ActionView::TestCase
   include UiBibz::Helpers::Ui::CoreHelper
 
-  test 'container' do
+  test 'fluid container' do
     actual   = ui_container type: :fluid
     expected = '<div class="container-fluid"></div>'
 
     assert_equal expected, actual
   end
+
+  test 'normal container' do
+    actual   = ui_container
+    expected = '<div class="container"></div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'sized container' do
+    actual   = ui_container size: :xl
+    expected = '<div class="container-xl"></div>'
+
+    assert_equal expected, actual
+  end
 end

data/test/ui/core/layouts/row_test.rb

@@ -14,11 +14,76 @@ class RowTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
-  test 'row form' do
-    actual = ui_row(type: :form) do
+  test 'row with size' do
+    actual = ui_row(num: 2) do
       'test'
     end
-    expected = '<div class="form-row">test</div>'
+    expected = '<div class="row row-cols-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row with integer in parameter' do
+    actual = ui_row 2 do
+      'test'
+    end
+    expected = '<div class="row row-cols-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row with several sizes' do
+    actual = ui_row(md: { num: 4 }, xs: { num: 2 }) do
+      'test'
+    end
+    expected = '<div class="row row-cols-md-4 row-cols-xs-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row tapped' do
+    actual = ui_row(tap: true, class: 'test') do |row|
+      row.col do
+        'test'
+      end
+    end
+    expected = "<div class=\"test row\"><div class=\"col\">test</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with col' do
+    actual = ui_row do
+      ui_col do
+        "Test"
+      end
+    end
+    expected = "<div class=\"row\"><div class=\"col\">Test</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with gutters' do
+    actual = ui_row(gutters: 6)
+    expected = "<div class=\"row g-6\"></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with complex gutters' do
+    actual = ui_row(gutters: { md: { num: 6 }, xs: { num: 3, position: :horizontal } })
+    expected = "<div class=\"row g-md-6 gx-xs-3\"></div>"
+
+    assert_equal expected, actual
+  end
+
+  test "toto" do
+    actual = ui_row do |row|
+      row.col do
+        'Test'
+      end
+    end
+    expected = "<div class=\"row\"><div class=\"col\">Test</div></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/lists/list_group_test.rb

@@ -8,7 +8,7 @@ class ListGroupTest < ActionView::TestCase
   test 'list_group with link' do
     actual = ui_list_group(tag_type: :a) do |lg|
       lg.list 'Momo', { status: :success, url: '#momo' }
-      lg.list({ tap: true, active: true, url: '#state' }) do |l|
+      lg.list(active: true, url: '#state') do |l|
         l.header 'My title'
         l.body   'My body'
       end

data/test/ui/core/navigations/breadcrumb_test.rb

@@ -6,7 +6,7 @@ class BreadcrumbTest < ActionView::TestCase
   include UiBibz::Helpers::Ui::CoreHelper
 
   test 'breadcrumb' do
-    actual = ui_breadcrumb tap: true do |b|
+    actual = ui_breadcrumb do |b|
       b.link 'Home', url: '#home', glyph: 'home'
       b.link 'state', { url: '#state', state: :active }
     end

data/test/ui/core/navigations/link_test.rb

@@ -13,7 +13,7 @@ class LinkTest < ActionView::TestCase
 
   test 'Link without text' do
     actual = ui_link 'My link', glyph: 'gem', text: false, url: '#link'
-    expected = '<a href="#link"><i class="glyph fas fa-gem"></i></a>'
+    expected = '<a href="#link"><i class="glyph fas fa-gem"></i><span class="empty-space"> </span></a>'
 
     assert_equal expected, actual
   end

data/test/ui/core/navigations/nav_test.rb

@@ -10,7 +10,8 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile'
       n.link 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
+
     assert_equal expected, actual
   end
 
@@ -20,7 +21,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-pills"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-pills\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -31,7 +32,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav justify-content-end"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav justify-content-end\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -42,7 +43,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -53,7 +54,18 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav flex-column"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav flex-column\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
+
+    assert_equal expected, actual
+  end
+
+  test 'list' do
+    actual = ui_nav(type: :list) do |n|
+      n.link 'Home', state: :active, url: '#Home', selector: 'home'
+      n.link 'Profile', url: '#profile', selector: 'profile', label: 16
+      n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
+    end
+    expected = "<div class=\"list-group\" role=\"tablist\"><a href=\"#Home\" class=\"active list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Home\">Home</a><a href=\"#profile\" class=\"list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Profile\">Profile</a><a href=\"#messages\" class=\"disabled list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Messages\">Messages</a></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/navigations/navbar_test.rb

@@ -3,17 +3,15 @@
 require 'test_helper'
 class NavbarTest < ActionView::TestCase
   test 'Navbar' do
-    actual = UiBibz::Ui::Core::Navigations::Navbar.new.tap do |nb|
-    end
-    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"></div></nav>"
+    actual = UiBibz::Ui::Core::Navigations::Navbar.new
+    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><div class=\"container\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"></div></div></nav>"
 
     assert_equal expected, actual.render
   end
 
   test 'Navbar with options' do
-    actual = UiBibz::Ui::Core::Navigations::Navbar.new(title: 'Brand', expand_size: :xs, status: :primary, position: :top, brand_position: :right).tap do |nb|
-    end
-    expected = "<nav class=\"bg-primary navbar navbar-light fixed-top navbar-expand-xs\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><span class=\"navbar-brand\">Brand</span><div class=\"navbar-collapse\" id=\"#{actual.id}\"></div></nav>"
+    actual = UiBibz::Ui::Core::Navigations::Navbar.new(title: 'Brand', expand_size: :xs, status: :primary, position: :top, brand_position: :right)
+    expected = "<nav class=\"bg-primary navbar navbar-light fixed-top navbar-expand-xs\"><div class=\"container\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><span class=\"navbar-brand\">Brand</span><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"></div></div></nav>"
 
     assert_equal expected, actual.render
   end
@@ -32,7 +30,7 @@ class NavbarTest < ActionView::TestCase
       end
       nb.text 'test'
     end
-    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><span class=\"navbar-brand\">Brand</span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a class=\"active nav-link\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#messages\">Messages</a></li></ul><form type=\"form_tag\" position=\"right\" class=\"navbar-form form-inline my-lg-0 my-2\" action=\"#\" accept-charset=\"UTF-8\" method=\"post\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><button class=\"btn-secondary btn\">Search</button></form><span class=\"navbar-text\">test</span></div></nav>"
+    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><div class=\"container\"><span class=\"navbar-brand\">Brand</span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\">Messages</a></li></ul><form type=\"form_tag\" position=\"right\" class=\"d-flex\" action=\"#\" accept-charset=\"UTF-8\" method=\"post\"><button class=\"btn-secondary btn\">Search</button></form><span class=\"navbar-text\">test</span></div></div></nav>"
 
     assert_equal expected, actual.render
   end
@@ -44,7 +42,8 @@ class NavbarTest < ActionView::TestCase
         n.link 'Link', url: '#link'
       end
     end
-    expected = "<nav class=\"bg-dark navbar navbar-dark navbar-expand-lg\"><span class=\"navbar-brand\"><img src=\"/images/ruby-white\" /></span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#link\">Link</a></li></ul></div></nav>"
+    expected =
+      "<nav class=\"bg-dark navbar navbar-dark navbar-expand-lg\"><div class=\"container\"><span class=\"navbar-brand\"><img src=\"/images/ruby-white\" /></span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a href=\"#link\" class=\"nav-link\">Link</a></li></ul></div></div></nav>"
 
     assert_equal expected, actual.render
   end

data/test/ui/core/navigations/tab_group_test.rb

@@ -10,7 +10,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile'
       n.tab 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -21,7 +21,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile'
       n.tab 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -43,7 +43,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile', label: 16
       n.tab 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-tabs justify-content-end"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs justify-content-end\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -54,7 +54,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile', label: 16
       n.tab 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end