with_content and "sharp edges" during testing

[phil-janeapp]

While taking a look at #2157 and after observing several cases in our own code I'm noticing some confusion around properly providing content to a component when testing. I've also noticed at least one error message that's definitely confusing.

Given the following (hopefully syntactically-correct code):

class ParentComponent < ViewComponent::Base
  erb_template <<~ERB
    <div class="banner"><%= name %></div>
    <div class="content"><%= content %></div>
  ERB

  renders_one :child, ChildComponent
end

class ChildComponent < ViewComponent::Base
  erb_template <<~ERB
    <div class="banner-title"><%= title %></div>
    <div class="banner-content"><%= content %></div>
  ERB

  renders_one :title
end

How do you populate the banner content in a test?

Based on documentation provided it seems intuitive that the following would work, but it doesn't:

render_inline(ParentComponent.new) do |c|
  c.with_banner do |b|
    b.with_title { "Banner Title" }
    b.with_content("Banner Content")
  end
end

You then may try the following, only to be greeted by a somewhat confusing error message:

render_inline(ParentComponent.new) do |c|
  c.with_banner do |b|
    b.with_title { "Banner Title" }.with_content("Banner Content")
  end
end

ViewComponent::DuplicateSlotContentError: It looks like a block was provided after calling `with_content` on ViewComponent::Slot, which means that ViewComponent doesn't know which content to use.

Finally (after a long coffee/tea break to relax) you carefully think through how to handle this in a template, and realize that the following is how it needs to be done:

render_inline(ParentComponent.new) do |c|
  c.with_banner do |b|
    b.with_title { "Banner Title" }
   "Banner Content"
  end
end

I don't have any immediate suggestions on improving the interface, but if anyone else feels this is confusing I'll gladly contribute some documentation improvements to make this behaviour more clear 👍

[joelhawksley]

Let's track this as an issue: #2345