How to test front end features with rspec?

Question

I'm using vue.js in rails project, but only core library. Now, most form in the project developed with vue.js. I use feature test in rspec to test the front end feature, such as fill from or form validations, but found it so hard.

These some pain point when I write test:

1. I need to add id for each html tag just for capabara to selector item. You know, with vue.js, we don't need any tag id or class for item selecting.

2. How can I unit test js feature? I just only use feature test, but when project growing, test writing become harder and harder.

Is there any easier way or best practice?

Answer 1

Have in mind that Capybara support many differentselectors , which you can use to locate elements without having to always add a CSS class or id.

An even better alternative when creating your own components in Vue, is to always render a data-qa or name attribute on links and button elements (which is not necessarily the label, but can default to it), and then configure Capybara to use that to find your elements.

Capybara.configure do |config|
  config.test_id = 'data-qa'
end

click_link('cart.checkout')

For unit testing JS, you could try using Jest or Mocha-Webpack . For example, assuming that you have a configuration that uses vue-cli :

"scripts": {
  "test:mocha": "vue-cli-service test:unit --watch",
},

Answer 2

You can use jasmine. It's very popular and close to Rspec syntax. Anyway, There is plenty of tools to do that: JavaScript unit test tools for TDD