EWPP-1157: IN page nav library on content row paragraph.

docker-compose.yml

@@ -28,7 +28,9 @@ services:
     image: selenium/standalone-chrome-debug:3.11
     environment:
       - DISPLAY=:99
-      - SE_OPTS=-debug
+      - SCREEN_WIDTH=1440
+      - SCREEN_HEIGHT=900
+      - VNC_NO_PASSWORD=1
     ports:
       - "5900:5900"
     expose:

modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php

@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme_helper\FunctionalJavascript;
+
+use Drupal\filter\Entity\FilterFormat;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\paragraphs\Entity\Paragraph;
+use Drupal\Tests\oe_theme\PatternAssertions\InPageNavigationAssert;
+
+/**
+ * Test Inpage navigation in the content row paragraph.
+ *
+ * @group batch3
+ */
+class InPageNavigationParagraphTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'block',
+    'oe_theme_helper',
+    'oe_theme_content_page',
+    'oe_paragraphs',
+    'oe_paragraphs_demo',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  public function setUp(): void {
+    parent::setUp();
+
+    // Enable and set OpenEuropa Theme as default.
+    $this->container->get('theme_installer')->install(['oe_theme']);
+    $this->config('system.theme')->set('default', 'oe_theme')->save();
+    $this->container->set('theme.registry', NULL);
+
+    // Rebuild the ui_pattern definitions to collect the ones provided by
+    // oe_theme itself.
+    \Drupal::service('plugin.manager.ui_patterns')->clearCachedDefinitions();
+
+    FilterFormat::create([
+      'format' => 'full_html',
+      'name' => 'Full HTML',
+    ])->save();
+  }
+
+  /**
+   * Tests the inpage nav variant of the content row paragraph type.
+   */
+  public function testInpageNavigationInParagraphContentRow(): void {
+    // Create a rich text paragraph with a title and a heading in the body.
+    $paragraph = Paragraph::create([
+      'type' => 'oe_rich_text',
+      'field_oe_title' => 'Rich text title',
+      'field_oe_text_long' => [
+        'value' => 'The rich text body. <h2>Here is a heading</h2>',
+        'format' => 'full_html',
+      ],
+    ]);
+    $paragraph->save();
+
+    // Create the main content row paragraph with a default variant.
+    $content_row = Paragraph::create([
+      'type' => 'oe_content_row',
+      'oe_paragraphs_variant' => 'inpage_navigation',
+      'field_oe_title' => 'Page navigation',
+      'field_oe_paragraphs' => [$paragraph],
+    ]);
+    $content_row->save();
+
+    // Create a landing page that uses this paragraph.
+    $node = $this->drupalCreateNode([
+      'title' => 'The node title',
+      'type' => 'oe_demo_landing_page',
+      'field_oe_demo_body' => [$content_row],
+    ]);
+
+    $this->drupalGet($node->toUrl());
+    $navigation = $this->assertSession()->elementExists('css', '.ecl-col-l-3.ecl-u-z-navigation .ecl-inpage-navigation');
+    $inpage_nav_assert = new InPageNavigationAssert();
+    $inpage_nav_expected_values = [
+      'title' => 'Page navigation',
+      'list' => [
+        ['label' => 'Rich text title', 'href' => '#rich-text-title'],
+        ['label' => 'Here is a heading', 'href' => '#here-is-a-heading'],
+      ],
+    ];
+    $inpage_nav_assert->assertPattern($inpage_nav_expected_values, $navigation->getOuterHtml());
+
+  }
+
+}

oe_theme.theme

@@ -885,39 +885,21 @@ function oe_theme_preprocess_paragraph__oe_content_row__variant_inpage_navigatio
     return;
   }
 
-  // Add default fallback title for inpage naviagtion.
-  $variables['title'] = t('Page contents');
+  $title = t('Page contents');
   if (!$paragraph->get('field_oe_title')->isEmpty()) {
-    $variables['title'] = $paragraph->get('field_oe_title')->value;
-  }
-
-  // Create a shortcut to the render array for the field.
-  $field_render = &$variables['content']['field_oe_paragraphs'];
-  $links = [];
-  foreach ($paragraph->get('field_oe_paragraphs')->referencedEntities() as $delta => $sub_paragraph) {
-    /** @var \Drupal\paragraphs\Entity\Paragraph $sub_paragraph */
-    if (!$sub_paragraph->hasField('field_oe_title') || $sub_paragraph->get('field_oe_title')->isEmpty()) {
-      continue;
-    }
-
-    $unique_id = Html::getUniqueId('ecl-inpage-' . $sub_paragraph->id());
-    // Wrap the paragraph in a div with a specific id set as anchor.
-    $field_render[$delta]['#theme_wrappers']['container'] = [
-      '#attributes' => ['id' => $unique_id],
-    ];
-
-    // Get sub-paragraph translation.
-    $sub_paragraph = \Drupal::service('entity.repository')
-      ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
-
-    // Add a link pointing to the paragraph.
-    $links[] = [
-      'href' => '#' . $unique_id,
-      'label' => $sub_paragraph->get('field_oe_title')->first()->value,
-    ];
+    $title = $paragraph->get('field_oe_title')->value;
   }
 
