capybara-वेबकिट

Question

का उपयोग कर मैं अपने पृष्ठ है, जो मैं लक्ष्य पर कोशिश कर रहा हूँ पर एक markdown editor उपयोग कर रहा हूँ संपादक पाठ क्षेत्र में भरें, और में भरने, capybara-वेबकिट का उपयोग कर, लेकिन किसी भी भाग्य के बिना।

मेरे टेम्पलेट इस

<%= simple_form_for form, url: url, method: :put do |f| %> 
    <%= f.input :notes, as: :text %> 
    <%= f.button :submit, class: 'fluid' %> 
<% end %> 

<!-- https://github.com/lepture/editor --> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css"> 
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script> 
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script> 

<script !src=""> 
    (function() { 
    var editor = new Editor(); 
    editor.render(); 
    })() 
</script> 

तरह लग रहा है और प्रदान की गई एचटीएमएल (निष्पादित संपादक जावास्क्रिप्ट सहित) इस तरह दिखता है (capybara-वेबकिट डीबगिंग टूल के माध्यम से)

<form novalidate="novalidate" class="simple_form simple_form ui form segment new_steps_update" id="new_steps_update" action="/presentations/1/who" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="put"> 
    <div class="field text optional steps_update_notes"><label class="text optional" for="steps_update_notes">Notes</label><textarea class="text optional" name="steps_update[notes]" id="steps_update_notes" style="display: none;"></textarea><div class="editor-toolbar"><a class="icon-bold"></a><a class="icon-italic"></a><i class="separator">|</i><a class="icon-quote"></a><a class="icon-unordered-list"></a><a class="icon-ordered-list"></a><i class="separator">|</i><a class="icon-link"></a><a class="icon-image"></a><i class="separator">|</i><a class="icon-info" href="http://lab.lepture.com/editor/markdown" target="_blank"></a><a class="icon-preview"></a><a class="icon-fullscreen"></a></div><div class="CodeMirror cm-s-paper"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 4px;"><textarea style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none; font-size: 4px;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 0px;"><div style="height: 1px;"></div></div><div class="CodeMirror-vscrollbar" style=""><div style="width: 1px;"></div></div><div class="CodeMirror-scrollbar-filler" style=""></div><div class="CodeMirror-gutter-filler" style=""></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="min-width: 41.4375px; margin-left: 0px; min-height: 26px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>​</span></pre></div><div style="position: relative; z-index: 1; display: none;"></div><div class="CodeMirror-code" style=""><pre> </pre></div><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 17px;"> </div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;"> </div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 26px;"></div><div class="CodeMirror-gutters" style="display: none; height: 420px;"></div></div></div><div class="editor-statusbar"><span class="lines">0</span><span class="words">0</span><span class="cursor">0:0</span></div></div> 
    <input type="submit" name="commit" value="Next" class="ui positive submit button fluid"> 
</form> 
<!-- https://github.com/lepture/editor --> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css"> 
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script> 
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script> 

<script !src=""> 
    (function() { 
    var editor = new Editor(); 
    editor.render(); 
    })() 
</script> 

यह थोड़ा मुश्किल है बताने के लिए, लेकिन मुझे लगता है कि मूल textarea (आईडी: step_update_notes) को textarea द्वारा div के अंदर CodeMirror की कक्षा के साथ प्रतिस्थापित किया जा रहा है, इसलिए मैं capybara का उपयोग करके इसे लक्षित करने का प्रयास कर रहा हूं , लेकिन भाग्य के बिना।

यह मेरा परीक्षण के रूप में यह अब

require 'rails_helper' 

RSpec.feature 'Planning a presentation', type: :feature do 
    context 'when logged in', js: true do 
    let!(:user) { Fabricate(:user, password: 'password') } 

    before(:each) do 
     page.driver.allow_url('cdn.jsdelivr.net') 
     login_user_js(user.email, 'password') 
    end 

    context 'new presentation' do 
     scenario 'complete process' do 
     visit presentations_path 
     click_link 'Plan a new presentation' 

     expect(page).to have_content('About your presentation') 
     fill_in 'presentations_create_title', with: 'My presentation' 
     click_button 'Next' 

     expect(page).to have_content('Step one: Who') 

     # this one is unable to find the textarea 
     fill_in '.CodeMirror textarea', with: 'My step one who notes' 

     # This one seems to complete, but upon submitting the page, the value hasn't set 
     find('.CodeMirror textarea').set('My step one who notes') 
     click_button 'Next' 

     expect(page).to have_content('Step two: Action') 
     skip 
     end 
    end 
    end 
end 

Answer 1

तो खड़ा है, यह जवाब है कि मैं उम्मीद कर रहा था नहीं है, और मुझे यकीन है कि अगर यह यह करने का सबसे अच्छा तरीका है नहीं कर रहा हूँ, लेकिन मैं कुछ काम करता है जो काम करता है।

कुछ शोध से पता चला है कि मैं जावास्क्रिप्ट का उपयोग कर, विशेष रूप से editor.codemirror.setValue(); संपादक की सामग्री को भरने के लिए सक्षम हूँ। इसलिए मैं यह सुनिश्चित किया संपादक चर एक FTAPP वस्तु (जो या सबसे अच्छा विचार नहीं हो सकता है हो सकता है) के अंदर वैश्विक क्षेत्र में था, उसके बाद निम्न Capybara कोड का इस्तेमाल किया।

require 'rails_helper' 

RSpec.feature 'Planning a presentation', type: :feature do 
    context 'when logged in', js: true do 
    let!(:user) { Fabricate(:user, password: 'password') } 

    before(:each) do 
     page.driver.allow_url('cdn.jsdelivr.net') 
     login_user_js(user.email, 'password') 
    end 

    context 'new presentation' do 
     scenario 'complete process' do 
     visit presentations_path 
     click_link 'Plan a new presentation' 

     expect(page).to have_content('About your presentation') 
     fill_in 'presentations_create_title', with: 'My presentation' 
     click_button 'Next' 

     expect(page).to have_content('Step one: Who') 

     page.execute_script('FTAPP.editor.codemirror.setValue("My step one who notes");') 

     click_button 'Next' 

     expect(page).to have_content('Step two: Action') 
     skip 
     end 
    end 
    end 
end