diff --git a/app/assets/javascripts/templates/product_modal.html.haml b/app/assets/javascripts/templates/product_modal.html.haml index 91021838724..374f1bda4ed 100644 --- a/app/assets/javascripts/templates/product_modal.html.haml +++ b/app/assets/javascripts/templates/product_modal.html.haml @@ -11,7 +11,7 @@ %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" } .product-description{"ng-if" => "product.description_html"} - %p.text-small{"ng-bind-html" => "::product.description_html"} + %p.text-small{"ng-bind-html" => "::product.description_html", "data-controller" => "add-blank-to-link"} .columns.small-12.medium-6.large-6.product-img %img{"ng-src" => "{{::product.largeImage}}", "ng-if" => "::product.largeImage"} diff --git a/app/webpacker/controllers/add_blank_to_link_controller.js b/app/webpacker/controllers/add_blank_to_link_controller.js new file mode 100644 index 00000000000..ad54dd929aa --- /dev/null +++ b/app/webpacker/controllers/add_blank_to_link_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "stimulus"; + +export default class extends Controller { + connect() { + this.element.querySelectorAll("a").forEach(function (link) { + link.target = "_blank"; + }); + } +} diff --git a/spec/javascripts/stimulus/add_blank_to_link_controller_test.js b/spec/javascripts/stimulus/add_blank_to_link_controller_test.js new file mode 100644 index 00000000000..97fdc884e0a --- /dev/null +++ b/spec/javascripts/stimulus/add_blank_to_link_controller_test.js @@ -0,0 +1,24 @@ +/** + * @jest-environment jsdom + */ + +import { Application } from "stimulus"; +import add_blank_to_link_controller from "../../../app/webpacker/controllers/add_blank_to_link_controller"; + +describe("AddBlankToLink", () => { + beforeAll(() => { + const application = Application.start(); + application.register("add-blank-to-link", add_blank_to_link_controller); + }); + + describe("#add-blank-to-link", () => { + beforeEach(() => { + document.body.innerHTML = `
`; + }); + + it("adds target='_blank' to anchor tags", () => { + const anchorTag = document.querySelector('a') + expect(anchorTag.getAttribute('target')).toBe("_blank"); + }); + }); +}); diff --git a/spec/system/consumer/shopping/products_spec.rb b/spec/system/consumer/shopping/products_spec.rb index d568095ec56..c7cec7efa22 100644 --- a/spec/system/consumer/shopping/products_spec.rb +++ b/spec/system/consumer/shopping/products_spec.rb @@ -76,15 +76,23 @@ product.description = 'Formatted product description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis metus diam, eget scelerisque nibh auctor non.
Link to an ' \ - 'external site' \ + 'external site' \ 'Safe
", "", truncate: false - ) + within_product_description(product) do + expect(html).to include "Safe
" + expect(html).not_to include "" + expect(page).to have_content "alert('Dangerous!'); Safe" + end + within_product_modal(product) do + expect(html).to include "Safe
" + expect(html).not_to include "" + expect(page).to have_content "alert('Dangerous!'); Safe" + end end end @@ -143,22 +158,13 @@ end end - def expect_product_description_html_to_be_displayed(product, html, not_include = nil, - truncate: false) - # check inside list of products - within "#product-#{product.id} .product-description" do - expect(html).to include(html) - expect(html).not_to include(not_include) if not_include - expect(page).to have_content "..." if truncate # it truncates a long product description - end - - # check in product description modal + def within_product_modal(product, &) click_link product.name - expect(page).to have_selector '.reveal-modal' modal_should_be_open_for product - within(".reveal-modal") do - expect(html).to include(html) - expect(html).not_to include(not_include) if not_include - end + within(".reveal-modal", &) + end + + def within_product_description(product, &) + within("#product-#{product.id} .product-description", &) end end