-  $variables['links'] = $links;
+  // Add the inpage nav library.
+  $variables['inpage'] = [
+    '#theme' => 'oe_theme_helper_inpage_navigation_block',
+    '#title' => $title,
+    '#attached' => [
+      'library' => [
+        'oe_theme/inpage_navigation',
+      ],
+    ],
+  ];
 }
 
 /**

templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig

@@ -8,11 +8,7 @@
 #}
 <div class="ecl-row">
   <div class="ecl-col-l-3 ecl-u-z-navigation">
-    {% include '@ecl-twig/inpage-navigation' with {
-      'title': title,
-      'links': links,
-      'icon_path': ecl_icon_path
-    } %}
+    {{ inpage }}
   </div>
   <div class="ecl-col-l-9">
     {{ content.field_oe_paragraphs }}

tests/src/Kernel/Paragraphs/ContentRowTest.php

@@ -103,11 +103,6 @@ public function testRendering(): void {
     $this->assertStringContainsString('Rich text without title.', $html);
     $this->assertStringContainsString('Rich text with title.', $html);
 
-    // No page navigation should be shown.
-    $this->assertCount(0, $crawler->filter('.ecl-inpage-navigation'));
-    // Neither the title.
-    $this->assertStringNotContainsString('Page navigation', $html);
-
     // Change variant to the inpage navigation.
     $paragraph->get('oe_paragraphs_variant')->setValue('inpage_navigation');
     $paragraph->save();
@@ -130,15 +125,6 @@ public function testRendering(): void {
     // Verify that the inpage navigation title has been rendered.
     $this->assertEquals('Page navigation', trim($left_column->filter('.ecl-inpage-navigation__title')->text()));
 
-    // Verify that only the direct children paragraphs that have a title have
-    // been included as links.
-    $navigation_items = $left_column->filter('ul.ecl-inpage-navigation__list li');
-    $this->assertCount(3, $navigation_items);
-    // Check the order, text and anchor of each item.
-    $this->assertNavigationItem($navigation_items->eq(0), 'List item title', $right_column);
-    $this->assertNavigationItem($navigation_items->eq(1), 'List block title', $right_column);
-    $this->assertNavigationItem($navigation_items->eq(2), 'Rich text title', $right_column);
-
     // Verify that the inpage navigation default title has been rendered.
     $paragraph->get('field_oe_title')->setValue('');
     $paragraph->save();
@@ -147,55 +133,9 @@ public function testRendering(): void {
     // Assert that side-menu is correctly rendered with the default title.
     $left_column = $crawler->filter('.ecl-row .ecl-col-l-3.ecl-u-z-navigation');
     $this->assertStringContainsString('Page contents', $left_column->html());
-  }
-
-  /**
-   * Tests that side menu title translations are rendered correctly.
-   */
-  public function testSideMenuTranslation(): void {
-    // Create child paragraph with "French" translation.
-    $child = Paragraph::create([
-      'type' => 'oe_rich_text',
-      'field_oe_title' => 'English rich text title',
-    ]);
-    $child->save();
-
-    $child->addTranslation('fr', [
-      'type' => 'oe_rich_text',
-      'field_oe_title' => 'French rich text title',
-    ])->save();
-
-    // Create the main content row paragraph with "French" translation.
-    $paragraph = Paragraph::create([
-      'type' => 'oe_content_row',
-      'field_oe_title' => 'English page navigation',
-      'oe_paragraphs_variant' => 'inpage_navigation',
-      'field_oe_paragraphs' => [$child],
-    ]);
-    $paragraph->save();
-
-    $paragraph->addTranslation('fr', [
-      'type' => 'oe_content_row',
-      'field_oe_title' => 'French page navigation',
-      'oe_paragraphs_variant' => 'inpage_navigation',
-      'field_oe_paragraphs' => [$child],
-    ])->save();
-
-    $html = $this->renderParagraph($paragraph, 'en');
-    $crawler = new Crawler($html);
-
-    // Assert that side-menu "English" translation is correctly rendered.
-    $left_column = $crawler->filter('.ecl-row .ecl-col-l-3.ecl-u-z-navigation');
-    $this->assertStringContainsString('English page navigation', $left_column->html());
-    $this->assertStringContainsString('English rich text title', $left_column->html());
 
-    $html = $this->renderParagraph($paragraph, 'fr');
-    $crawler = new Crawler($html);
-
-    // Assert that side-menu "French" translation is correctly rendered.
-    $left_column = $crawler->filter('.ecl-row .ecl-col-l-3.ecl-u-z-navigation');
-    $this->assertStringContainsString('French page navigation', $left_column->html());
-    $this->assertStringContainsString('French rich text title', $left_column->html());
+    // The actual inpage navigation links are tested in the
+    // InPageNavigationParagraphTest since they are rendered via JS.
   }
 
   /**