update form_select radio buttons to have a unique name for different groups

Author: Nils Henning

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    matestack-ui-core (0.7.4)
+    matestack-ui-core (0.7.5)
       cells-haml
       cells-rails
       haml

app/concepts/matestack/ui/core/form/select/select.haml

@@ -58,7 +58,7 @@
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
-        name: value,
+        name: "#{attr_key}_#{value}",
         value: key}/
         %label=value
     - if options[:options].is_a?(Array)
@@ -68,7 +68,7 @@
         "#{model_binding}": input_key,
         "@change": "inputChanged(\"#{attr_key}\")",
         "value-type": options_type,
-        name: value,
+        name: "#{attr_key}_#{value}",
         value: value}/
         %label=value
   %span{class: "errors", "v-if": error_key }

spec/usage/components/form/select/radio_button_spec.rb

@@ -0,0 +1,122 @@
+require_relative "../../../../support/utils"
+include Utils
+
+class TestController < ActionController::Base
+
+  before_action :check_params
+
+  def check_params
+    expect_params(params.permit!.to_h)
+  end
+
+  def expect_params(params)
+  end
+
+end
+
+describe "Form Component", type: :feature, js: true do
+
+  before :all do
+    class FormTestController < TestController
+      def success_submit
+        render json: { message: "server says: form submitted successfully" }, status: 200
+      end
+
+      def success_submit_with_transition
+        render json: {
+          message: "server says: form submitted successfully",
+          transition_to: form_test_page_4_path(id: 42)
+        }, status: 200
+      end
+
+      def failure_submit
+        render json: {
+          message: "server says: form had errors",
+          errors: { foo: ["seems to be invalid"] }
+        }, status: 400
+      end
+    end
+
+    Rails.application.routes.append do
+      post '/success_form_test/:id', to: 'form_test#success_submit', as: 'success_form_test'
+      post '/success_form_test_with_transition/:id', to: 'form_test#success_submit_with_transition', as: 'success_form_test_with_transition'
+      post '/failure_form_test/:id', to: 'form_test#failure_submit', as: 'failure_form_test'
+    end
+    Rails.application.reload_routes!
+
+    class ModelFormTestController < TestController
+      def model_submit
+        @test_model = TestModel.create(model_params)
+        if @test_model.errors.any?
+          render json: {
+            message: "server says: something went wrong!",
+            errors: @test_model.errors
+          }, status: :unprocessable_entity
+        else
+          render json: {
+            message: "server says: form submitted successfully!"
+          }, status: :ok
+        end
+      end
+
+      protected
+
+      def model_params
+        params.require(:test_model).permit(:title, :description, :status, some_data: [], more_data: [])
+      end
+    end
+
+    Rails.application.routes.append do
+      post '/model_form_test', to: 'model_form_test#model_submit', as: 'model_form_test'
+    end
+    Rails.application.reload_routes!
+  end
+
+  before :each do
+    allow_any_instance_of(FormTestController).to receive(:expect_params)
+  end
+
+
+  describe "Radio Button" do
+
+    it "generates unique names for each radio button group and value" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def response
+          components {
+            form form_config, :include do
+              form_select id: 'group-one-radio', key: :array_input_one, type: :radio, options: ['foo','bar']
+              form_select id: 'group-two-radio', key: :array_input_two, type: :radio, options: ['foo', 'bar']
+              form_submit do
+                button text: 'Submit me!'
+              end
+            end
+          }
+        end
+
+        def form_config
+          return {
+            for: :my_object,
+            method: :post,
+            path: :success_form_test_path,
+            params: {
+              id: 42
+            }
+          }
+        end
+
+      end
+
+      visit '/example'
+
+      expect(page).to have_selector('#group-one-radio[name="array_input_one_foo"]')
+      expect(page).to have_selector('#group-one-radio[name="array_input_one_bar"]')
+
+      expect(page).to have_selector('#group-two-radio[name="array_input_two_foo"]')
+      expect(page).to have_selector('#group-two-radio[name="array_input_two_bar"]')
+    end
+
+  end
+
+end