Compilare area di testo Editor utilizzando capybara-webkit

Question

Sto usando un markdown editor sulla mia pagina, che sto cercando di indirizzare, e riempio, usando capybara-webkit, ma senza fortuna.

mio modello si presenta così

<%= 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> 

e il rendering HTML (compreso il JavaScript editor di esecuzione) si presenta così (attraverso gli strumenti di capibara-webkit di debug)

<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> 

E 'un po' difficile per dirlo, ma penso che l'originale textarea (id: step_update_notes) sia stato sostituito da un altro textarea all'interno di uno div con una classe di CodeMirror, quindi ho cercato di farlo utilizzando capibara , ma senza fortuna.

Questa è la mia prova così com'è ora

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

Quindi, questa non è la risposta che mi aspettavo, e non sono sicuro se questo è il modo migliore di farlo, ma io trovato qualcosa che funziona

Alcune ricerche hanno rivelato che sono in grado di popolare il contenuto dell'Editor utilizzando javascript, in particolare editor.codemirror.setValue();. Quindi ho assicurato che la variabile dell'editor fosse nell'ambito globale all'interno di un oggetto FTAPP (che potrebbe essere o non essere l'idea migliore), quindi ha usato il seguente codice 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