Capybara testing

[mollerhoj]

The capybara matchers a included by default. Any reason why the Capybara interactions are not? I would be awesome to be able to render the components separately (As done in previews) and use Capybara methods link click_on ... etc to test the functionality of complex components.

Has anybody experimented with this?

[joelhawksley]

@mollerhoj good idea! Currently, ViewComponent tests do not involve a browser, and thus do not support interactions.

render_inline simply renders the component and parses the result with Nokogiri.

I could see us leveraging ViewComponent previews to do browser-based testing, which would also help ensure previews are properly tested! Does this spark any ideas @juanmanuelramallo ?

[juanmanuelramallo]

Interesting!

With previews enabled, it should be feasible to create a system/integration test that visits a preview URL and interact with the rendered component using capybara methods. So I guess there's no work needed to support this type of testing.

Have you tried creating a test like that @mollerhoj?

Or do you envision something closer to the render_inline method? Like calling capybara methods right after the render_inline(?)

[mollerhoj]

Thanks for the response guys. I actually assumed that this was already supported somehow, I seems so obvious that it would be a huge benefit to be able to test the interactivity of components in isolation. I'm quite surprised that I'm the first to ask about this. In my application, I have a few modals that are sprinkled with js that are used +10 times at different places in the application. Rather than either testing in every place (slow) or one place (which would it be?) I would much prefer to test the Component independently.

I'll try and look into using previews in my tests (or tests in my previews)

[mollerhoj]

Okay, @joelhawksley and @juanmanuelramallo. I run into the issue that the previews don't seem to be available for tests. I get a routing error:

No route matches [GET] "/previews/date_picker_component/default" (ActionController::RoutingError)

Adding the route to config/routes.rb doesn't not fix this. I suspect ViewComponent::Previews are not instantiated in the test environment? Do you guys have any idea how to proceed here?

[juanmanuelramallo]

Maybe previews are not enabled for the test environment. Can you try enabling them via:

# config/environments/test.rb

config.view_component.show_previews = true

[mollerhoj]

That's it! Awesome. I'll convert my components to be tested in isolation and let you know if I run in to any issues

[Jackson200]

Hi @mollerhoj ! Did you manage to use Capybara Actions like 'click' within your ViewComponent tests?

I have been extremely happily using the previews for development no problem, and Rspec matchers, but can't quite get the Actions to work.

[crespire]

Any luck doing any integration/system testing this way? I have a component that touches a few different models, and I'd like to run a system-type test of the component in isolation.

I saw a wrapbook engineering blog post leveraging previews for interaction testing, but it seemed that was mostly frontend interaction via Stimulus controllers: https://wrapbook.engineering/system-testing-view-components.html