changed scope_ref to matestack_ui_vuejs_ref, matestack-ui-core-ref to matestack-ui-vuejs-ref, fixed form components ID rendering and added related specs, fixed hierarchy of getElement method, removed not used utils module

jonasjabari · jonasjabari · commit a5f3463b8b83 · 2022-02-15T17:50:39.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v3.0.0.rc2 Release - 2022-02-15
+
+### Bugfixes
+
+- fixed ID rendering on form input components
+
 ## v3.0.0.rc1 Release - 2022-02-11
 
 - please read the [migration guide](docs/migrate-to-3.0.md)
diff --git a/lib/matestack/ui/vue_js.rb b/lib/matestack/ui/vue_js.rb
@@ -11,7 +11,6 @@ module VueJs
 
 require "#{vue_js_base_path}/version"
 
-require "#{vue_js_base_path}/utils"
 require "#{vue_js_base_path}/vue_attributes"
 require "#{vue_js_base_path}/vue"
 require "#{vue_js_base_path}/components/app"
diff --git a/lib/matestack/ui/vue_js/components/form/base.rb b/lib/matestack/ui/vue_js/components/form/base.rb
@@ -12,7 +12,7 @@ def form_context
             end
 
             def component_attributes
-              super.merge("matestack-ui-core-ref": "#{form_context.component_uid}-#{component_id}")
+              super.merge("matestack-ui-vuejs-ref": "#{form_context.component_uid}-#{component_id}")
             end
 
             def component_id
@@ -45,7 +45,11 @@ def id
               if ctx.id.present?
                 "'#{ctx.id}'"
               else
-                "'#{key}'+vc.parentNestedFormRuntimeId"
+                if form_context.is_nested_form?
+                  "'#{key}'+vc.parentNestedFormRuntimeId"
+                else
+                  "'#{key}'"
+                end
               end
             end
 
