RSpec failing because URL is being escaped - ruby-on-rails

Question

Moving RSpec in a Rails project from using Poltergeist to using Selenium (Webdriver) Chrome and now I'm getting some failures I wasn't quite expecting. Looks like it's trying to escape the URL for some reason? Thoughts?
Failures:
1) Story editing private story should be read after editing
Failure/Error: expect(story_cover_image).to eq "#{url}/convert?rotate=exif"
expected: "http://placehold.it/edited.png/convert?rotate=exif"
got: "\"http://placehold.it/edited.png/convert?rotate=exif\""
(compared using ==)
Here's the spec (removed what's not relevant):
feature 'Story editing', type: :feature, js: true do
...
let(:story_attributes) do
{
...
cover_image: {
url: 'http://placehold.it/edited.png'
}
}
end
...
def fill_file_url(url)
execute_script <<-JS
angular.element(".content").scope().story.addCoverImage();
angular.element(".content").scope().story.coverImage.url = "#{url}";
angular.element(".content").scope().story.save();
JS
expect(story_cover_image).to eq "#{url}/convert?rotate=exif"
end
...
def fill_in_story_form(story)
fill_file_url story[:cover_image][:url] if story[:cover_image]
end
...
context 'private' do
scenario 'story should be read after editing' do
fill_in_story_form story_attributes <<<<<< SPEC FAILS ON THIS LINE >>>>>
...
end
end
EDIT New failure after changing "#{url}" to #{url} as per request:
Also tried: angular.element(".content").scope().story.coverImage.url = url;
1) Story editing private story should be read after editing
Failure/Error:
execute_script <<-JS
angular.element(".content").scope().story.addCoverImage();
angular.element(".content").scope().story.coverImage.url = #{url};
angular.element(".content").scope().story.save();
JS
Selenium::WebDriver::Error::UnknownError:
unknown error: Runtime.evaluate threw exception: SyntaxError: Unexpected token :
(Session info: chrome=69.0.3497.100)
(Driver info: chromedriver=2.41.578706 (5f725d1b4f0a4acbf5259df887244095596231db),platform=Mac OS X 10.13.6 x86_64)

Answer 1

The problem is in this line:
angular.element(".content").scope().story.coverImage.url = "#{url}";
Because inside a HEREDOC everything is considered to be a string #{url} is all you need to do string interpolation. But in this case you want the interpolation to be treated as a Javascript string so you should use '#{url}'. Doing "#{url}" creates escaped double-quotes because by default a HEREDOC follows double-quoting rules, so you should change all your double quotes to single quotes inside the HEREDOC.
Trying it directly into the irb console you get:
url = "https://www.google.com"
<<-JS
angular.element('.content').scope().story.coverImage.url = '#{url}';
JS
=> "angular.element('.content').scope().story.coverImage.url = 'https://www.google.com';\n";
<<-JS
angular.element(".content").scope().story.coverImage.url = '#{url}';
JS
=> "angular.element(\".content\").scope().story.coverImage.url = 'http://www.google.com';\n"
Quoting rules of Heredoc docs