Test that a component has been rendered?

[jacob-carlborg-apoex]

I've started to experiment with replacing views with components. That is, I'm rendering a component in the controller. I'm using RSpec as the testing framework. I have some exiting request specs [1] that verifies that a certain template is rendered. Example:

expect(response).to render_template(:index)

Is there a way to make a corresponding verification with components? That is, a test that asserts that a given component have been rendered.

[1] https://relishapp.com/rspec/rspec-rails/v/5-1/docs/request-specs/request-spec

[joelhawksley]

@jacob-carlborg-apoex generally, we use test-only selectors for this kind of thing internally: https://github.com/primer/view_components/blob/be1c07750483b3cf9ee67f7bb2db6021858f8bbd/app/lib/primer/test_selector_helper.rb.

That being said, I'd love to see support for similar functionality to your example in ViewComponent. Could you propose some API options? I assume we'd want at least Minitest and RSpec options.

[jacob-carlborg-apoex]

generally, we use test-only selectors for this kind of thing internally

I'm also already using the same idea for testing the actual component. I ended up using something similar as a workaround for the request test.

That being said, I'd love to see support for similar functionality to your example in ViewComponent. Could you propose some API options? I assume we'd want at least Minitest and RSpec options.

Here's a suggestion for RSpec, that corresponds to render_template:

expect(response).to render_component(Component)

Where Component is the class of the component. If it's interesting to verify arguments passed to the component it could look like this:

expect(response).to render_component(Component).with(arg1, arg2, kwarg: value)

I'm less familiar with Minitest, but since render_template delegates to assert_template, perhaps something like:

assert_component Component, with: [arg1, arg2, kwarg: value]

I don't know if it would be possible for the testing framework to figure out if a component was directly rendered in a controller or if it was rendered inside another component.

[boardfish]

A matcher would be possible if a pattern for test-only selectors was baked into ViewComponent itself. I can see render_component(Component equating to have_css(Component.test_only_selector).

As for the latter, it could be possible to check if a component was rendered inside another component if all test-only selectors started with the same root. So we could match on .testParentComponent .testComponent to see if a Component is within some ParentComponent.

with's perhaps a bit trickier. In ActionView, that's probably achieved by ensuring that a matching call was made or that the local variables match, but that's understandably more difficult in ViewComponent unless we watch for a call to the initializer.

[jacob-carlborg-apoex]

A matcher would be possible if a pattern for test-only selectors was baked into ViewComponent itself. I can see render_component(Component equating to have_css(Component.test_only_selector)

I don't know if this a good idea, but it could be implemented something like this:

component = instance_double(Component)
expect(Component).to receive(:new).with(arg1, arg2, kwarg: value).and_return(component)
expect(controller).to receive(:render).with(component)

As for the latter,...

I'm only interested in the component that is rendered in the controller, not any nested component. Nested components are already tested by a standard component test. I was thinking if there could be some ambiguities if the same component is both rendered directly in the controller and nested.