如何在 rspec 水豚中测试 javascript？

Question

我使用 javascript 库 - clipboardjs - 将输入字段值复制到系统剪贴板。

在我的 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;
      }
  })
};

我喜欢用 rspec 和水豚测试功能。

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)

有没有办法访问 javascript 变量 addressString 并将其与 rspec 中的地址属性（例如 new_address.street）进行比较？

Answer 1

我认为您无法填写文本框，因为使用 fill_in 然后它 returns 无效。它应该是 fill_in 'Name', :with => 'text'，看到它应该像：

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

Answer 2

我找到了解决方案：

将我的 javascript 更改为：

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;
        },
    });
});

我可以在 rspec:

中访问 javascript 的 lastAddressString

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

如何在 rspec 水豚中测试 javascript？

how to test javascript within rspec capybara?

rspec

capybara

poltergeist

clipboard.js