From 2b7a069dcaf79b9337a8f671c54e102f4da19801 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Wed, 23 Mar 2022 17:55:24 +0200 Subject: [PATCH] EWPP-2044: Adds the News ticker pattern. --- package.json | 1 + .../news_ticker/news_ticker.ui_patterns.yml | 29 +++++++++ .../news_ticker/pattern-news-ticker.html.twig | 20 ++++++ tests/src/Kernel/fixtures/rendering.yml | 64 +++++++++++++++++++ .../PatternAssertions/NewsTickerAssert.php | 63 ++++++++++++++++++ 5 files changed, 177 insertions(+) create mode 100644 templates/patterns/news_ticker/news_ticker.ui_patterns.yml create mode 100644 templates/patterns/news_ticker/pattern-news-ticker.html.twig create mode 100644 tests/src/PatternAssertions/NewsTickerAssert.php diff --git a/package.json b/package.json index 2e37054f9..1557455ef 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "@ecl/twig-component-media-container": "3.2.3", "@ecl/twig-component-menu": "3.2.3", "@ecl/twig-component-message": "3.2.3", + "@ecl/twig-component-news-ticker": "3.2.3", "@ecl/twig-component-page-banner": "3.2.3", "@ecl/twig-component-page-header-core": "3.2.3", "@ecl/twig-component-page-header-standardised": "3.2.3", diff --git a/templates/patterns/news_ticker/news_ticker.ui_patterns.yml b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml new file mode 100644 index 000000000..87767503f --- /dev/null +++ b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml @@ -0,0 +1,29 @@ +news_ticker: + label: "News ticker" + description: "The News ticker pattern allows to display pieces of information." + fields: + identifier: + type: "text" + label: "Id" + description: "Optional unique machine readable name." + preview: "news-ticker-example" + items: + type: "array" + label: "Items" + description: "List of news items containing the information and an optional link." + preview: + - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + link: "http://example.com" + - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + link: "http://example.com" + - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" + link: "http://example.com" + - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum" + link: "http://example.com" + - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium" + link: "http://example.com" + - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores" + counter_label: + type: "text" + label: "Counter label" + description: "The counter label defaults to 'of'. For e.g. '1 of 6'." diff --git a/templates/patterns/news_ticker/pattern-news-ticker.html.twig b/templates/patterns/news_ticker/pattern-news-ticker.html.twig new file mode 100644 index 000000000..dcf95f42f --- /dev/null +++ b/templates/patterns/news_ticker/pattern-news-ticker.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * News ticker pattern. + */ +#} +{% set _items = [] %} +{% for _item in items %} + {% set _items = _items|merge([{ + content: _item.content, + link: _item.link + }]) %} +{% endfor %} + +{% include '@ecl-twig/news-ticker' with { + 'id': identifier|default(''), + 'items': _items, + 'counter_label': counter_label|default('of'), + 'icon_path': ecl_icon_path +} only %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index ce57135cc..e66cbc544 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3243,3 +3243,67 @@ equals: 'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '' 'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '' +- array: + '#type': 'pattern' + '#id': 'news_ticker' + '#fields': + identifier: "news-ticker-example" + items: + - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + link: "http://example.com" + - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" + link: "http://example.com" + - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum" + - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium" + link: "http://example.com" + - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores" + link: "http://example.com" + assertions: + count: + div.ecl-news-ticker: 1 + div.ecl-news-ticker__container: 1 + div.ecl-news-ticker__content: 1 + ul#news-ticker-example-content.ecl-news-ticker__slides: 1 + li.ecl-news-ticker__slide: 6 + a.ecl-link.ecl-news-ticker__slide-text: 4 + div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: 1 + div.ecl-news-ticker__controls: 1 + contains: + li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + li.ecl-news-ticker__slide:nth-child(3) a.ecl-linkecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" + li.ecl-news-ticker__slide:nth-child(4): "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum" + li.ecl-news-ticker__slide:nth-child(5) a.ecl-link.ecl-news-ticker__slide-text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium" + li.ecl-news-ticker__slide:nth-child(6) a.ecl-link.ecl-news-ticker__slide-text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores" + equals: + svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '' + div.ecl-news-ticker__counter: '1 of 6' +- array: + '#type': 'pattern' + '#id': 'news_ticker' + '#fields': + items: + - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + link: "http://example.com" + - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" + link: "http://example.com" + counter_label: "in" + assertions: + count: + div.ecl-news-ticker: 1 + div.ecl-news-ticker__container: 1 + div.ecl-news-ticker__content: 1 + ul.ecl-news-ticker__slides: 1 + li.ecl-news-ticker__slide: 3 + a.ecl-link.ecl-news-ticker__slide-text: 2 + div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: 1 + div.ecl-news-ticker__controls: 1 + contains: + li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" + li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + li.ecl-news-ticker__slide:nth-child(3) a.ecl-link.ecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" + equals: + svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '' + div.ecl-news-ticker__counter: '1 in 3' diff --git a/tests/src/PatternAssertions/NewsTickerAssert.php b/tests/src/PatternAssertions/NewsTickerAssert.php new file mode 100644 index 000000000..f21e7176b --- /dev/null +++ b/tests/src/PatternAssertions/NewsTickerAssert.php @@ -0,0 +1,63 @@ + [ + [$this, 'assertItems'], + ], + ]; + } + + /** + * {@inheritdoc} + */ + protected function assertBaseElements(string $html, string $variant): void { + $crawler = new Crawler($html); + self::assertElementExists('div.ecl-news-ticker', $crawler); + } + + /** + * Asserts the items of the pattern. + * + * @param array $expected_items + * The expected item values. + * @param \Symfony\Component\DomCrawler\Crawler $crawler + * The DomCrawler where to check the element. + */ + protected function assertItems(array $expected_items, Crawler $crawler): void { + // Assert the number of items is correct. + $items = $crawler->filter('div.ecl-news-ticker__container div.ecl-news-ticker__content ul.ecl-news-ticker__slides li.ecl-news-ticker__slide'); + // ECL clones the first and the last element to create the carousel effect + // so there are 2 additional items rendered. + self::assertCount(count($expected_items) + 2, $items, 'The expected news ticker items do not match the found news ticker items.'); + + // Assert the news items have the correct info and link, if given. + foreach ($expected_items as $index => $expected_item) { + $actual_item = $items->eq($index); + if (isset($expected_item['link'])) { + $this->assertElementText($expected_item['content'], 'a.ecl-link.ecl-news-ticker__slide-text', $actual_item); + $link = $actual_item->filter('a.ecl-link.ecl-news-ticker__slide-text'); + self::assertStringContainsString($expected_item['link'], $link->attr('href')); + continue; + } + self::assertStringContainsString($expected_item['content'], $actual_item->text()); + } + } + +}