added nested form support for bs input components

Author: jonasjabari

lib/matestack/ui/bootstrap/form/checkbox.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
 
   def response
     div class: "matestack-ui-bootstrap-form-checkbox" do
-      label input_label, class: "form-label", for: attribute_key if input_label && multiple?
+      label input_label, class: "form-label", ":for": id if input_label && multiple?
       render_options
       render_errors
       render_form_text unless context.form_text.nil? # otherwise renders empty div
@@ -45,7 +45,7 @@ def render_options
     else
       checkbox_wrapper do
         input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
-        input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1)).merge(bootstrap_attributes)
+        input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1)).merge(bootstrap_attributes)
 
         bootstrap_label text: input_label, for_input: item_id(1)
       end
@@ -62,7 +62,7 @@ def checkbox_wrapper(options = {}, &block)
   end
 
   def bootstrap_label(text:, for_input:)
-    label text, for: for_input, class: 'form-check-label'
+    label text, ":for": for_input, class: 'form-check-label'
   end
 
   def render_errors
@@ -82,7 +82,7 @@ def checkbox_options
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

lib/matestack/ui/bootstrap/form/input.rb

@@ -16,12 +16,12 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::
 
   def response
     div class: "matestack-ui-bootstrap-input" do
-      label input_label, for: attribute_key,  class: "form-label" if input_label
+      label input_label, ":for": id,  class: "form-label" if input_label
       case context.type
       when :range
         input options.merge(input_attributes).merge(bootstrap_range_attributes)
         if context.show_value
-          div id: attribute_key, class: "form-text" do
+          div class: "form-text form-text-for-#{attribute_key}" do
             plain "{{ data['#{attribute_key}'] }}"
           end
         end
@@ -37,7 +37,6 @@ def response
 
   def bootstrap_input_attributes
     {
-      id: (options[:id] || attribute_key),
       class: (options[:class] || "") << (" form-control"),
       disabled: context.disabled,
       min: context.min,
@@ -111,7 +110,7 @@ def input_error_class
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

lib/matestack/ui/bootstrap/form/radio.rb

@@ -10,12 +10,12 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::
 
   def response
     div class: "matestack-ui-bootstrap-radio" do
-      label input_label, class: "form-label" if input_label
+      label input_label, class: "form-label", ":for": id if input_label
 
       radio_options.to_a.each_with_index do |item, index|
         div class: "form-check #{'form-check-inline' if context.variant == :inline}" do
           input options.merge(radio_attributes(item)).merge(bootstrap_radio_attributes)
-          label item_label(item), class: "form-check-label", for: item_id(item_value(item))
+          label item_label(item), class: "form-check-label", ":for": item_id(item_value(item))
           if index == radio_options.to_a.size - 1
             render_errors
           end
@@ -37,7 +37,7 @@ def bootstrap_radio_attributes
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

lib/matestack/ui/bootstrap/form/select.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components:
 
   def response
     div class: "matestack-ui-bootstrap-form-select" do
-      label input_label, for: attribute_key,  class: "form-label" if input_label
+      label input_label, ":for": id,  class: "form-label" if input_label
       select select_attributes.merge(bootstrap_select_attributes) do
         render_options
       end
@@ -55,7 +55,7 @@ def input_error_class
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

lib/matestack/ui/bootstrap/form/switch.rb

@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::C
 
   def response
     div class: "matestack-ui-bootstrap-switch" do
-      label input_label, class: "form-label", for: attribute_key if input_label && multiple?
+      label input_label, class: "form-label", ":for": id if input_label && multiple?
       render_options
       render_errors
       plain context.form_text

lib/matestack/ui/bootstrap/form/textarea.rb

@@ -12,7 +12,7 @@ class Matestack::Ui::Bootstrap::Form::Textarea < Matestack::Ui::VueJs::Component
 
   def response
     div class: "matestack-ui-bootstrap-textarea" do
-      label input_label, for: attribute_key,  class: "form-label" if input_label
+      label input_label, ":for": id,  class: "form-label" if input_label
       textarea options.merge(textarea_attributes).merge(bootstrap_textarea_attributes)
       render_errors
       render_form_text if context.form_text
@@ -21,7 +21,6 @@ def response
 
   def bootstrap_textarea_attributes
     {
-      id: (options[:id] || attribute_key),
       class: (options[:class] || "") << (" form-control"),
       rows: context.rows,
       cols: context.cols,
@@ -42,7 +41,7 @@ def input_error_class
   end
 
   def render_form_text
-    div id: "form_text_for_#{attribute_key}", class: "form-text" do
+    div class: "form-text form-text-for-#{attribute_key}" do
       plain context.form_text
     end
   end

spec/test/form/checkbox_spec.rb

@@ -228,7 +228,7 @@
       end
     end
     visit example_path
-    expect(page).to have_xpath('//form//div[@id="form_text_for_foo" and contains(@class, "form-text") and contains(text(), "some notes")]')
+    expect(page).to have_xpath('//form//div[contains(@class, "form-text-for-foo") and contains(@class, "form-text") and contains(text(), "some notes")]')
   end
 
   it 'renders bootstrap checkbox button as inline variant' do

spec/test/form/input_spec.rb

@@ -100,7 +100,7 @@
       end
     end
     visit example_path
-    expect(page).to have_xpath('//form//div[@id="form_text_for_foo" and contains(@class, "form-text") and contains(text(), "some notes")]')
+    expect(page).to have_xpath('//form//div[contains(@class, "form-text-for-foo") and contains(@class, "form-text") and contains(text(), "some notes")]')
   end
 
   it 'renders basic bootstrap input field accepting float numbers' do
@@ -156,7 +156,7 @@
     visit example_path
 
     expect(page).to have_selector('form > div.matestack-ui-bootstrap-input > input[type="range"][min="5"][max="11"][step="2"]')
-    expect(page).to have_xpath('//form//div[@id="form_text_for_foo" and contains(@class, "form-text") and contains(text(), "some notes")]')
+    expect(page).to have_xpath('//form//div[contains(@class, "form-text-for-foo") and contains(@class, "form-text") and contains(text(), "some notes")]')
   end
 
 end

spec/test/form/nested_form_support_spec.rb

@@ -0,0 +1,95 @@
+require 'rails_helper'
+require_relative "../../support/form_test_controller"
+
+RSpec.describe "Nested Form Support Spec", type: :feature, js: true do
+  include Utils
+
+  before :all do
+    Rails.application.routes.append do
+      scope "nested_form_support_spec" do
+        post '/input_success_form_test', to: 'form_test#success_submit', as: 'input_success_form_test'
+        post '/input_failure_form_test', to: 'form_test#failure_submit', as: 'input_failure_form_test'
+      end
+    end
+    Rails.application.reload_routes!
+  end
+
+  before :each do
+    allow_any_instance_of(FormTestController).to receive(:expect_params)
+  end
+
+  it 'properly renders all input components with dynamically adjusted IDs' do
+    form_config = get_form_config(path: input_success_form_test_path)
+
+    ExamplePage.define_method(:order_item_form) do |order_item = OrderItem.new|
+      form_fields_for order_item, key: :order_items_attributes do
+
+        bs_form_input key: :a, type: :number, label: "Label A"
+        bs_form_select key: :b, options: [1, 2], label: "Label B"
+        bs_form_switch key: :c, options: [1, 2], label: "Label C"
+        bs_form_switch key: :d, label: "Label D"
+        bs_form_radio key: :e, options: [1, 2], label: "Label E"
+        bs_form_textarea key: :f, type: :number, label: "Label F"
+        bs_form_checkbox key: :g, label: "Label G"
+        bs_form_checkbox key: :h, options: [1, 2], label: "Label H"
+
+        form_fields_for_remove_item do
+          bs_btn type: :button, variant: :danger do
+            bs_icon name: "trash"
+          end
+        end
+      end
+    end
+
+    matestack_render do
+      matestack_form form_config do
+
+        form_fields_for_add_item key: :order_items_attributes, prototype: method(:order_item_form) do
+          bs_btn "add", type: :button, variant: :primary, outline: true, class: "mt-2"
+        end
+
+        bs_form_submit text: "Submit"
+      end
+    end
+
+    visit example_path
+
+    click_on "add"
+    click_on "add"
+
+    [0, 1].each do |i|
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-input > label[for=\"a_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-input > input.form-control#a_order_items_attributes_child_#{i}")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-select > label[for=\"b_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-select > select.form-select#b_order_items_attributes_child_#{i}")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-switch > label[for=\"c_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-switch > div.form-switch > input.form-check-input#c_order_items_attributes_child_#{i}_1")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-switch > div.form-switch > input.form-check-input#c_order_items_attributes_child_#{i}_2")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-switch > div.form-switch > input.form-check-input#d_order_items_attributes_child_#{i}_1")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-switch > div.form-switch > label[for=\"d_order_items_attributes_child_#{i}_1\"]")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-radio > label[for=\"e_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-radio > div.form-check > input.form-check-input#e_order_items_attributes_child_#{i}_1")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-radio > div.form-check > label[for=\"e_order_items_attributes_child_#{i}_1\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-radio > div.form-check > input.form-check-input#e_order_items_attributes_child_#{i}_2")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-radio > div.form-check > label[for=\"e_order_items_attributes_child_#{i}_2\"]")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-textarea > label[for=\"f_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-textarea > textarea.form-control#f_order_items_attributes_child_#{i}")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-checkbox > div.form-check > input.form-check-input#g_order_items_attributes_child_#{i}_1")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-checkbox > div.form-check > label[for=\"g_order_items_attributes_child_#{i}_1\"]")
+
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-checkbox > label[for=\"h_order_items_attributes_child_#{i}\"]")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-checkbox > div.form-check > input.form-check-input#h_order_items_attributes_child_#{i}_1")
+      expect(page).to have_selector("form > div > div.matestack-form-fields-for#order_items_attributes_child_#{i} > div.matestack-ui-bootstrap-form-checkbox > div.form-check > input.form-check-input#h_order_items_attributes_child_#{i}_2")
+    end
+
+  end
+
+
+
+end

spec/test/form/radio_spec.rb

@@ -175,7 +175,7 @@
       end
     end
     visit example_path
-    expect(page).to have_xpath('//form//div[@id="form_text_for_foo" and contains(@class, "form-text") and contains(text(), "some notes")]')
+    expect(page).to have_xpath('//form//div[contains(@class, "form-text-for-foo") and contains(@class, "form-text") and contains(text(), "some notes")]')
   end
 
   it 'renders bootstrap radio buttons as inline variant' do