質問編集履歴

書式の改善

2020/03/08 04:06

投稿

meganezaru-kei

スコア6

test CHANGED Viewed

	@@ -1 +1 @@
1	- capybaraでselectタグ~~の中にoption~~を格納することができない
1	+ 【capybara】JavaScriptで生成されたselectタグを選択することができない

test CHANGED Viewed

@@ -4,207 +4,377 @@
 capybaraで記事の新規投稿をする場合の統合テストを書いています。
+新規投稿画面で、以下のように「犬種」を選択すると、その子カテゴリーのselectタグが出てくるようにJavaScript (jQuery) を書いています。
+![![イメージ説明](4606282692957788466294c3b6d2fd21.gif)]
+この新しく生成されたselectタグを、capybara上で選択されるようにしたいのですが、以下のようなエラーが発生します。
+### 発生している問題・エラーメッセージ
+```
+Failures:
+  1) post create post
+     Failure/Error: select 'ゴールデンレトリバー', from: 'child_category'
+     Capybara::ElementNotFound:
+       Unable to find select box "child_category" that is not disabled and Unable to find input box with datalist completion "child_category" that is not disabled
+```
+### 該当のソースコード
+spec/features/post_spec.rb
+```ruby
+require 'rails_helper'
+feature 'post', type: :feature do
+  let(:user) { create(:user) }
+  background do
+    parent_category = Category.create(name: '大型犬', ancestry: nil)
+    child_category = Category.create(name: 'ゴールデンレトリバー', ancestry: 9)
+  end
+  scenario 'create post', js: true do
+    visit root_path
+    expect(page).to have_no_content('新規投稿')
+    visit login_path
+    fill_in 'user_email', with: user.email
+    fill_in 'user_password', with: user.password
+    find('input[value="ログイン"]').click
+    expect(current_path).to eq root_path
+    expect(page).to have_content('新規投稿')
-新規投稿画面に、
+    expect {
+      click_link('new-post-btn')
+      expect(current_path).to eq new_post_path
+      attach_file 'post_images_1', "#{Rails.root}/spec/support/assets/test-image.png", make_visible: true
+      fill_in 'post_title', with: 'フィーチャスペックのテスト'
+      fill_in 'post_body', with: 'フィーチャスペックのテスト'
+      select '大型犬', from: 'parent_category'
+      select 'ゴールデンレトリバー', from: 'child_category' ###ここでエラー発生###
+      find('input[value="保存"]').click
+    }.to change(Post, :count).by(1)
+  end
+end
+```
+rails_helper.rb
+```ruby
+require 'spec_helper'
+ENV['RAILS_ENV'] ||= 'test'
+require File.expand_path('../config/environment', __dir__)
+if Rails.env.production?
+  abort('The Rails environment is running in production mode!')
+end
+require 'rspec/rails'
+require 'capybara/rspec'
+require 'capybara/poltergeist'
+begin
+  ActiveRecord::Migration.maintain_test_schema!
+rescue ActiveRecord::PendingMigrationError => e
+  puts e.to_s.strip
+  exit 1
+end
+RSpec.configure do |config|
+  Dir[Rails.root.join('spec/support/**/*.rb')].sort.each { |f| require f }
+  config.include Devise::Test::ControllerHelpers, type: :controller
+  config.include ControllerMacros, type: :controller
+  config.include FactoryBot::Syntax::Methods
+  Capybara.javascript_driver = :poltergeist
+  Capybara.register_driver :poltergeist do |app|
+    Capybara::Poltergeist::Driver.new(app, {js_errors: false})
+  end
+  Headless.new.start
+  require 'database_cleaner'
+  config.before(:suite) do
+    DatabaseCleaner.strategy = :truncation
+    DatabaseCleaner.clean_with(:truncation)
+  end
+  config.before(:each) do
+    DatabaseCleaner.start
+  end
+  config.after(:each) do
+    DatabaseCleaner.clean
+  end
+  config.fixture_path = "#{::Rails.root}/spec/fixtures"
+  config.use_transactional_fixtures = false
+  config.infer_spec_type_from_file_location!
+  config.filter_rails_from_backtrace!
+end
+FactoryBot::SyntaxRunner.class_eval do
+  include ActionDispatch::TestProcess
+end
+```
+posts_controller.rb
+```ruby
+  def new
+    @post = Post.new
+    @images_count = @post.images.length.to_i
+    @category_parent_array = ['---', '大型犬', '中型犬', '小型犬']
+  end
+```
+new.html.haml
+```haml
+.form-group#category
+  = f.label :parent_category, '犬種：'
+  = f.select :parent_category, @category_parent_array, {}, { id: 'parent_category', class: 'form-control' }
+```
+javascriptで生成されるselectタグ
 ```html
-<select id="parent_category" class="form-control" name="post[parent_category]">
+<select id="child_category" class="form-control mt-2" name="post[child_category]">
   <option value="---">---</option>
-  <option value="大型犬">大型犬</option>
+  <option value="ゴールデンレトリバー" data-category="10">ゴールデンレトリバー</option>
-  <option value="中型犬">中型犬</option>
+  <option value="ラブラドールレトリバー" data-category="11">ラブラドルレトリバー</option>
-  <option value="小型犬">小型犬</option>
+    ##（中略）
 </select>
 ```
