EWPP-1849: Fix js for contextual navigation pattern.

templates/patterns/context_nav/js/contextual_navigation.js

@@ -35,31 +35,37 @@
    * @namespace
    */
   Drupal.contextualNavigation = {
-
     // Selector for list navigation element.
     listSelector: '[data-ecl-contextual-navigation-list]',
     // Selector for more item element.
     moreItemSelector: '[data-ecl-contextual-navigation-more]',
-
+    // Selector for wrapper of more item element.
+    moreItemWrapperSelector: '.ecl-contextual-navigation__item--more',
 
     initialize: function (element) {
       var list = element.querySelector(this.listSelector);
       if (list) {
-        list
-          .querySelector(this.moreItemSelector)
-          .addEventListener('click', this.handleClickOnMore);
+        var moreItem = list.querySelector(this.moreItemSelector);
+        if (moreItem) {
+          moreItem.addEventListener('click', this.handleClickOnMore);
+          moreItem.list = list;
+          moreItem.wrapper = list.querySelector(this.moreItemWrapperSelector);
+        }
       }
     },
     handleClickOnMore: function () {
-      if (this.parentNode && this.parentNode.parentNode) {
-        this.parentNode.parentNode.setAttribute('aria-expanded', 'true');
-        this.parentNode.parentNode.removeChild(this.parentNode);
+      if (this.list) {
+        this.list.setAttribute('aria-expanded', 'true');
+        if (this.wrapper) {
+          this.wrapper.parentNode.removeChild(this.wrapper);
+        }
       }
     },
     destroy: function (element) {
-      element
-        .querySelector(this.moreItemSelector)
-        .removeEventListener('click', this.handleClickOnMore);
+      var moreItem = element.querySelector(this.moreItemSelector);
+      if (moreItem) {
+        moreItem.removeEventListener('click', this.handleClickOnMore);
+      }
     }
   }
 })(Drupal);

tests/modules/oe_theme_js_test/oe_theme_js_test.routing.yml

@@ -19,3 +19,10 @@ oe_theme_js_test.datepicker_test_form:
     _title: 'DatePicker test form'
   requirements:
     _access: 'TRUE'
+oe_theme_js_test.contextual_navigation_ui_pattern:
+  path: '/oe_theme_js_test/ui_patterns/context_nav'
+  defaults:
+    _title: 'Contextual navigation page'
+    _controller: '\Drupal\oe_theme_js_test\Controller\UiPatterns::contextNav'
+  requirements:
+    _access: 'TRUE'

tests/modules/oe_theme_js_test/src/Controller/UiPatterns.php

@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\oe_theme_js_test\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Render\Markup;
+
+/**
+ * Returns responses for UI Patterns test routes.
+ */
+class UiPatterns extends ControllerBase {
+
+  /**
+   * Generates a page with test Contextual navigation rendered pattern.
+   *
+   * @return array
+   *   The response render array.
+   */
+  public function contextNav(): array {
+    $build = [];
+    $build['context_nav_with_more_button'] = [
+      '#type' => 'pattern',
+      '#id' => 'context_nav',
+      '#fields' => [
+        'label' => $this->t('Contextual navigation with more button'),
+        'items' => [
+          [
+            'href' => 'http://link-1.com',
+            'label' => 'Item one',
+          ],
+          [
+            'href' => 'http://link-2.com',
+            'label' => 'Item two',
+          ],
+          [
+            'href' => 'http://link-3.com',
+            'label' => 'Item three',
+          ],
+          [
+            'href' => 'http://link-4.com',
+            'label' => 'Item four',
+          ],
+          [
+            'href' => 'http://link-5.com',
+            'label' => 'Item five',
+          ],
+        ],
+        'limit' => 4,
+        'more_label' => $this->t('More label'),
+      ],
+    ];
+
+    $build['context_nav_without_more_button'] = [
+      '#type' => 'pattern',
+      '#id' => 'context_nav',
+      '#fields' => [
+        'label' => $this->t('Navigation title'),
+        'items' => [
+          [
+            'href' => 'http://link-1.com',
+            'label' => 'Item one',
+          ],
+          [
+            'href' => 'http://link-2.com',
+            'label' => 'Item two',
+          ],
+          [
+            'href' => 'http://link-3.com',
+            'label' => 'Item three',
+          ],
+        ],
+        'limit' => 4,
+        'more_label' => $this->t('More label'),
+      ],
+    ];
+
+    $script = <<<EndOfScript
+window.onerror = function(error, url, line) {
+  if (typeof(window.collectedErrors) != 'object') {
+    window.collectedErrors = [];
+  }
+  window.collectedErrors.push({type:'error', data:'ERR:'+error+' URL:'+url+' L:'+line});
+}
+EndOfScript;
+
+    $build['#attached']['html_head'][] = [
+      [
+        '#tag' => 'script',
+        '#attributes' => [
+          'type' => 'text/javascript',
+        ],
+        '#value' => Markup::create($script),
+      ], 'js_errors_collector',
+    ];
+
+    return $build;
+  }
+
+}

tests/src/FunctionalJavascript/JavascriptBehavioursTest.php

@@ -191,4 +191,34 @@ public function testEclDatePicker(): void {
     $this->assertSession()->pageTextContains('Date 1 is 10 May 2020');
   }
 
+  /**
+   * Tests that contextual navigation pattern is rendered properly.
+   */
+  public function testContextNavPattern(): void {
+    $this->drupalGet('/oe_theme_js_test/ui_patterns/context_nav');
+    $script = <<<EndOfScript
+(function(){
+if (typeof(window.collectedErrors) == 'undefined') {
+  return;
+}
+var result = '';
+window.collectedErrors.forEach(function(value) {
+   result += value.data + '[NLS]';
+});
+return result;
+})()
+EndOfScript;
+    $errors = $this->getSession()->evaluateScript($script);
+    if ($errors) {
+      throw new \RuntimeException('Javascript error: ' . str_replace('[NLS]', PHP_EOL, $errors));
+    }
+
+    $this->assertCount(2, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-list]'));
+    $this->assertCount(1, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-more]'));
+
+    $this->getSession()->getPage()->pressButton('More label');
+    $this->assertCount(0, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-more]'));
+    $this->assertCount(2, $this->getSession()->getPage()->findAll('css', '[data-ecl-contextual-navigation-list]'));
+  }
+
 }