how to test javascript within rspec capybara?

Question

I use a javascript library - clipboardjs - for copying input field values to system clipboard.

In my application.js:

function addressClipboard() {
  new Clipboard('.address-copy', {
      text: function(trigger) {
          var addressString = "";
          addressString += $('#addresses_attributes_0_street').val() + "\n" +
             $('#addresses_attributes_0_city').val() + "\n";
          addressString = addressString.trim();
          return addressString;
      }
  })
};

I like to test the functionality with rspec & capybara.

address_spec.rb:

    it "checks the copied values when clicking the copy-to-clipboard link", :js do
      new_address = build(:address)
      visit new_address_path
      fill_in "person_addresses_attributes_0_street", with: new_address.street
      fill_in "person_addresses_attributes_0_city", with: new_address.city
      click_link(I18n.t('helpers.copy_to_clipboard'))
      # Pseudocode:
      expect(page.execute_script("addressClipboard()")).to eq([new.address.street,new.address.city].join)

Is there a way to access the javascript variable addressString and compare it to the address attributes (eg. new_address.street) within rspec?

Does this answer your question? [Emulating a clipboard copy/paste with Selinum + Capybara](https://stackoverflow.com/questions/58034127/emulating-a-clipboard-copy-paste-with-selinum-capybara) — Kevin Cooper, Jun 05 '20 at 04:33

score 0 · Answer 1 · answered Nov 27 '15 at 14:25

0

I think you were not able to fill the text box because of the using fill_in then it returns nill. It should be fill_in 'Name', :with => 'text', see it should like as:

it "checks the copied values when clicking the copy-to-clipboard link", :js do
  new_address = build(:address)
  visit new_address_path
  fill_in "person_addresses_attributes_0_street", :with => new_address.street
  fill_in "person_addresses_attributes_0_city", :with => new_address.city
  click_link(I18n.t('helpers.copy_to_clipboard'))

  expect(page.evaluate_script("addressClipboard()")).to be true
end

answered Nov 27 '15 at 14:25

Mesut GUNES

5,532
2
22
43

my fill_in method works. I'm just struggling with the access to javascript variable. – StandardNerd Nov 27 '15 at 15:00
@StandardNerd if your function is defined in global scope your calling the method is correct otherwise you need to learn the scope of the function then call it. Look at this: http://stackoverflow.com/a/9354233/2568849 – Mesut GUNES Nov 27 '15 at 15:31

score 0 · Accepted Answer · answered Nov 27 '15 at 15:42

I found a solution:

After changing my javascript to:

addressClipboard = undefined;
lastAddressString = undefined;

$(document).ready(function(e) {
    addressClipboard = new Clipboard('.address-copy', {
        text: function(trigger) {
            var addressString = "";
            addressString += $('#person_addresses_attributes_0_street').val() + "\n" +
               $('#person_addresses_attributes_0_city').val() + "\n";
            lastAddressString = addressString = addressString.trim();
            return addressString;
        },
    });
});

I can access the javascript's lastAddressString within rspec:

  clipboard_text = page.evaluate_script("addressClipboard.text()")
  expected_text = [ new_address.street, new_address.city ].join("\n")
  expect(clipboard_text).to eql(expected_text)

how to test javascript within rspec capybara?

2 Answers2