-というselectタグがあるので、
-`select '大型犬', from: 'parent_category'`
-を使って、「大型犬」というoptionが選択されている状態にしたいのですが、以下のエラーが発生してしまいます。
-### 発生している問題・エラーメッセージ
-```
-Failures:
-  1) post create post
-     Failure/Error: select '大型犬', from: 'parent_category'
-     Capybara::ElementNotFound:
-       Unable to find option "大型犬" within #<Capybara::Node::Element tag="select" path="/html/body/div/form/div[3]/div[2]/div[1]/select">
-```
-### 該当のソースコード
-spec/features/post_spec.rb
-```ruby
-require 'rails_helper'
-feature 'post', type: :feature do
-  let(:user) { create(:user) }
-  let(:category) { create(:category) }
-  scenario 'create post' do
-    visit root_path
-    expect(page).to have_no_content('新規投稿')
-    visit login_path
-    fill_in 'user_email', with: user.email
-    fill_in 'user_password', with: user.password
-    find('input[value="ログイン"]').click
-    expect(current_path).to eq root_path
-    expect(page).to have_content('新規投稿')
-    expect {
-      click_link('new-post-btn')
-      expect(current_path).to eq new_post_path
-      attach_file 'post_images_1', "#{Rails.root}/spec/support/assets/test-image.png"
-      fill_in 'post_title', with: 'フィーチャスペックのテスト'
-      fill_in 'post_body', with: 'フィーチャスペックのテスト'
-      select '大型犬', from: 'parent_category'  #ここでエラー発生
-      find('input[value="保存"]').click
-    }.to change(Post, :count).by(1)
-  end
-end
-```
-posts_controller.rb
-```ruby
-  def new
-    @post = Post.new
-    @images_count = @post.images.length.to_i
-    @category_parent_array = ['---']
-    Category.where(ancestry: nil).each do |parent|
-      @category_parent_array << parent.name
-    end
-  end
-```
-new.html.haml
-```haml
-.form-group#category
-  = f.label :parent_category, '犬種：'
-  = f.select :parent_category, @category_parent_array, {}, { id: 'parent_category', class: 'form-control' }
-```
-コントローラで@category_parent_arrayの中に['---', '大型犬', '中型犬', '小型犬']を格納し、
-これをビューファイルでselectタグの選択肢となるように設定しています。
-ブラウザ上は問題なく選択肢が出てくるのですが、capybaraでは初期値の「---」しか設定されていないようで、テストが通りません。
-試しに`select '大型犬', from: 'parent_category'`をコメントアウトして再度テストを実行してみると、
-```
-Failures:
-  1) post create post
-     Failure/Error: = f.select :parent_category, @category_parent_array, {}, { id: 'parent_category', class: 'form-control' }
-     ActionView::Template::Error:
-       undefined method `map' for nil:NilClass
-```
-というエラーが発生し、capybaraでのテスト実行中にmapメソッドが使えていないことが原因なのかなと考えています。
-状況としては以下の記事に似ているようなのですが、ベストアンサーもなく解決策が見つかりません。
-https://stackoverflow.com/questions/57974438/undefined-method-map-while-running-capybara-test
-原因や解決方法がわかる方がいらっしゃいましたら、ご助言いただけますと幸いです。????‍♂️
+post-categoies.js
+```js
+$(document).on('turbolinks:load', function(){
+  $(function(){
+    // カテゴリーセレクトボックスのオプションを作成
+    function appendOption(category){
+      var html = `<option value="${category.name}" data-category="${category.id}">${category.name}</option>`;
+      return html;
+    }
+    // 子カテゴリーの表示作成
+    function appendChidrenBox(insertHTML){
+      var childSelectHtml = '';
+      childSelectHtml = `
+      <select id="child_category" class="form-control mt-2" name="post[child_category]">
+        <option value="---">---</option>
+        ${insertHTML}
+      </select>`;
+      $('#category').append(childSelectHtml);
+    }
+    // 親カテゴリー選択後のイベント
+    $('#parent_category').on('change', function(){
+      var parentCategory = document.getElementById('parent_category').value; //選択された親カテゴリーの名前を取得
+      if (parentCategory != "---"){ //親カテゴリーが初期値でないことを確認
+        $.ajax({
+          url: '/posts/set_category_children',
+          type: 'GET',
+          data: { parent_name: parentCategory },
+          dataType: 'json'
+        })
+        .done(function(children){
+          $('#child_category').remove(); //親が変更された時、子以下を削除するする
+          var insertHTML = '';
+          children.forEach(function(child){
+            insertHTML += appendOption(child);
+          });
+          appendChidrenBox(insertHTML);
+        })
+        .fail(function(){
+          alert('カテゴリー取得に失敗しました');
+        })
+      }else{
+        $('#child_category').remove(); //親カテゴリーが初期値になった時、子以下を削除するする
+      }
+    });
+  });
+});
+```
+### 試したこと
+以下の記事を参考にして、poltergeistをセットアップしているのですが、うまくいかず・・・
+[使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」](https://qiita.com/jnchito/items/607f956263c38a5fec24#javascript%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84%E3%81%A8%E6%93%8D%E4%BD%9C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%87%A6%E7%90%86%E3%82%92%E3%83%86%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B)
+また他にもcapybara-webkitを導入してみたりなどもしましたが、これもまたうまく動作しないという状態です。。
+原因や解決方法がわかりそうな方がいらっしゃいましたら、ご助言いただけますと幸いです。????‍♂️