ruby-on-railscapybarawebmocksystem-testing

How to stub headless_chrome requisitions with web_mock on src attributes on img tags

I'm trying to use Webmock to stub headless chrome requisitions. I simply want to test the following:

Given a select and a carousel tags (the carousel is implemented using Swiper), if I change the select tag, the current showing image of the carousel has to change accordingly. For that, I'm using VueJS. An example of that in jQuery would be:

$(document).on('load', function() {
  $('.current-carousel-image').src = "https://something.com/some-image"
})

How can I stub these requests from src attribute in an img tag?

I'm using Webmock, so essentially I tried this:

test 'test something' do
  stub_request(:any, /host.com.br/)
  visit products_path(product)

  [...]

  find('select[data-grass="material-filter"]').find(:xpath, 'option[2]').select_option

  [...]
end

being host.com.br the service that provides the images I need.

this seems to work when I try using Net::HTTP methods, however, in my system test, the requisitions keep returning a 400 status (that's what's expected given that I'm using FactoryBot to generate the data that I use in the page being tested, but the service that provides the images I use are prepared to actual models in my production database)

Solution

  • You can't stub those using WebMock. WebMock can only stub requests your application makes - it can't do anything with requests the browser makes.

    To stub/mock requests made by the browser you need to use a programmable proxy. One you may want to look at is PuffingBilly