From fd1e473c5e91cdfb13c2008ab2e1b9589f770750 Mon Sep 17 00:00:00 2001
From: upchuk <danny@webomelette.com>
Date: Tue, 11 Jan 2022 15:56:46 +0200
Subject: [PATCH] EWPP-1860: Prepending inpage nav ids with ref-.

---
 js/inpage_navigation.js                                |  7 +++++++
 .../oe-theme-inpage-navigation-test-content.html.twig  |  2 ++
 .../FunctionalJavascript/InPageNavigationBlockTest.php |  2 ++
 .../InPageNavigationLibraryTest.php                    | 10 ++++++++--
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/js/inpage_navigation.js b/js/inpage_navigation.js
index 845c4ed1e5..d5f5ae958f 100644
--- a/js/inpage_navigation.js
+++ b/js/inpage_navigation.js
@@ -136,6 +136,13 @@
         return false;
       }
 
+      if (!slug[0].match("^[a-zA-Z]*$")) {
+        // In case the slug doesn't start with letters, append a string to
+        // ensure that the resulting slug is always a valid query selector.
+        slug = 'ref-' + slug;
+        originalSlug = slug;
+      }
+
       // If an element with the generated slug as ID already exists, mark the slug as seen.
       if (!this.seenIds.hasOwnProperty(slug) && document.querySelector('#' + slug)) {
         this.seenIds[slug] = 0;
diff --git a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test-content.html.twig b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test-content.html.twig
index fcb85edc30..5097d00030 100644
--- a/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test-content.html.twig
+++ b/modules/oe_theme_helper/tests/modules/oe_theme_inpage_navigation_test/templates/oe-theme-inpage-navigation-test-content.html.twig
@@ -45,4 +45,6 @@
   {# An element that will generate an ID that can represent a property of the Object prototype. #}
   <h3 class="heading">Length</h3>
 
+  <h3 class="heading">2022, a new year</h3>
+
 </div>
diff --git a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationBlockTest.php b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationBlockTest.php
index 5f7fb9e55c..ebe8d02a31 100644
--- a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationBlockTest.php
+++ b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationBlockTest.php
@@ -10,6 +10,8 @@
 
 /**
  * Test Inpage navigation block plugin.
+ *
+ * @group batch3
  */
 class InPageNavigationBlockTest extends WebDriverTestBase {
 
diff --git a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
index d96b3d9abb..3afa29afc4 100644
--- a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
+++ b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationLibraryTest.php
@@ -66,7 +66,7 @@ public function testLibrary(): void {
     // container.
     // CSS selector uses "descendent-or-self" as prefix, so we need to use
     // XPath to exclude the container from the selection.
-    $this->assertCount(10, $container->findAll('xpath', '//*[@id]'));
+    $this->assertCount(11, $container->findAll('xpath', '//*[@id]'));
 
     $inner = $container->find('xpath', '/div[@data-inpage-navigation-source-area="h3"]');
     // Since an element with ID "details" already exists in the page, the
@@ -91,10 +91,12 @@ public function testLibrary(): void {
     // easier to assert the content.
     $this->assertEquals('Title with <strong>HTML tags</strong>', $container->find('xpath', '/h3[@id="title-with-html-tags"]')->getHtml());
 
-    // Last 3 assertions for the ID generation.
+    // Last 4 assertions for the ID generation.
     $this->assertEquals('strip--unwanted-characters', $container->find('css', '.strip')->getAttribute('id'));
     $this->assertEquals('constructor', $container->find('xpath', '/h3[@class="heading"][text()="Reserved keyword"]')->getAttribute('id'));
     $this->assertEquals('length', $container->find('xpath', '/h3[@class="heading"][text()="Length"]')->getAttribute('id'));
+    // The heading starting with a non-alpha character gets a ref- prepended.
+    $this->assertEquals('ref-2022-a-new-year', $container->find('xpath', '/h3[@class="heading"][text()="2022, a new year"]')->getAttribute('id'));
 
     $navigation = $assert_session->elementExists('css', '#block-inpage-navigation nav[data-ecl-inpage-navigation]');
     $assert = new InPageNavigationAssert();
@@ -137,6 +139,10 @@ public function testLibrary(): void {
           'label' => 'Length',
           'href' => '#length',
         ],
+        [
+          'label' => '2022, a new year',
+          'href' => '#ref-2022-a-new-year',
+        ],
       ],
     ];
     $assert->assertPattern($expected, $navigation->getOuterHtml());