EWPP-1149: Test Fact and Figures in eu and ec component libraries.

openeuropa · Jul 20, 2021 · 419049f · 419049f
1 parent 57cc531
commit 419049f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 39 deletions.
diff --git a/oe_theme.theme b/oe_theme.theme
@@ -219,15 +219,16 @@ 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'] = [];
 
   /** @var \Drupal\entity_reference_revisions\Plugin\Field\FieldType\EntityReferenceRevisionsItem $field_item */
   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
@@ -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('<use xlink:href="/themes/custom/oe_theme/dist/eu/images/icons/sprites/icons.svg#infographic"></use>', $crawler->filter('div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
-    $this->assertEquals('<use xlink:href="/themes/custom/oe_theme/dist/eu/images/icons/sprites/icons.svg#spreadsheet"></use>', $crawler->filter('div.ecl-fact-figures__item:nth-child(2) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
-    $this->assertEquals('<use xlink:href="/themes/custom/oe_theme/dist/eu/images/icons/sprites/icons.svg#digital"></use>', $crawler->filter('div.ecl-fact-figures__item:nth-child(3) svg.ecl-icon.ecl-icon--l.ecl-fact-figures__icon')->html());
-    $this->assertEquals('<use xlink:href="/themes/custom/oe_theme/dist/eu/images/icons/sprites/icons.svg#corner-arrow"></use>', $crawler->filter('div.ecl-fact-figures__view-all svg.ecl-icon.ecl-icon--m.ecl-icon--rotate-90.ecl-link__icon')->html());
+    $this->assertEquals("<use xlink:href=\"/themes/custom/oe_theme/dist/$component_library/images/icons/sprites/icons.svg#infographic\"></use>", $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("<use xlink:href=\"/themes/custom/oe_theme/dist/$component_library/images/icons/sprites/icons.svg#spreadsheet\"></use>", $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("<use xlink:href=\"/themes/custom/oe_theme/dist/$component_library/images/icons/sprites/icons.svg#digital\"></use>", $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("<use xlink:href=\"/themes/custom/oe_theme/dist/$component_library/images/icons/sprites/icons.svg#corner-arrow\"></use>", $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
@@ -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': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#instagram"></use>'
+      'div.ecl-fact-figures__item:nth-child(1) svg.ecl-icon.ecl-icon--m.ecl-fact-figures__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#infographic"></use>'
       '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.'