OEL-3343: Changed to standalone pattern and added js tests.

bcl-builder.config.js

@@ -8,6 +8,15 @@ const includePaths = [nodeModules];
 
 module.exports = {
   styles: [
+    {
+      entry: path.resolve(outputFolder, "resources/sass/copyright_overlay.scss"),
+      dest: path.resolve(outputFolder, "assets/css/copyright-overlay.style.min.css"),
+      options: {
+        includePaths,
+        minify: true,
+        sourceMap: "file",
+      },
+    },
     {
       entry: path.resolve(outputFolder, "resources/sass/oe_bootstrap_theme.style.scss"),
       dest: path.resolve(outputFolder, "assets/css/oe_bootstrap_theme.style.min.css"),

docker-compose.yml

@@ -23,6 +23,17 @@ services:
       MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
     # ports:
     #   - 3306:3306
+  selenium:
+    image: selenium/standalone-chrome:4.1.3
+    environment:
+      - DISPLAY=:99
+      - VNC_NO_PASSWORD=1
+    ports:
+      - '4444:4444'
+      - '5900:5900'
+    expose:
+      - '4444'
+    shm_size: 2g
   node:
     image: node:18.12.0
     user: "node"

oe_bootstrap_theme.libraries.yml

@@ -25,3 +25,13 @@ inpage_navigation:
 copy_clipboard:
   js:
     resources/js/copy_clipboard.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
+
+pattern.copyright_overlay:
+  css:
+    theme:
+      assets/css/copyright-overlay.style.min.css: {}
+  dependencies:
+    - oe_bootstrap_theme/copy_clipboard

phpunit.xml.dist

@@ -6,6 +6,8 @@
     <env name="SIMPLETEST_IGNORE_DIRECTORIES" value="vendor,node_modules,${drupal.root}"/>
     <env name="SIMPLETEST_BASE_URL" value="${drupal.base_url}"/>
     <env name="SIMPLETEST_DB" value="mysql://${drupal.database.user}:${drupal.database.password}@${drupal.database.host}:${drupal.database.port}/${drupal.database.name}"/>
+    <!-- @todo When dropping support for 10.2.x, rename "chromeOptions" to "goog:chromeOptions". -->
+    <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["${selenium.browser}", {"browserName":"chrome","chromeOptions":{"w3c": false, "args":["--no-sandbox", "--start-maximized", "--disable-gpu", "--window-size=1280,800", "--disable-dev-shm-usage", "--disable-setuid-sandbox", "--disable-web-security", "--DNS-prefetch-disable", "--disable-translate", "--ignore-certificate-errors", "--test-type", "--disable-extensions", "--incognito", "--disable-infobars"]}}, "${selenium.host}:${selenium.port}/wd/hub"]'/>
   </php>
   <testsuites>
     <testsuite name="OpenEuropa Bootstrap Theme">

resources/js/copy_clipboard.js

@@ -4,34 +4,30 @@
  */
 (function (Drupal) {
 
-  /**
-   * Attaches the copy-to-clipboard behavior to elements with the 'data-copy-target' attribute.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Initializes copy-to-clipboard functionality for each element.
-   * @prop {Drupal~behaviorDetach} detach
-   *   Cleans up any event listeners or instances to avoid memory leaks.
-   */
   Drupal.behaviors.copyClipboard = {
     attach: function (context) {
-      Array.prototype.forEach.call(document.querySelectorAll('[data-copy-target]'), function (element) {
-        var targetClass = element.getAttribute('data-copy-target');
-        var targetElement = document.querySelector('.' + targetClass);
+      // Use a scoped function to handle click events
+      const handleClick = function (event) {
+        const element = event.currentTarget;
+        const targetSelector = element.getAttribute('data-copy-target');
+        const targetElement = document.querySelector(targetSelector);
+
         if (targetElement) {
-          element.addEventListener('click', function () {
-            var copyText = targetElement.innerText || targetElement.value;
-            navigator.clipboard.writeText(copyText);
-          });
+          const copyText = targetElement.innerText || targetElement.value;
+          navigator.clipboard.writeText(copyText);
         }
+      };
+
+      // Attach click event listener to elements with data-copy-target
+      once('oebt-clipcopy', '[data-copy-target]', context).forEach(function (element) {
+        element.addEventListener('click', handleClick);
       });
     },
 
     detach: function (context, settings, trigger) {
       if (trigger === 'unload') {
-        Array.prototype.forEach.call(document.querySelectorAll('[data-copy-target]'), function (element) {
-          element.removeEventListener('click');
+        Array.prototype.forEach.call(context.querySelectorAll('[data-copy-target]'), function (element) {
+          element.removeEventListener('click', handleClick);
         });
       }
     }

resources/sass/components/_all.scss

@@ -7,4 +7,3 @@
 @import 'listing';
 @import 'columns';
 @import 'patterns-preview';
-@import 'copyright_overlay';

runner.yml.dist

@@ -30,6 +30,11 @@ drupal:
         - "vendor"
         - "${drupal.root}"
 
+selenium:
+  host: "http://selenium"
+  port: "4444"
+  browser: "chrome"
+
 commands:
   drupal:site-setup:
     - { task: "run", command: "drupal:symlink-project" }

templates/patterns/copyright_overlay/pattern-copyright-overlay.html.twig

@@ -4,17 +4,18 @@
  * Copyright overlay pattern.
  */
 #}
-{{ attach_library('oe_bootstrap_theme/copy_clipboard') }}
+{{ attach_library('oe_bootstrap_theme/pattern.copyright_overlay') }}
 
 {% set _trigger_label = trigger_label|default('View more'|t) %}
 {% set _modal_title = modal_title|default('Copyright'|t) %}
 
 {% set _footer %}
   {% include '@oe-bcl/button' with {
     label: 'Copy Copyright'|t,
-    attributes:  create_attribute()
-      .setAttribute('data-bs-dismiss', 'modal')
-      .setAttribute('data-copy-target', 'copyright-content'),
+    attributes: create_attribute({
+      'data-bs-dismiss': 'modal',
+      'data-copy-target': '.copyright-content'
+    })
   } only %}
 {% endset %}
 
@@ -41,8 +42,9 @@
     'show_close_button': true,
     'body': _content,
     'footer': _footer,
-    'attributes': create_attribute()
-      .setAttribute('id', modal_id)
+    'attributes': create_attribute({
+      id: modal_id
+    })
   }) }}
 </div>
 

tests/src/FunctionalJavascript/CopyClipboardTest.php

@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\Tests\oe_bootstrap_theme\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the copy to clipboard functionality.
+ */
+class CopyClipboardTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'oe_bootstrap_theme';
+
+  /**
+   * Tests the copy to clipboard behavior in the copyright overlay.
+   */
+  public function testCopyToClipboard(): void {
+    $this->drupalGet('/patterns/copyright_overlay');
+
+    // Open the modal by clicking the trigger.
+    $this->assertSession()->elementExists('css', '.copyright-trigger')->click();
+    $this->assertSession()->waitForElementVisible('css', '.modal.show');
+
+    // Ensure the copy button exists and simulate click.
+    $this->assertSession()->elementExists('css', '[data-copy-target=".copyright-content"]');
+    $this->getSession()->getPage()->clickButton('[data-copy-target=".copyright-content"]');
+
+    // Get the clipboard text via JavaScript.
+    $expectedText = '© Lorem ipsum amet <a href="#">John Doe</a> on <a href="#">Doe Images</a>';
+    $actualText = $this->getClipboardText();
+
+    // Assert the copied text matches expected text.
+    $this->assertEquals($expectedText, $actualText);
+  }
+
+  /**
+   * Helper method to retrieve clipboard text using JavaScript.
+   */
+  protected function getClipboardText(): string {
+    return $this->getSession()->evaluateScript('return navigator.clipboard.readText();');
+  }
+
+}