renaming and js class pattern

bigcommerce · Jul 30, 2020 · 8e19b69 · 8e19b69
1 parent e330602
commit 8e19b69
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js
@@ -1,6 +1,6 @@
 import 'slick-carousel';
 
-const firstNumInStrRegExp = /[0-9]+/;
+const integerRegExp = /[0-9]+/;
 
 const setSlideTabindexes = ($slides) => {
     $slides.each((index, element) => {
@@ -26,7 +26,7 @@ const arrowAriaLabling = ($arrowLeft, $arrowRight, currentSlide, lastSlide) => {
     const arrowAriaLabelBaseText = $arrowLeft.attr('aria-label');
 
     const isInit = arrowAriaLabelBaseText.includes(['NUMBER']);
-    const valueToReplace = isInit ? '[NUMBER]' : firstNumInStrRegExp;
+    const valueToReplace = isInit ? '[NUMBER]' : integerRegExp;
 
     const leftGoToNumber = currentSlide === 1 ? lastSlide : currentSlide - 1;
     const arrowLeftText = arrowAriaLabelBaseText.replace(valueToReplace, leftGoToNumber);
@@ -54,6 +54,7 @@ export default function () {
     $carouselCollection.on('afterChange', onCarouselChange);
 
     $carouselCollection.each((index, carousel) => {
+        // getting element using find to pass jest test
         const $carousel = $(document).find(carousel);
 
         const isMultipleSlides = $carousel.children().length > 1;

diff --git a/templates/components/carousel.html b/templates/components/carousel.html
@@ -7,11 +7,11 @@
         "autoplaySpeed": {{carousel.swap_frequency}},
         "lazyLoad": "anticipated",
         "slide": ".hero-slide",
-        "prevArrow": ".hero-prev-arrow",
-        "nextArrow": ".hero-next-arrow"
+        "prevArrow": ".js-hero-prev-arrow",
+        "nextArrow": ".js-hero-next-arrow"
     }'>
     {{#if carousel.slides.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="hero-prev-arrow slick-prev slick-arrow">hero-prev-arrow</button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-prev-arrow slick-prev slick-arrow">hero-prev-arrow</button>
     {{/if}}
     {{#each carousel.slides}}
     <a class="hero-slide" href="{{url}}">
@@ -48,6 +48,6 @@
     </a>
     {{/each}}
     {{#if carousel.slides.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="hero-next-arrow slick-next slick-arrow">hero-next-arrow</button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-next-arrow slick-next slick-arrow">hero-next-arrow</button>
     {{/if}}
 </section>
diff --git a/templates/components/products/carousel.html b/templates/components/products/carousel.html
@@ -2,13 +2,12 @@
     data-list-name="{{list}}"
     data-slick='{
         "dots": true,
-        "infinite": true,
         "mobileFirst": true,
         "slidesToShow": 2,
         "slidesToScroll": 1,
         "slide": ".product-slide",
-        "prevArrow": ".product-prev-arrow",
-        "nextArrow": ".product-next-arrow",
+        "prevArrow": ".js-product-prev-arrow",
+        "nextArrow": ".js-product-next-arrow",
         "responsive": [
             {
                 "breakpoint": 800,
@@ -27,14 +26,14 @@
         ]
     }'>
     {{#if products.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="product-prev-arrow slick-prev slick-arrow"></button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-prev-arrow slick-prev slick-arrow"></button>
     {{/if}}
     {{#each products}}
     <div class="productCarousel-slide product-slide">
         {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
     </div>
     {{/each}}
     {{#if products.length '>' 1}}
-    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="product-next-arrow slick-next slick-arrow"></button>
+    <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{products.length}}" class="js-product-next-arrow slick-next slick-arrow"></button>
     {{/if}}
 </section>