Drag & Drop(clone)をRspecでテストする方法
解決したいこと
Vue2 + Rails(6.1)で実装したvuedraggabeを使用したcloneによる要素追加機能を
Rspecでテストしたいのですが、Drag&Dropの動作をテストコードで表現できません。
恐らく、seleniumの'drag_and_drop_by'を使用すれば良いことまでは当てがつきましたが、
参照がマウス位置になってしまいうまく動作しません。
上記の参照をマウスから要素にする方法をご教授頂きたいです
※テストで再現したいのは下記の動作です
発生している問題
・system_test.rbを走らせた際の動作(gif)
・問題動作のキャプチャ
目的の動作としては、黒丸・及び黒矢印のドラック＆ドロップを実施したいが
実際は、赤丸のようにLargeGroupがドラックはされるが、マウスポインタの位置にドロップされてしまう。
該当するソースコード
system_test.rb
require 'rails_helper'
RSpec.describe 'KJ_method', type: :system do
describe 'KJ_method' do
it 'large' do
target = find('.large-group')
page.driver.browser.action.drag_and_drop_by(target.native, 10, 100).perform
#=> ※This part not reference '.large-group' but mouse cursor
sleep(3)
end
end
end
rails_helper.rb
require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'
require_relative '../config/environment'
abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'rspec/rails'
begin
ActiveRecord::Migration.maintain_test_schema!
rescue ActiveRecord::PendingMigrationError => e
puts e.to_s.strip
exit 1
end
RSpec.configure do |config|
config.fixture_path = "#{::Rails.root}/spec/fixtures"
config.use_transactional_fixtures = true
config.infer_spec_type_from_file_location!
config.filter_rails_from_backtrace!
end
spec_helper.rb
RSpec.configure do |config|
config.before(:all) do
FactoryBot.reload
end
config.expect_with :rspec do |expectations|
expectations.include_chain_clauses_in_custom_matcher_descriptions = true
end
config.mock_with :rspec do |mocks|
mocks.verify_partial_doubles = true
end
config.shared_context_metadata_behavior = :apply_to_host_groups
end
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.4'
gem 'rails', '~> 6.1.7'
gem 'pg', '~> 1.1'
gem 'puma', '~> 5.0'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'rexml'
gem 'cocoon'
gem 'acts_as_list'
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'spring'
gem 'rspec-rails'
gem 'spring-commands-rspec'
gem 'factory_bot_rails'
gem 'faker'
gem 'launchy'
gem 'pry-rails'
end
group :development do
gem 'web-console', '>= 4.1.0'
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
end
group :test do
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver', '>= 4.0.0.rc1'
gem 'webdrivers'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
自分で試したこと
Capybaraの'drag_to'メソッドは検討してみましたが、
要素=>要素への移動のためcloneによる要素追加は実現不可と見切っております。
※要素(.large-group)から特定の位置にドラッグ&ドロップするという形で記述できればうまく動作すると見込んでおります。
0
