From b764ece726b807631041287651a85c7aa828073b Mon Sep 17 00:00:00 2001 From: upchuk Date: Mon, 14 Feb 2022 17:35:38 +0100 Subject: [PATCH] EWPP-1157: IN page nav library on content row paragraph. --- docker-compose.yml | 4 +- .../InPageNavigationParagraphTest.php | 101 ++++++++++++++++++ oe_theme.theme | 42 +++----- ...t-row--variant-inpage_navigation.html.twig | 6 +- .../src/Kernel/Paragraphs/ContentRowTest.php | 64 +---------- 5 files changed, 119 insertions(+), 98 deletions(-) create mode 100644 modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php diff --git a/docker-compose.yml b/docker-compose.yml index fe9840fbe..a9fbfda11 100644 --- a/docker-compose.yml +++ b/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: diff --git a/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php new file mode 100644 index 000000000..77477f56f --- /dev/null +++ b/modules/oe_theme_helper/tests/src/FunctionalJavascript/InPageNavigationParagraphTest.php @@ -0,0 +1,101 @@ +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.

Here is a heading

', + '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()); + + } + +} diff --git a/oe_theme.theme b/oe_theme.theme index 7969982d8..90ade5f0e 100644 --- a/oe_theme.theme +++ b/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', + ], + ], + ]; } /** diff --git a/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig b/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig index 8218c2e4f..6c96a6028 100644 --- a/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig +++ b/templates/paragraphs/paragraph--oe-content-row--variant-inpage_navigation.html.twig @@ -8,11 +8,7 @@ #}
- {% include '@ecl-twig/inpage-navigation' with { - 'title': title, - 'links': links, - 'icon_path': ecl_icon_path - } %} + {{ inpage }}
{{ content.field_oe_paragraphs }} diff --git a/tests/src/Kernel/Paragraphs/ContentRowTest.php b/tests/src/Kernel/Paragraphs/ContentRowTest.php index 849df1259..6514b0396 100644 --- a/tests/src/Kernel/Paragraphs/ContentRowTest.php +++ b/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. } /**