hotline MT #121342 highlight carousels

VERSIONS_HOTLINE/121342

+ - ticket #121342 : Magasin de thèmes : amélioration des boites affichant des listes. Une nouvelle option "carrousel avec mise en avant" est disponible dans les choix de disposition de la liste dans le thème Chili.
\ No newline at end of file

library/Class/Template/ProfilePatcher.php

@@ -38,6 +38,7 @@ class Class_Template_ProfilePatcher {
   public function setProfile($profile) {
     $this->_profile = $profile;
     $this->_template = (new Class_Template_Loader)->findFromProfile($profile->getId());
+    Class_Profil::setCurrentProfil($profile);
     return $this;
   }
 

library/templates/Chili/Assets/css/chili.css

@@ -206,6 +206,59 @@ header .widget.login .dropdown-menu.dropdown-menu-right.show {
     background-color: var(--chili-white-bg);
 }
 
+.boite [class*="highlight_carousel"] .card-img-overlay {
+    display: table;
+    height: 100%;
+    width: 100%;
+}
+
+.boite [class*="highlight_carousel"] .card-img-overlay > .card {
+    display: table-cell;
+    vertical-align: bottom;
+}
+
+.boite [class*="highlight_carousel"] [class*="highlight_column"] {
+    overflow: hidden;
+}
+
+.boite [class*="highlight_carousel"] [class*="highlight_column"] > .card,
+.boite [class*="highlight_carousel"] [class*="highlight_column"] > .card > a,
+.boite [class*="highlight_carousel"] [class*="highlight_column"] > .card > a *{
+    height: 100%;
+    width: auto;
+    max-width: none;
+}
+
+.boite [class*="highlight_carousel"] [class*="highlight_column"] > .card > a {
+    min-height: 250px;
+}
+
+.boite [class*="highlight_carousel"] .card {
+    padding: 5px;
+}
+
+.boite [class*="highlight_carousel"] [class*="highlight_column"] > .card {
+    padding: 0;
+}
+
+.boite [class*="highlight_carousel"] .card-img-overlay .card {
+    background-color: var(--front-transparent-background);
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.boite [class*="highlight_carousel"] .card-img-overlay .card a,
+.boite [class*="highlight_carousel"] .card-img-overlay .card p,
+.boite [class*="highlight_carousel"] .card-img-overlay .card span {
+    color: var(--chili-white-t) !important;
+}
+
+.boite [class*="highlight_carousel"] .card-img-overlay .card a.badge,
+.boite [class*="highlight_carousel"] .card-img-overlay .card a.badge span {
+    background-color: var(--chili-white-bg);
+    color: var(--chili-black-t) !important;
+}
+
 .recherche_simple .list-group .img-thumbnail img,
 .widget-body.card-body .carousel.slide.multiple_carousel img {
     max-width: none;
@@ -759,10 +812,6 @@ a[class*="text-"]:focus {
     color: var(--chili-lblack-t) !important;
 }
 
-.zoom_carousel .card_grid .card_description {
-    display: none;
-}
-
 .chili_widget .card-subtitle {
     display: none;
 }
@@ -811,4 +860,4 @@ main .chili_widget {
 
 .bg-warning {
     background-color: var(--chili-white-bg) !important;
-}
\ No newline at end of file
+}

library/templates/Chili/Library/ProfilePatcher.php

@@ -296,7 +296,7 @@ class Chili_Library_ProfilePatcher extends Intonation_Library_ProfilePatcher {
                    ['titre' => $this->_('Evènements à la une !'),
                     'boite' => ['no_border', 'no_border_radius', 'no_shadow', 'chili_widget', 'fond_gris', 'my-3', 'py-3', 'm-auto', 'limit_badges_5'],
                     'rendering' => 'card',
-                    'layout' => 'zoom_carousel',
+                    'layout' => Chili_Library_Widget_Carousel_Definition::TOP_HIGHLIGHT_CAROUSEL,
                     'size' => 15,
                     'order' => 'DebutPublicationDesc',
                     'enabled_filters' => '',
@@ -329,7 +329,7 @@ class Chili_Library_ProfilePatcher extends Intonation_Library_ProfilePatcher {
                     'boite' => ['no_border', 'no_border_radius', 'no_shadow', 'chili_widget', 'fond_gris', 'my-3', 'py-3', 'm-auto', 'limit_badges_5'],
                     'abon_ou_bib' => 'all',
                     'rendering' => 'card',
-                    'layout' => 'zoom_carousel',
+                    'layout' => Chili_Library_Widget_Carousel_Definition::LEFT_HIGHLIGHT_CAROUSEL,
                     'size' => 15,
                     'order' => 'random',
                     'link_to_all' => 0,
@@ -345,7 +345,7 @@ class Chili_Library_ProfilePatcher extends Intonation_Library_ProfilePatcher {
                    ['titre' => $this->_('Nouveautés 2020'),
                     'boite' => ['no_border', 'no_border_radius', 'no_shadow', 'chili_widget', 'fond_blanc', 'my-3', 'py-3', 'm-auto', 'limit_badges_5'],
                     'rendering' => 'card',
-                    'layout' => 'zoom_carousel',
+                    'layout' => Chili_Library_Widget_Carousel_Definition::LEFT_HIGHLIGHT_CAROUSEL,
                     'size' => 15,
                     'order' => 'RAND()',
                     'link_to_all' => 0,

library/templates/Chili/Library/Settings.php

@@ -86,6 +86,12 @@ class Chili_Library_Settings extends Intonation_Library_Settings {
     $hydrating_mapping['a class record_facets'] = 'order-5';
     $hydrating_mapping['span class record_facets'] = 'order-6';
     $hydrating_mapping['a class record_serie'] = 'order-7';
+    $hydrating_mapping['div class left_highlight_column'] = 'col-12 col-md-4 col-lg-5 rounded';
+    $hydrating_mapping['div class left_carousel_columns'] = 'col-12 col-md-8 col-lg-7';
+    $hydrating_mapping['div class top_highlight_column'] = 'col-12 rounded';
+    $hydrating_mapping['div class top_carousel_columns'] = 'col-12';
+    $hydrating_mapping['div class card_with_overlay'] = 'card';
+    $hydrating_mapping['div class card_overlay'] = 'card-block card-img-overlay rounded text-white';
 
     $settings[$this->_template->withNameSpace('hydrating_mapping')] = $hydrating_mapping;
     return $settings;

library/templates/Chili/Library/Widget/Carousel/Definition.php

@@ -21,5 +21,7 @@
 
 
 class Chili_Library_Widget_Carousel_Definition {
-  const ZOOM_CAROUSEL = 'zoom_carousel';
+  const
+    TOP_HIGHLIGHT_CAROUSEL = 'top_highlight_carousel',
+    LEFT_HIGHLIGHT_CAROUSEL = 'left_highlight_carousel';
 }

library/templates/Chili/Template.php

@@ -77,12 +77,16 @@ class Chili_Template extends Intonation_Template {
 
 
   public function getCarouselRenderer($layout) {
-    if (Chili_Library_Widget_Carousel_Definition::ZOOM_CAROUSEL == $layout)
-      return 'Chili_View_RenderZoomCarousel';
+    if (Chili_Library_Widget_Carousel_Definition::TOP_HIGHLIGHT_CAROUSEL == $layout)
+      return 'Chili_View_RenderTopHighlightCarousel';
+
+    if (Chili_Library_Widget_Carousel_Definition::LEFT_HIGHLIGHT_CAROUSEL == $layout)
+      return 'Chili_View_RenderLeftHighlightCarousel';
   }
 
 
   public function getCarouselLayouts() {
-    return [Chili_Library_Widget_Carousel_Definition::ZOOM_CAROUSEL => $this->_('Carousel avec mise en avant')];
+    return [Chili_Library_Widget_Carousel_Definition::TOP_HIGHLIGHT_CAROUSEL => $this->_('Carousel avec mise en avant au dessus'),
+            Chili_Library_Widget_Carousel_Definition::LEFT_HIGHLIGHT_CAROUSEL => $this->_('Carousel avec mise en avant à gauche')];
   }
 }
\ No newline at end of file

library/templates/Chili/View/RenderZoomCarousel.php → library/templates/Chili/View/AbstractHighlightCarousel.php

@@ -20,19 +20,13 @@
  */
 
 
-class Chili_View_RenderZoomCarousel extends Intonation_View_RenderMultipleCarousel {
+class Chili_View_AbstractHighlightCarousel extends Intonation_View_RenderMultipleCarousel {
 
-  protected $_columns = 5;
-
-
-  public function renderZoomCarousel($elements, $content_callback) {
-    return $this->renderCarousel($elements, $content_callback);
-  }
-
-
-  public function renderCarousel($elements, $content_callback) {
-    return $this->_renderCarousel($elements, $content_callback);
-  }
+  protected
+    $_columns,
+    $_highlight_class,
+    $_highlight_column_class,
+    $_columns_class;
 
 
   protected function _carouselInner($collection, $id, $callback) {
@@ -41,7 +35,7 @@ class Chili_View_RenderZoomCarousel extends Intonation_View_RenderMultipleCarous
       $count = count($html);
       $html [] = ($count % $this->_columns != 0)
       ? $callback($element)
-      : $this->view->zoomCardify($element);
+      : $this->view->highlightCardify($element);
       return $html;
     }));
 
@@ -62,15 +56,15 @@ class Chili_View_RenderZoomCarousel extends Intonation_View_RenderMultipleCarous
                            $i * $this->_columns,
                            $this->_columns);
 
-      $zoom = array_shift($items);
+      $highlight = array_shift($items);
 
       $collection_html = $this->_tag('div',
                                      implode($items),
                                      ['class' => $this->_getWrapperClass($items, $this->_columns - 1)]);
 
-      $rows [$i] = $this->view->grid(implode([$this->view->div(['class' => 'col-12'],
-                                                        $zoom),
-                                       $this->view->div(['class' => 'col-12 px-4 py-3'],
+      $rows [$i] = $this->view->grid(implode([$this->view->div(['class' => $this->_highlight_column_class],
+                                                        $highlight),
+                                       $this->view->div(['class' => $this->_columns_class],
                                                         $collection_html)]));
     }
 
@@ -89,6 +83,6 @@ class Chili_View_RenderZoomCarousel extends Intonation_View_RenderMultipleCarous
 
 
   protected function _carouselClasses() {
-    return 'carousel slide zoom_carousel';
+    return 'carousel slide ' . $this->_highlight_class;
   }
 }

library/templates/Chili/View/ZoomCardify.php → library/templates/Chili/View/HighlightCardify.php

@@ -20,14 +20,14 @@
  */
 
 
-class Chili_View_ZoomCardify extends Intonation_View_CardifyHorizontal {
-  protected
-    $_img_class = 'zoom_cardify_img',
-    $_content_class = 'zoom_cardify_content',
-    $_actions_class = 'zoom_cardify_actions';
+class Chili_View_HighlightCardify extends Intonation_View_CardifyWithOverlay {
+
+  public function highlightCardify($element) {
+    return parent::cardifyWithOverlay($element);
+  }
 
 
-  public function zoomCardify($element) {
-    return parent::cardifyHorizontal($element);
+  protected function _overlay($element) {
+    return $this->view->cardifyOnlyDescription($element);
   }
 }
\ No newline at end of file

library/templates/Chili/View/RenderLeftHighlightCarousel.php

+<?php
+/**
+ * Copyright (c) 2012-2020, Agence Française Informatique (AFI). All rights reserved.
+ *
+ * BOKEH is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
+ * the Free Software Foundation.
+ *
+ * There are special exceptions to the terms and conditions of the AGPL as it
+ * is applied to this software (see README file).
+ *
+ * BOKEH is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * along with BOKEH; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301  USA
+ */
+
+
+class Chili_View_RenderLeftHighlightCarousel extends Chili_View_AbstractHighlightCarousel {
+
+  protected
+    $_columns = 4,
+    $_highlight_class = 'left_highlight_carousel',
+    $_highlight_column_class = 'left_highlight_column',
+    $_columns_class = 'left_carousel_columns';
+
+
+  public function renderLeftHighlightCarousel($elements, $content_callback) {
+    return $this->_renderCarousel($elements, $content_callback);
+  }
+}

library/templates/Chili/View/RenderTopHighlightCarousel.php

+<?php
+/**
+ * Copyright (c) 2012-2020, Agence Française Informatique (AFI). All rights reserved.
+ *
+ * BOKEH is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE as published by
+ * the Free Software Foundation.
+ *
+ * There are special exceptions to the terms and conditions of the AGPL as it
+ * is applied to this software (see README file).
+ *
+ * BOKEH is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * along with BOKEH; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301  USA
+ */
+
+
+class Chili_View_RenderTopHighlightCarousel extends Chili_View_AbstractHighlightCarousel {
+
+  protected
+    $_columns = 6,
+    $_highlight_class = 'top_highlight_carousel',
+    $_highlight_column_class = 'top_highlight_column',
+    $_columns_class = 'top_carousel_columns';
+
+
+  public function renderTopHighlightCarousel($elements, $content_callback) {
+    return $this->_renderCarousel($elements, $content_callback);
+  }
+}
\ No newline at end of file

library/templates/Intonation/Assets/css/intonation.css

@@ -74,9 +74,9 @@ div:hover > .img_as_background {
     font-size: 4em;
 }
 
-.card-img-overlay a,
-.card-img-overlay a:hover,
-.card-img-overlay a:visited {
+.card-img-overlay a:not(.badge),
+.card-img-overlay a:hover:not(.badge),
+.card-img-overlay a:visited:not(.badge) {
     color: var(--front-overlay-text);
     display: block;
     height: 100%;

library/templates/Intonation/Library/Settings.php

@@ -236,12 +236,11 @@ class Intonation_Library_Settings extends Intonation_System_Abstract {
                                                   'div class cardify_horizontal_content' => 'col col-sm-6 py-3',
                                                   'div class cardify_horizontal_actions' => 'col-12 col-sm-3 p-3',
 
-                                                  'div class zoom_cardify_img' => 'col-6 p-3 order-1',
-                                                  'div class zoom_cardify_content' => 'col-6 col-sm-3 p-3 order-2',
-                                                  'div class zoom_cardify_actions' => 'col-12 col-sm-3 p-3 order-3',
                                                   'div class loading_icon' => 'spinner-border',
                                                   'div class review_author' => 'col-12 col-lg-6 text-md-left',
                                                   'div class review_date' => 'col-12 col-lg-6 text-md-right',
+                                                  'div class card_with_overlay' => 'card text-center',
+                                                  'div class card_overlay' => 'card-block card-img-overlay rounded text-center text-white',
                           ],
 
                           'icons_map_doc_types' => [],

library/templates/Intonation/View/CardifyWithOverlay.php

@@ -21,16 +21,31 @@
 
 
 class Intonation_View_CardifyWithOverlay extends ZendAfi_View_Helper_BaseHelper {
+
+
   public function cardifyWithOverlay($element) {
     return $this->_tag('div',
                        $element->getAnchor()
                        . $this->_cardWithPicture($element),
-                       ['class' => 'card text-center']);
+                       ['class' => 'card_with_overlay']);
   }
 
 
   protected function _cardWithPicture($element) {
-    if (!$main_link = $element->getMainLink())
+    if ( ! $overlay = $this->_overlay($element))
+      return '';
+
+    $img = $this->view->tagMedia($element,
+                                 ['class' => 'text-center img_as_background'],
+                                 ['class' => 'card-img']);
+
+    return $img
+      . $this->view->div(['class' => 'card_overlay'], $overlay);
+  }
+
+
+  protected function _overlay($element) {
+    if ( ! $main_link = $element->getMainLink())
       return '';
 
     $title = $element->getMainTitle();
@@ -55,15 +70,7 @@ class Intonation_View_CardifyWithOverlay extends ZendAfi_View_Helper_BaseHelper
       ->setInlineText(1)
       ->setImage('');
 
-    $link = $this->view->tagAction($main_link);
-
-    $overlay = $this->view->div(['class' => 'card-block card-img-overlay rounded text-center text-white'],
-                                $element->getContentForJSSearch() . $link);
-
-    $img = $this->view->tagMedia($element,
-                                 ['class' => 'text-center img_as_background'],
-                                 ['class' => 'card-img']);
-
-    return $img . $overlay;
+    return $element->getContentForJSSearch()
+      . $this->view->tagAction($main_link);
   }
 }
\ No newline at end of file

tests/scenarios/Templates/ChiliTest.php

@@ -135,8 +135,8 @@ class ChiliTemplateProfilePatcherTest extends ChiliTemplateTestCase {
 
 
   /** @test */
-  public function zoomCarouselShouldBePresent() {
-    $this->assertXPath('//div[contains(@class, "zoom_carousel")]');
+  public function topHighlightCarouselShouldBePresent() {
+    $this->assertXPath('//div[contains(@class, "top_highlight_carousel")]');
   }
 }
 
@@ -571,4 +571,23 @@ class ChiliTemplateNotLoggedTest extends ChiliTemplateTestCase {
     $this->assertXPath('//form/input[@id="login"][@class= "zendafi_form_login_login btn btn-sm btn-primary order-3 my-3"]',
                        $this->_response->getBody());
   }
+}
+
+
+
+
+class ChiliEditWidgetLibraryTest extends ChiliTemplateTestCase {
+ protected $_storm_default_to_volatile = true;
+
+
+ public function setUp() {
+   parent::setUp();
+   $this->dispatch('admin/widget/edit-widget/id/8/id_profil/1');
+ }
+
+
+ /** @test */
+ public function layoutSelectorShouldContainsLeftHighlightCarousel() {
+   $this->assertXPath('//form//select[@name="layout"]/option[@value="left_highlight_carousel"]');
+ }
 }
\ No newline at end of file

tests/scenarios/Templates/TemplatesLibraryTest.php

@@ -128,7 +128,7 @@ class TemplatesLibraryWidgetWithCarouselFiveColumnsTest extends TemplatesLibrary
 
   /** @test */
   public function cardGridShouldContainsFiveCards() {
-    $this->assertXPathCount('//div[contains(@class, "carousel-item active")]//div[contains(@class, "card text-center")]', 5);
+    $this->assertXPathCount('//div[contains(@class, "carousel-item active")]//div[contains(@class, "card_with_overlay card text-center")]//div[@class="card_overlay card-block card-img-overlay rounded text-center text-white"]', 5);
   }
 }
 

tests/scenarios/Templates/TemplatesWidgetTest.php

@@ -1139,3 +1139,127 @@ class TemplatesDispatchAdminWidgetActionRechercheViewNoticePostTest extends Temp
     $this->assertEquals('959-3;933-4', $this->_prefs['thumbnail_fields']);
   }
 }
+
+
+
+abstract class AbstractTemplatesWidgetWithHighlightLayoutTest extends AbstractControllerTestCase {
+  protected
+    $_storm_default_to_volatile = true,
+    $_libraries = [36 => 'Annecy',
+                   37 => 'Cran-Gevrier',
+                   38 => 'Echallens',
+                   39 => 'Esertines sur Yverdon',
+                   40 => 'Montmin',
+                   41 => 'Seynod',
+                   42 => 'Talloires',
+                   43 => 'Valleiry'];
+
+  public function setUp() {
+    parent::setUp();
+    Class_AdminVar::set('TEMPLATING', 1);
+
+    $profile = $this->fixture('Class_Profil',
+                              ['id' => 53,
+                               'titre' => 'Profil de test',
+                               'template' => 'CHILI'
+                              ]);
+
+    foreach($this->_libraries as $id => $libelle) {
+      $this->fixture('Class_Bib', ['id' => $id, 'libelle' => $libelle,]);
+    }
+
+    $profile_patcher = (new Class_Template_ProfilePatcher(null))
+      ->setProfile($profile)
+      ->addWidget(Intonation_Library_Widget_Carousel_Library_Definition::CODE,
+                  Class_Profil::DIV_MAIN,
+                  $this->_widgetSettings());
+
+    $this->dispatch('/opac/index/index/id_profil/53');
+  }
+}
+
+
+
+
+class TemplatesWidgetWithLeftHighlightLayoutTest extends AbstractTemplatesWidgetWithHighlightLayoutTest {
+
+  protected function _widgetSettings() {
+    return ['rendering' => 'card',
+            'libraries' => implode(';', array_keys($this->_libraries)),
+            'order' => Class_Systeme_ModulesAccueil_Library::ORDER_ALPHA,
+            'layout' => 'left_highlight_carousel'];
+  }
+
+
+  /** @test */
+  public function libraryAnnecyShouldBeHighlighted() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide left_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[@class="left_highlight_column col-12 col-md-4 col-lg-5 rounded"]//div[contains(@class, "card-img-overlay")]//div[contains(@class, "card-title")]', 'Annecy');
+  }
+
+
+  /** @test */
+  public function libraryEsertinesSurYverdonShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide left_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[contains(@class, "card-title")]', 'Esertines sur Yverdon');
+  }
+
+
+  /** @test */
+  public function libraryCranGevrierShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide left_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[contains(@class, "card-title")]', 'Cran-Gevrier');
+  }
+
+
+  /** @test */
+  public function libraryEchallensShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide left_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[@class="left_carousel_columns col-12 col-md-8 col-lg-7"]//div[contains(@class, "card-title")]', 'Echallens');
+  }
+
+
+  /** @test */
+  public function libraryMontminShouldBeHighlightedInCarouselSecondPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide left_highlight_carousel")]//div[contains(@class, "carousel-item")][2]//div[contains(@class, "card-img-overlay")]//div[contains(@class, "card-title")]', 'Montmin');
+  }
+}
+
+
+
+
+class TemplatesWidgetWithTopHighlightLayoutTest extends AbstractTemplatesWidgetWithHighlightLayoutTest {
+
+  protected function _widgetSettings() {
+    return ['rendering' => 'card',
+            'order' => Class_Systeme_ModulesAccueil_Library::ORDER_ALPHA,
+            'libraries' => implode(';', array_keys($this->_libraries)),
+            'layout' => 'top_highlight_carousel'];
+  }
+
+
+  /** @test */
+  public function libraryAnnecyShouldBeHighlighted() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide top_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[@class="top_highlight_column col-12 rounded"]/div[@class="card_with_overlay card"]//div[@class="card_overlay card-block card-img-overlay rounded text-white"]//div[contains(@class, "card-title")]', 'Annecy');
+  }
+
+
+  /** @test */
+  public function libraryEsertinesSurYverdonShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide top_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[@class="top_carousel_columns col-12"]//div[contains(@class, "card-title")]', 'Esertines sur Yverdon');
+  }
+
+
+  /** @test */
+  public function libraryCranGevrierShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide top_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[contains(@class, "card-title")]', 'Cran-Gevrier');
+  }
+
+
+  /** @test */
+  public function libraryEchallensShouldBeInCarouselFirstPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide top_highlight_carousel")]//div[contains(@class, "carousel-item")][1]//div[contains(@class, "card-title")]', 'Echallens');
+  }
+
+
+  /** @test */
+  public function libraryTalloiresShouldBeHighlightedInCarouselSecondPage() {
+    $this->assertXPathContentContains('//div[contains(@class, "boite library")]//div[contains(@class, "carousel slide top_highlight_carousel")]//div[contains(@class, "carousel-item")][2]//div[contains(@class, "card-img-overlay")]//div[contains(@class, "card-title")]', 'Talloires');
+  }
+}
\ No newline at end of file