Merge pull request #358 from ximus/support-dom-node-context

Allow to pass DOM object as parent selector (second PR)

Author: Robert Mosolgo

lib/assets/javascripts/react_ujs.js.erb

@@ -14,17 +14,29 @@
     // `data-react-class` DOM elements
     findDOMNodes: function(searchSelector) {
       // we will use fully qualified paths as we do not bind the callbacks
-      var selector;
-      if (typeof searchSelector === 'undefined') {
-        var selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
-      } else {
-        var selector = searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+      var selector, parent;
+
+      switch (typeof searchSelector) {
+        case 'undefined':
+          selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+          parent = document;
+          break;
+        case 'object':
+          selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+          parent = searchSelector;
+          break;
+        case 'string':
+          selector = searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+          parent = document;
+          break
+        default:
+          break;
       }
 
       if ($) {
-        return $(selector);
+        return $(selector, parent);
       } else {
-        return document.querySelectorAll(selector);
+        return parent.querySelectorAll(selector);
       }
     },
 

test/dummy/app/views/pages/show.html.erb

@@ -2,8 +2,13 @@
   <li><%= link_to 'Alice', page_path(:id => 0) %></li>
   <li><%= link_to 'Bob', page_path(:id => 1) %></li>
 </ul>
+
 <div id='test-component'>
   <%= react_component 'HelloMessage', :name => @name %>
 </div>
-<a href='#' onClick="ReactRailsUJS.unmountComponents('#test-component')">Unmount at #test-component</a>
-<a href='#' onClick="ReactRailsUJS.mountComponents('#test-component')">Mount at #test-component</a>
+
+<a href='#' onClick="ReactRailsUJS.unmountComponents('#test-component')">Unmount at selector #test-component</a>
+<a href='#' onClick="ReactRailsUJS.mountComponents('#test-component')">Mount at selector #test-component</a>
+
+<a href='#' onClick="ReactRailsUJS.unmountComponents(document.querySelector('#test-component'))">Unmount at node #test-component</a>
+<a href='#' onClick="ReactRailsUJS.mountComponents(document.querySelector('#test-component'))">Mount at node #test-component</a>

test/generators/install_generator_test.rb

@@ -34,7 +34,8 @@ def copy_directory(dir)
     assert_application_file_modified
   end
 
-  test "modifies `application.js` it's empty" do
+  test "modifies `application.js` if it's empty" do
+    FileUtils.mkdir_p destination_root + '/app/assets/javascripts/'
     File.write(destination_root + '/app/assets/javascripts/application.js', '')
 
     run_generator

test/react/rails/view_helper_test.rb

@@ -87,14 +87,25 @@ class ViewHelperTest < ActionDispatch::IntegrationTest
     assert page.has_content?('Hello Bob')
   end
 
-  test 'react_ujs can unount at node' do
+  test 'react_ujs can unmount/mount using a selector reference' do
     visit '/pages/1'
     assert page.has_content?('Hello Bob')
 
-    page.click_link 'Unmount at #test-component'
+    page.click_link "Unmount at selector #test-component"
     assert page.has_no_content?('Hello Bob')
 
-    page.click_link 'Mount at #test-component'
+    page.click_link "Mount at selector #test-component"
+    assert page.has_content?('Hello Bob')
+  end
+
+  test 'react_ujs can unmount/mount using a dom node context' do
+    visit '/pages/1'
+    assert page.has_content?('Hello Bob')
+
+    page.click_link "Unmount at node #test-component"
+    assert page.has_no_content?('Hello Bob')
+
+    page.click_link "Mount at node #test-component"
     assert page.has_content?('Hello Bob')
   end