Fix layout nesting in system tests when using `with_rendered_componen…

…t_path` with custom layouts (#1619) * Fix invalid HTML layout * Add test for nested layout bug * Don't render file with default layout * Update docs Co-authored-by: Joel Hawksley <joel@hawksley.org>
ViewComponent · Jan 11, 2023 · 6aba644 · 6aba644
1 parent 306be44
commit 6aba644
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git a/app/controllers/view_components_system_test_controller.rb b/app/controllers/view_components_system_test_controller.rb
@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
-require "rails/application_controller"
-
-class ViewComponentsSystemTestController < Rails::ApplicationController # :nodoc:
+class ViewComponentsSystemTestController < ActionController::Base # :nodoc:
   def system_test_entrypoint
     render file: "./tmp/view_components/#{params.permit(:file)[:file]}"
   end

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -10,6 +10,10 @@ nav_order: 5
 
 ## main
 
+* Fix tests using `with_rendered_component_path` with custom layouts.
+
+    *Ian Hollander*
+
 ## 2.81.0
 
 * Adjust the way response objects are set on the preview controller to work around a recent change in Rails main.

diff --git a/docs/index.md b/docs/index.md
@@ -205,6 +205,7 @@ ViewComponent is built by over a hundred members of the community, including:
 <img src="https://avatars.githubusercontent.com/yykamei?s=64" alt="yykamei" width="32" />
 <img src="https://avatars.githubusercontent.com/matheuspolicamilo?s=64" alt="matheuspolicamilo" width="32" />
 <img src="https://avatars.githubusercontent.com/erinnachen?s=64" alt="erinnachen" width="32" />
+<img src="https://avatars.githubusercontent.com/ihollander?s=64" alt="ihollander" width="32" />
 
 ## Who uses ViewComponent?
 

diff --git a/test/sandbox/app/views/layouts/application.html.erb b/test/sandbox/app/views/layouts/application.html.erb
@@ -6,15 +6,15 @@
 </head>
 <body data-layout="application">
   <%= yield %>
-</body>
-</html>
 
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    let button = document.querySelector('[data-button]')
-    let hiddenField = document.querySelector('[data-hidden-field]')
-    button.addEventListener('click', function() {
-      hiddenField.style.display = "block"
+  <script>
+    document.addEventListener("DOMContentLoaded", function(event) {
+      let button = document.querySelector('[data-button]')
+      let hiddenField = document.querySelector('[data-hidden-field]')
+      button.addEventListener('click', function() {
+        hiddenField.style.display = "block"
+      })
     })
-  })
-</script>
+  </script>
+</body>
+</html>
diff --git a/test/sandbox/test/view_component_system_test.rb b/test/sandbox/test/view_component_system_test.rb
@@ -44,4 +44,13 @@ def test_components_with_slots
       find(".title", text: "This is my title!")
     end
   end
+
+  def test_layout_is_not_nested
+    with_rendered_component_path(render_inline(MyComponent.new), layout: "application") do |path|
+      visit path
+
+      assert find("div", text: "hello,world!")
+      assert_no_selector "body > title", visible: false
+    end
+  end
 end