diff --git a/oe_theme.theme b/oe_theme.theme
index 139f2696e..c3d3076fb 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -219,6 +219,7 @@ function oe_theme_preprocess_paragraph__oe_links_block(array &$variables): void
*/
function oe_theme_preprocess_paragraph__oe_accordion(array &$variables): void {
// Massage data to be compliant with ECL Accordion2 component data structure.
+ $builder = \Drupal::entityTypeManager()->getViewBuilder('paragraph');
$variables['identifier'] = 'paragraph-' . $variables['paragraph']->id();
$variables['items'] = [];
@@ -226,8 +227,8 @@ function oe_theme_preprocess_paragraph__oe_accordion(array &$variables): void {
foreach ($variables['paragraph']->get('field_oe_paragraphs') as $field_item) {
$paragraph = \Drupal::service('entity.repository')->getTranslationFromContext($field_item->entity);
$variables['items'][] = [
- 'title' => $paragraph->get('field_oe_text')->value,
- 'body' => $paragraph->get('field_oe_text_long')->value,
+ 'title' => $builder->viewField($paragraph->get('field_oe_text')),
+ 'body' => $builder->viewField($paragraph->get('field_oe_text_long')),
];
}
}
diff --git a/tests/Kernel/Paragraphs/ParagraphsTest.php b/tests/Kernel/Paragraphs/ParagraphsTest.php
index b02772ccb..0d4460067 100644
--- a/tests/Kernel/Paragraphs/ParagraphsTest.php
+++ b/tests/Kernel/Paragraphs/ParagraphsTest.php
@@ -567,14 +567,12 @@ public function testContextualNavigation(): void {
* Test 'Facts and figures' paragraph rendering.
*/
public function testFactsFigures(): void {
- // Set the component library to "European Union".
- $this->config('oe_theme.settings')->set('component_library', 'eu')->save();
// Create three Facts to be referenced from the Facts and figures paragraph.
$items = [];
$icons = [
- '1' => 'infographic',
- '2' => 'spreadsheet',
- '3' => 'digital',
+ 1 => 'infographic',
+ 2 => 'spreadsheet',
+ 3 => 'digital',
];
for ($i = 1; $i < 4; $i++) {
$paragraph = Paragraph::create([
@@ -588,30 +586,79 @@ public function testFactsFigures(): void {
$items[$i] = $paragraph;
}
- $paragraph = Paragraph::create([
- 'type' => 'oe_facts_figures',
- 'field_oe_title' => 'Facts and figures',
- 'field_oe_paragraphs' => $items,
- 'field_oe_link' => [
- 'uri' => 'http://www.example.com/',
- 'title' => 'View all metrics',
+ // Assert paragraph in "European Commission" and "European Union" component
+ // libraries.
+ $test_cases = [
+ 'eu' => [
+ 'fact_icon_size' => 'l',
+ 'view_all_icon_size' => 'm',
],
- ]);
- $paragraph->save();
- $html = $this->renderParagraph($paragraph);
+ 'ec' => [
+ 'fact_icon_size' => 'm',
+ 'view_all_icon_size' => 'xs',
+ ],
+ ];
+ foreach ($test_cases as $component_library => $icon_sizes) {
+ // Set the proper component library to test paragraph rendering.
+ $this->config('oe_theme.settings')
+ ->set('component_library', $component_library)
+ ->save();
+ drupal_static_reset('theme_get_setting');
- $crawler = new Crawler($html);
+ $paragraph = Paragraph::create([
+ 'type' => 'oe_facts_figures',
+ 'field_oe_title' => 'Facts and figures',
+ 'field_oe_paragraphs' => $items,
+ 'field_oe_link' => [
+ 'uri' => 'http://www.example.com/',
+ 'title' => 'View all metrics',
+ ],
+ ]);
+ $paragraph->save();
+
+ $html = $this->renderParagraph($paragraph);
+ $crawler = new Crawler($html);
+ $this->assertFactsFigures($crawler, $component_library, $icon_sizes['fact_icon_size'], $icon_sizes['view_all_icon_size']);
+
+ // Assert paragraph with empty Title and Link fields.
+ $paragraph = Paragraph::create([
+ 'type' => 'oe_facts_figures',
+ 'field_oe_paragraphs' => $items,
+ ]);
+ $paragraph->save();
+ $html = $this->renderParagraph($paragraph);
+ $crawler = new Crawler($html);
+ $this->assertCount(0, $crawler->filter('h2.ecl-u-type-heading-2'));
+ $this->assertCount(0, $crawler->filter('div.ecl-fact-figures__view-all a.ecl-link.ecl-link--standalone.ecl-fact-figures__view-all-link'));
+ $this->assertCount(1, $crawler->filter('div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items'));
+ }
+ }
+
+ /**
+ * Assert rendered facts and figures paragraph.
+ *
+ * @param \Symfony\Component\DomCrawler\Crawler $crawler
+ * DOM Crawler instance.
+ * @param string $component_library
+ * Component library.
+ * @param string $fact_icon_size
+ * Size of the icon in facts.
+ * @param string $view_all_icon_size
+ * Size of the icon of view all link.
+ */
+ protected function assertFactsFigures(Crawler $crawler, string $component_library, string $fact_icon_size, string $view_all_icon_size): void {
$this->assertCount(1, $crawler->filter('div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items'));
- $this->assertCount(1, $crawler->filter('div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon'));
- $this->assertCount(1, $crawler->filter('div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon'));
- $this->assertCount(1, $crawler->filter('div.ecl-fact-figures__item:nth-child(3) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon'));
- $this->assertCount(1, $crawler->filter('div.ecl-fact-figures__view-all svg.ecl-icon.ecl-icon--m.ecl-icon--rotate-90.ecl-link__icon'));
+
+ $this->assertCount(1, $crawler->filter("div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon"), $component_library);
+ $this->assertCount(1, $crawler->filter("div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon"));
+ $this->assertCount(1, $crawler->filter("div.ecl-fact-figures__item:nth-child(3) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon"));
+ $this->assertCount(1, $crawler->filter("div.ecl-fact-figures__view-all svg.ecl-icon.ecl-icon--$view_all_icon_size.ecl-icon--rotate-90.ecl-link__icon"));
$this->assertEquals('Facts and figures', trim($crawler->filter('h2.ecl-u-type-heading-2')->text()));
- $this->assertEquals('', $crawler->filter('div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
- $this->assertEquals('', $crawler->filter('div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
- $this->assertEquals('', $crawler->filter('div.ecl-fact-figures__item:nth-child(3) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
- $this->assertEquals('', $crawler->filter('div.ecl-fact-figures__view-all svg.ecl-icon.ecl-icon--m.ecl-icon--rotate-90.ecl-link__icon')->html());
+ $this->assertEquals("", $crawler->filter("div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon")->html());
+ $this->assertEquals("", $crawler->filter("div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon")->html());
+ $this->assertEquals("", $crawler->filter("div.ecl-fact-figures__item:nth-child(3) svg.ecl-icon.ecl-icon--$fact_icon_size.ecl-fact-figures__icon")->html());
+ $this->assertEquals("", $crawler->filter("div.ecl-fact-figures__view-all svg.ecl-icon.ecl-icon--$view_all_icon_size.ecl-icon--rotate-90.ecl-link__icon")->html());
$this->assertEquals('10 millions', trim($crawler->filter('div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__value')->text()));
$this->assertEquals('20 millions', trim($crawler->filter('div.ecl-fact-figures__item:nth-child(2) div.ecl-fact-figures__value')->text()));
$this->assertEquals('30 millions', trim($crawler->filter('div.ecl-fact-figures__item:nth-child(3) div.ecl-fact-figures__value')->text()));
@@ -627,17 +674,6 @@ public function testFactsFigures(): void {
$this->assertEquals('View all metrics', trim($actual));
$actual = $link->attr('href');
$this->assertEquals('http://www.example.com/', trim($actual));
-
- $paragraph = Paragraph::create([
- 'type' => 'oe_facts_figures',
- 'field_oe_paragraphs' => $items,
- ]);
- $paragraph->save();
- $html = $this->renderParagraph($paragraph);
- $crawler = new Crawler($html);
- $this->assertCount(0, $crawler->filter('h2.ecl-u-type-heading-2'));
- $this->assertCount(0, $crawler->filter('div.ecl-fact-figures__view-all a.ecl-link.ecl-link--standalone.ecl-fact-figures__view-all-link'));
- $this->assertCount(1, $crawler->filter('div.ecl-fact-figures.ecl-fact-figures--col-3 div.ecl-fact-figures__items'));
}
/**
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index 454132b3f..f8e856bdd 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -2634,7 +2634,7 @@
'#id': 'facts_figures'
'#fields':
items:
- - icon: 'instagram'
+ - icon: 'infographic'
value: '00.0 million'
title: 'Lorem ipsum'
description: 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'
@@ -2652,7 +2652,7 @@
'div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': 1
'div.ecl-fact-figures__view-all': 1
equals:
- 'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': ''
+ 'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': ''
'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__value': '00.0 million'
'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__title': 'Lorem ipsum'
'div.ecl-fact-figures__item:nth-child(1) div.ecl-fact-figures__description': 'Nunc condimentum sapien ut nibh finibus suscipit vitae at justo. Morbi quis odio faucibus, commodo tortor id, elementum libero.'