{"id":21633,"date":"2018-05-11T12:15:25","date_gmt":"2018-05-11T09:15:25","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21633"},"modified":"2018-05-10T14:04:04","modified_gmt":"2018-05-10T11:04:04","slug":"rails-frontend-testing-with-javascript-insights","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/rails-frontend-testing-with-javascript-insights\/","title":{"rendered":"Rails Frontend Testing with JavaScript Insights"},"content":{"rendered":"

One of the newer things that Rails 5+ provides is system tests<\/em>. This gives us a full frontend testing experience with Capybara, which runs each of our tests through a real browser window to perfectly provide what a normal web user would experience. Having this baked in to Rails makes for an elegant way to get started and hit the ground running.<\/p>\n

What\u2019s more, Rails will generate our standard CRUD system tests per resource when we use the Rails generator to generate it with the models name and attribute fields. This makes swapping in frontend frameworks a much more seamless experience.<\/p>\n

In this post, we\u2019ll tackle what changes to the code are required to get our previous Rails and VueJS posts app<\/a> system tests all passing. And we\u2019ll look at some JavaScript insights that might just save your day.<\/p>\n

Updating a Frontend Application<\/h2>\n

The changes we\u2019ll be demonstrating here are from where we left off in the VueJS Components with CoffeeScript for Rails<\/a> post. You can find the source code for where we left off at danielpclark\/vue_example<\/a>.<\/p>\n

To run your system tests, execute the following command in your project directory:<\/p>\n

rails test:system<\/pre>\n
We should have two errors showing up for our create and update resources. The error message reads Unable to find visible field \"Body\" that is not disabled<\/code>.<\/p>\n
We get the error about only this field because it\u2019s the first error that\u2019s come across in the test. If we swap our test order around, we\u2019ll find that all of our fields in the create and update tests fail in this way. This has to do with the way Capybara looks up fields for testing.<\/p>\n
When you use Rails\u2019 form methods to generate labels and input fields, the HTML element label<\/code> will have a for<\/code> field. This contains the name of whatever input\u2019s id<\/code> object you\u2019re targeting. When we wrote a new form by hand with our VueJS components template, we didn\u2019t write these fields in. So you\u2019ll need to change the form fields in file app\/javascript\/form-document.vue.erb<\/code> from:<\/p>\n
<label>Subject<\/label>\r\n<input type=\"text\" v-model=\"document.subject\" \/>\r\n\r\n<label>State<\/label>\r\n<select v-model=\"document.state\">\r\n  <%= options_for_select(Document.states.keys, \"concept\") %>\r\n<\/select>\r\n\r\n<label>Body<\/label>\r\n<textarea v-model=\"document.body\"><\/textarea><\/pre>\n
to the following:<\/p>\n
<label for=\"document_subject\">Subject<\/label>\r\n<input id=\"document_subject\" type=\"text\" v-model=\"document.subject\" \/>\r\n\r\n<label for=\"document_state\">State<\/label>\r\n<select id=\"document_state\" v-model=\"document.state\">\r\n  <%= options_for_select(Document.states.keys, \"concept\") %>\r\n<\/select>\r\n\r\n<label for=\"document_body\">Body<\/label>\r\n<textarea id=\"document_body\" v-model=\"document.body\"><\/textarea><\/pre>\n
Now when you ask Capybara to fill_in<\/code> the Subject<\/code>, it gets the target by the label\u2019s content and for<\/code> value and then targets the id<\/code> used in that for<\/code> value. What\u2019s nice about this is you may use this label targeting technique in ways other than targeting an input field that follows.<\/p>\n
If you try to run rails test:system<\/code> again, you\u2019ll notice the same error messages are coming up. This has to do with a configuration in Rails 5 where the test environment isn\u2019t using protect_from_forgery<\/code>, so the CSRF token is not being provided. Our VueJS code is failing because it explicitly requires that meta attribute field to be available.<\/p>\n
You can fix this in one of these ways:<\/p>\n