Merge pull request #466 from goodreads/ujs-custom-selector

add ability to pass in a custom selector function to mountComponents

Author: Robert Mosolgo

lib/assets/javascripts/react_ujs_mount.js

@@ -27,7 +27,8 @@
           parent = searchSelector;
           break;
         case 'string':
-          selector = searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
+          selector = searchSelector + '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + '], ' +
+                     searchSelector + ' [' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
           parent = document;
           break
         default:

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

@@ -3,12 +3,15 @@
   <li><%= link_to 'Bob', page_path(:id => 1) %></li>
 </ul>
 
-<div id='test-component'>
-  <%= react_component 'HelloMessage', :name => @name %>
+<div id='component-parent'>
+  <%= react_component 'HelloMessage', { :name => @name }, { :id => 'component' } %>
 </div>
 
-<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('#component-parent')">Unmount at selector #component-parent</a>
+<a href='#' onClick="ReactRailsUJS.mountComponents('#component-parent')">Mount at selector #component-parent</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>
+<a href='#' onClick="ReactRailsUJS.unmountComponents('#component')">Unmount at selector #component</a>
+<a href='#' onClick="ReactRailsUJS.mountComponents('#component')">Mount at selector #component</a>
+
+<a href='#' onClick="ReactRailsUJS.unmountComponents(document.querySelector('#component-parent'))">Unmount at node #component-parent</a>
+<a href='#' onClick="ReactRailsUJS.mountComponents(document.querySelector('#component-parent'))">Mount at node #component-parent</a>

test/react/rails/react_rails_ujs_test.rb

@@ -91,25 +91,36 @@ class ReactRailsUJSTest < ActionDispatch::IntegrationTest
     assert page.has_content?('Hello Bob')
   end
 
-  test 'react_ujs can unmount/mount using a selector reference' do
+  test 'react_ujs can unmount/mount using a selector reference for a component parent' do
     visit '/pages/1'
     assert page.has_content?('Hello Bob')
 
-    page.click_link "Unmount at selector #test-component"
+    page.click_link "Unmount at selector #component-parent"
     assert page.has_no_content?('Hello Bob')
 
-    page.click_link "Mount at selector #test-component"
+    page.click_link "Mount at selector #component-parent"
+    assert page.has_content?('Hello Bob')
+  end
+
+  test 'react_ujs can unmount/mount using a selector reference for the component' do
+    visit '/pages/1'
+    assert page.has_content?('Hello Bob')
+
+    page.click_link "Unmount at selector #component"
+    assert page.has_no_content?('Hello Bob')
+
+    page.click_link "Mount at selector #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"
+    page.click_link "Unmount at node #component-parent"
     assert page.has_no_content?('Hello Bob')
 
-    page.click_link "Mount at node #test-component"
+    page.click_link "Mount at node #component-parent"
     assert page.has_content?('Hello Bob')
   end