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和amp;来测试功能水豚。

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，你无法填充文本框，然后返回nill。它应该是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更改为：

$('select').on('change', function(){
    var typology = $(this).val();
    $('#filter-table').find('input[type="checkbox"]').prop("checked", false);
    $('#filter-table tr[data-typology="'+typology +'"]').find('input[type="checkbox"]').prop("checked", true);
});

我可以在rspec中访问javascript的lastAddressString：

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 capybara中测试javascript？

2 个答案: