What are the options for integration testing of React + Webpack + Rails API site? - ruby-on-rails

Question

Consider a site where Rails is used only for API. No server-side rendering.
With server-side rendering it's more or less clear. capybara starts puma, after which tests can connect to puma for pages.
But with no server-side rendering, there's no puma to ask for pages. How do I do that?
Explain yourself when downvoting, please.

Answer 1

Have a look at http://ruby-hyperloop.org. You can drive your client test suite from rspec, and easily integrate with rails

Answer 2

While Server-Side Rendering must be very common these days, I decided to take an alternative approach.
Add the following gems to the Gemfile:
gem 'httparty', '~> 0.16.2'
gem 'childprocess', '~> 0.7.0'
Move the following lines from config/environments/production.rb to config/application.rb to make RAILS_LOG_TO_STDOUT available in the test environment.
if ENV['RAILS_LOG_TO_STDOUT'].present?
config.logger = Logger.new(STDOUT)
end
Regarding webpack, make sure publicPath is set to http://localhost:7777/, and UglifyJsPlugin is not used in the test environment.
And add these two files:
test/application_system_test_case.rb:
# frozen_string_literal: true
require 'uri'
require 'test_helper'
require 'front-end-server'
FRONT_END = ENV.fetch('FRONT_END', 'separate_process')
FRONT_END_PORT = 7777
Capybara.server_port = 7778
Capybara.run_server = ENV.fetch('BACK_END', 'separate_process') == 'separate_thread'
require 'action_dispatch/system_test_case' # force registering and setting server
Capybara.register_server :rails_puma do |app, port, host|
Rack::Handler::Puma.run(app, Port: port, Threads: "0:1",
Verbose: ENV.key?('BACK_END_LOG'))
end
Capybara.server = :rails_puma
DatabaseCleaner.strategy = :truncation
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
self.use_transactional_tests = false
def setup
DatabaseCleaner.start
end
def teardown
DatabaseCleaner.clean
end
def uri(path)
URI::HTTP.build(host: 'localhost', port: FRONT_END_PORT, path: path)
end
end
unless ENV.key?('NO_WEBPACK')
system(
{'NODE_ENV' => 'test'},
'./node_modules/.bin/webpack', '--config', 'config/webpack/test.js', '--hide-modules') \
or abort
end
if FRONT_END == 'separate_process'
front_srv = ChildProcess.build(
'bundle', 'exec', 'test/front-end-server.rb',
'-f', FRONT_END_PORT.to_s,
'-b', Capybara.server_port.to_s
)
if ENV.key?('FRONT_END_LOG')
front_srv.io.inherit!
end
front_srv.start
Minitest.after_run {
front_srv.stop
}
else
Thread.new do
FrontEndServer.new({
Port: FRONT_END_PORT,
back_end_port: Capybara.server_port,
Logger: Rails.logger,
}).start
end
end
unless Capybara.run_server
back_srv = ChildProcess.build(
'bin/rails', 'server',
'-P', 'tmp/pids/server-test.pid', # to not conflict with dev instance
'-p', Capybara.server_port.to_s
)
back_srv.start
# wait for server to start
begin
socket = TCPSocket.new 'localhost', Capybara.server_port
rescue Errno::ECONNREFUSED
retry
end
socket.close
Minitest.after_run {
back_srv.stop
}
end
test/front-end-server.rb:
#!/usr/bin/env ruby
require 'webrick'
require 'httparty'
require 'uri'
class FrontEndServer < WEBrick::HTTPServer
class FallbackFileHandler < WEBrick::HTTPServlet::FileHandler
def service(req, res)
super
rescue WEBrick::HTTPStatus::NotFound
req.instance_variable_set('#path_info', '/index.html')
super
end
end
class ProxyHandler < WEBrick::HTTPServlet::AbstractServlet
def do_GET(req, res)
req.header.each do |k, v|
#logger.debug("-> #{k}: #{v}");
end
#logger.debug("-> body: #{req.body}");
uri2 = req.request_uri.dup
uri2.port = #config[:back_end_port]
res2 = HTTParty.send(req.request_method.downcase, uri2, {
headers: Hash[req.header.map { |k, v| [k, v.join(', ')] }],
body: req.body,
})
res.content_type = res2.headers['content-type']
res.body = res2.body
res2.headers.each do |k, v|
#logger.debug("<- #{k}: #{v}");
end
if res.body
body = res.body.length < 100 ? res.body : res.body[0,97] + '...'
#logger.debug("<- body: #{req.body}");
end
end
alias do_POST do_GET
alias do_PATCH do_GET
alias do_PUT do_GET
alias do_DELETE do_GET
alias do_MOVE do_GET
alias do_COPY do_GET
alias do_HEAD do_GET
alias do_OPTIONS do_GET
alias do_MKCOL do_GET
end
def initialize(config={}, default=WEBrick::Config::HTTP)
config = {AccessLog: config[:Logger] ? [
[config[:Logger], WEBrick::AccessLog::COMMON_LOG_FORMAT],
] : [
[$stderr, WEBrick::AccessLog::COMMON_LOG_FORMAT],
]}.update(config)
super
if ENV.key?('FRONT_END_LOG_LEVEL')
logger.level = WEBrick::BasicLog.const_get(ENV['FRONT_END_LOG_LEVEL'])
end
mount('/', FallbackFileHandler, 'public')
mount('/api', ProxyHandler)
mount('/uploads', ProxyHandler)
end
end
if __FILE__ == $0
require 'optparse'
options = {}
OptionParser.new do |opt|
opt.on('-f', '--front-end-port PORT', OptionParser::DecimalInteger) { |o|
options[:front_end_port] = o
}
opt.on('-b', '--back-end-port PORT', OptionParser::DecimalInteger) { |o|
options[:back_end_port] = o
}
end.parse!
server = FrontEndServer.new({
Port: options[:front_end_port],
back_end_port: options[:back_end_port],
})
trap('INT') { server.shutdown }
trap('TERM') { server.shutdown }
server.start
end
Tested with rails-5.1.1, webpack-2.4.1.
To run the tests you can use the following commands:
$ xvfb-run TESTOPTS=-h bin/rails test:system
$ xvfb-run bin/rails test -h test/system/application_test.rb:6
$ xvfb-run TEST=test/system/application_test.rb TESTOPTS=-h bin/rake test
You can simplify running tests by adding package scripts:
"scripts": {
"test": "xvfb-run bin/rails test:system",
"test1": "xvfb-run bin/rails test"
}
Then:
$ yarn test
$ yarn test1 test/system/application_test.rb:6
Or so I'd like to say. But unfortunately yarn has an issue where it prepends extra paths to the PATH variable. Particularly, /usr/bin. Which leads to system ruby being executed. With all sorts of outcomes (ruby not finding gems).
To work around it you may use the following script:
#!/usr/bin/env bash
set -eu
# https://github.com/yarnpkg/yarn/issues/5935
s_path=$(printf "%s" "$PATH" | tr : \\n)
_IFS=$IFS
IFS=$'\n'
a_path=($s_path)
IFS=$_IFS
usr_bin=$(dirname -- "$(which node)")
n_usr_bin=$(egrep "^$usr_bin$" <(printf "%s" "$s_path") | wc -l)
r=()
for (( i = 0; i < ${#a_path[#]}; i++ )); do
if [ "${a_path[$i]}" = "$usr_bin" ] && (( n_usr_bin > 1 )); then
(( n_usr_bin-- ))
else
r+=("${a_path[$i]}")
fi
done
PATH=$(
for p in ${r[#]+"${r[#]}"}; do
printf "%s\n" "$p"
done | paste -sd:
)
"$#"
Then the package scripts are to be read as follows:
"scripts": {
"test": "./fix-path.sh xvfb-run bin/rails test:system",
"test1": "./fix-path.sh xvfb-run bin/rails test"
}
By default, rails starts puma in a separate thread to handle api requests while running tests. With this setup it by default runs in a separate process. Since then you can drop byebug line anywhere in your test, and the site in the browser will remain functional (XHR requests will not stuck). You can still make it run in a separate thread if you feel like it by setting BACK_END=separate_thread.
Additionally, another process (or thread, depending on the value of the FRONT_END variable) will start to handle requests for static files (or proxy requests to the back end). For that webrick is used.
To see rails's output, run with RAILS_LOG_TO_STDOUT=1, or see log/test.log. To prevent rails from colorizing the log, add config.colorize_logging = false (which will strip colors in the console as well) to config/environments/test.rb, or use less -R log/test.log. puma's output can be seen by running with BACK_END_LOG=1.
To see webrick's output, run with FRONT_END_LOG=1 (separate process), RAILS_LOG_TO_STDOUT=1 (separate thread), or see log/test.log (separate thread). To make webrick produce more info, set FRONT_END_LOG_LEVEL to DEBUG.
Also, every time you run the tests, webpack starts to compile the bundle. You can avoid that with WEBPACK=1.
Finally, to see Selenium requests:
Selenium::WebDriver.logger.level = :debug # full logging
Selenium::WebDriver.logger.level = :warn # back to normal
Selenium::WebDriver.logger.output = 'selenium.log' # log to file