@@ -61,7 +65,7 @@ def placeholder
 
             def attributes
               (options || {}).merge({
-                "matestack-ui-core-ref": scoped_ref("input.#{attribute_key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("input.#{attribute_key}"),
                 ":id": id,
                 type: ctx.type,
                 multiple: ctx.multiple,
diff --git a/lib/matestack/ui/vue_js/components/form/checkbox.rb b/lib/matestack/ui/vue_js/components/form/checkbox.rb
@@ -47,7 +47,7 @@ def checkbox_attributes(item)
                 type: :checkbox,
                 name: item_label(item),
                 "#{value_key(item)}": item_value(item),
-                "matestack-ui-core-ref": scoped_ref("select.multiple.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select.multiple.#{key}"),
                 'v-on:change': change_event,
                 'init-value': (init_value || []).to_json,
                 'v-bind:class': "{ '#{error_class}': #{error_key} }",
diff --git a/lib/matestack/ui/vue_js/components/form/fields_for_add_item.js b/lib/matestack/ui/vue_js/components/form/fields_for_add_item.js
@@ -14,7 +14,7 @@ const componentDef = {
   ],
   methods: {
     addItem: function(key){
-      var templateString = JSON.parse(this.getElement().querySelector('#prototype-template-for-'+key).dataset[":template"])
+      var templateString = JSON.parse(this.getTemplateElement().querySelector('#prototype-template-for-'+key).dataset[":template"])
       var tmp_dom_elem = document.createElement('div')
       tmp_dom_elem.innerHTML = templateString
       var static_prototype_template_uid = tmp_dom_elem.querySelector('matestack-component-template').id.replace("uid-", "")
diff --git a/lib/matestack/ui/vue_js/components/form/form.rb b/lib/matestack/ui/vue_js/components/form/form.rb
@@ -25,7 +25,7 @@ def response
             def attributes
               {
                 class: 'matestack-form',
-                "matestack-ui-core-ref": scoped_ref('form'),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref('form'),
                 'v-bind:class': "{ 'has-errors': vc.hasErrors(), loading: vc.loading }",
                 'v-on:submit.prevent': 'vc.perform',
               }
diff --git a/lib/matestack/ui/vue_js/components/form/nested_form.js b/lib/matestack/ui/vue_js/components/form/nested_form.js
@@ -106,13 +106,13 @@ const componentDef = {
       this.parentDeletedNestedForms[this.props["fields_for"]] = [];
     }
 
-    var id = parseInt(self.getElement().querySelector('.matestack-form-fields-for').id.replace(this.props["fields_for"]+"_child_", ""))
+    var id = parseInt(self.getTemplateElement().querySelector('.matestack-form-fields-for').id.replace(this.props["fields_for"]+"_child_", ""))
 
     //setup data binding for serverside rendered nested forms
     if (isNaN(id)){
       id = this.parentNestedForms[this.props["fields_for"]].length
       this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
-      this.getElement().id = this.props["fields_for"]+"_child_"+id
+      this.getTemplateElement().id = this.props["fields_for"]+"_child_"+id
       this.initValues()
       this.parentFormData[this.props["fields_for"]].push(this.data);
       this.parentNestedForms[this.props["fields_for"]].push(this);
diff --git a/lib/matestack/ui/vue_js/components/form/radio.rb b/lib/matestack/ui/vue_js/components/form/radio.rb
@@ -36,7 +36,7 @@ def radio_attributes(item)
                 ":id": item_id(item),
                 name: item_name(item),
                 type: :radio,
-                "matestack-ui-core-ref": scoped_ref("select.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select.#{key}"),
                 'value-type': value_type(item_value(radio_options.first))
               }).tap do |attrs|
                 attrs[value_key(item)] = item_value(item)
diff --git a/lib/matestack/ui/vue_js/components/form/select.rb b/lib/matestack/ui/vue_js/components/form/select.rb
@@ -44,7 +44,7 @@ def select_attributes
               attributes.except(:options).merge({
                 multiple: multiple,
                 ":id": id,
-                "matestack-ui-core-ref": scoped_ref("select#{'.multiple' if multiple}.#{key}"),
+                "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref("select#{'.multiple' if multiple}.#{key}"),
                 'value-type': value_type(select_options.first),
                 'init-value': init_value,
               })
diff --git a/lib/matestack/ui/vue_js/components/mixin.js b/lib/matestack/ui/vue_js/components/mixin.js
@@ -1,7 +1,7 @@
 import matestackEventHub from '../event_hub'
 
 const componentMixin = {
-  props: ['props', 'params', 'matestack-ui-core-ref'],
+  props: ['props', 'params', 'matestack-ui-vuejs-ref'],
   computed: {
     vc: function(){
       return this;
@@ -15,13 +15,13 @@ const componentMixin = {
       // that's the reason for the following workaround
       var componentScopedRefs = {};
       var scopeId = this.props['component_uid'];
-      var componentRelativeRefs = this.getElement().querySelectorAll("[matestack-ui-core-ref]")
+      var componentRelativeRefs = this.getTemplateElement().querySelectorAll("[matestack-ui-vuejs-ref]")
       // var defaultSlot = this.$slots.default({ vc: this.vc })[0]
       // var globalRefs = defaultSlot.context.$refs
       for (let i in componentRelativeRefs) {
         let node = componentRelativeRefs[i]
         if (node.getAttribute){
-          let nodeRef = node.getAttribute("matestack-ui-core-ref")
+          let nodeRef = node.getAttribute("matestack-ui-vuejs-ref")
           if(nodeRef.startsWith(scopeId)){
             componentScopedRefs[nodeRef.replace(scopeId+"-", "")] = node
           }
@@ -30,9 +30,12 @@ const componentMixin = {
       }
       return componentScopedRefs;
     },
-    getElement: function(){
+    getTemplateElement: function(){
       return document.getElementById("uid-"+this.props['component_uid']);
     },
+    getElement: function(){
+      return this.getTemplateElement().firstChild;
+    },
     registerEvents: function(events, callback){
       if(events != undefined){
         var event_names = events.split(",")
diff --git a/lib/matestack/ui/vue_js/utils.rb b/lib/matestack/ui/vue_js/utils.rb
diff --git a/lib/matestack/ui/vue_js/vue.rb b/lib/matestack/ui/vue_js/vue.rb
@@ -18,7 +18,7 @@ def create_children(&block)
 
         def vue_component(&block)
           Matestack::Ui::Core::Base.new(:component, component_attributes) do
-            Matestack::Ui::Core::Base.new("matestack-component-template", 'id': "uid-#{component_uid}") do
+            Matestack::Ui::Core::Base.new("matestack-component-template", 'for': vue_name, 'id': "uid-#{component_uid}") do
               yield
             end
           end
@@ -51,7 +51,7 @@ def vue_props
         end
         alias :config :vue_props
 
-        def scoped_ref(value)
+        def matestack_ui_vuejs_ref(value)
           return "#{component_uid}-#{value}" unless value.nil?
         end
 
diff --git a/spec/test/vue_js/form/checkbox/checkbox_spec.rb b/spec/test/vue_js/form/checkbox/checkbox_spec.rb
@@ -30,6 +30,50 @@
       allow_any_instance_of(FormTestController).to receive(:expect_params)
     end
 
+    describe "DOM structure" do
+      it "is properly rendered" do
+        class ExamplePage < Matestack::Ui::Page
+          def response
+            matestack_form form_config do
+              form_checkbox key: :boolean_checkbox, label: "Consent?"
+              form_checkbox key: :plain_input, options: [1, 2]
+              form_checkbox key: :input_with_id, id: "some-id", options: [1, 2]
+              form_checkbox key: :input_with_id_and_class, id: "some-other-id", class: "some-class", options: [1, 2]
+              button "Submit me!"
+            end
+          end
+
+          def form_config
+            return {
+              for: :my_object,
+              method: :post,
+              path: checkbox_success_form_test_path(id: 42)
+            }
+          end
+        end
+
+        visit "/example"
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#boolean_checkbox_1[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="boolean_checkbox_1"]', text: "Consent?")
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#plain_input_1[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="plain_input_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#plain_input_2[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="plain_input_2"]', text: "2")
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#some-id_1[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="some-id_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#some-id_2[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="some-id_2"]', text: "2")
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#some-other-id_1[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="some-other-id_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > input#some-other-id_2[type="checkbox"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-checkbox > label[for="some-other-id_2"]', text: "2")
+      end
+    end
+
     it "takes an array of options or hash and submits (multiple) selected item(s)" do
       class ExamplePage < Matestack::Ui::Page
         def response
diff --git a/spec/test/vue_js/form/input/input_spec.rb b/spec/test/vue_js/form/input/input_spec.rb
@@ -28,6 +28,35 @@
     allow_any_instance_of(FormTestController).to receive(:expect_params)
   end
 
+  describe "DOM structure" do
+    it "is properly rendered" do
+      class ExamplePage < Matestack::Ui::Page
+        def response
+          matestack_form form_config do
+            form_input key: :plain_input, type: :text
+            form_input key: :input_with_id, type: :text, id: "some-id"
+            form_input key: :input_with_id_and_class, type: :text, id: "some-other-id", class: "some-class"
+            button "Submit me!"
+          end
+        end
+
+        def form_config
+          return {
+            for: :my_object,
+            method: :post,
+            path: success_form_test_path(id: 42)
+          }
+        end
+      end
+
+      visit "/example"
+
+      expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-input > input#plain_input[type="text"]')
+      expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-input > input#some-id[type="text"]')
+      expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-input > input#some-other-id.some-class[type="text"]')
+    end
+  end
+
   describe "Async submit update request with success, which does not reset the input fields" do
     # https://github.com/matestack/matestack-ui-core/issues/304
 
diff --git a/spec/test/vue_js/form/radio/radio_spec.rb b/spec/test/vue_js/form/radio/radio_spec.rb
@@ -30,6 +30,46 @@
       allow_any_instance_of(FormTestController).to receive(:expect_params)
     end
 
+    describe "DOM structure" do
+      it "is properly rendered" do
+        class ExamplePage < Matestack::Ui::Page
+          def response
+            matestack_form form_config do
+              form_radio key: :plain_input, options: [1, 2]
+              form_radio key: :input_with_id, id: "some-id", options: [1, 2]
+              form_radio key: :input_with_id_and_class, id: "some-other-id", class: "some-class", options: [1, 2]
+              button "Submit me!"
+            end
+          end
+
+          def form_config
+            return {
+              for: :my_object,
+              method: :post,
+              path: radio_success_form_test_path(id: 42)
+            }
+          end
+        end
+
+        visit "/example"
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#plain_input_1[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="plain_input_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#plain_input_2[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="plain_input_2"]', text: "2")
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#some-id_1[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="some-id_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#some-id_2[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="some-id_2"]', text: "2")
+
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#some-other-id_1[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="some-other-id_1"]', text: "1")
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > input#some-other-id_2[type="radio"]')
+        expect(page).to have_selector('form > matestack-component-template > div.matestack-ui-core-form-radio > label[for="some-other-id_2"]', text: "2")
+      end
+    end
+
     it "renders auto generated IDs based on user specified ID and optional user specified class per radio button" do
       class ExamplePage < Matestack::Ui::Page
         def response
diff --git a/spec/test/vue_js/form/select/select_spec.rb b/spec/test/vue_js/form/select/select_spec.rb
diff --git a/spec/test/vue_js/form/textarea/textarea_spec.rb b/spec/test/vue_js/form/textarea/textarea_spec.rb

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ def response`
`25`	`25`	`def attributes`
`26`	`26`	`{`
`27`	`27`	`class: 'matestack-form',`
`28`		`- "matestack-ui-core-ref": scoped_ref('form'),`
	`28`	`+ "matestack-ui-vuejs-ref": matestack_ui_vuejs_ref('form'),`
`29`	`29`	`'v-bind:class': "{ 'has-errors': vc.hasErrors(), loading: vc.loading }",`
`30`	`30`	`'v-on:submit.prevent': 'vc.perform',`
`31`	`31`	`}`