PB-77: Product Carousel Appearance

omiroshnichenko · omiroshnichenko · commit 52a547b9d318 · 2019-10-22T13:54:11.000-05:00
- fix static tests
- add js unit tests
diff --git a/app/code/Magento/PageBuilder/Block/WidgetInitializer.php b/app/code/Magento/PageBuilder/Block/WidgetInitializer.php
@@ -47,6 +47,7 @@ public function __construct(
 
     /**
      * Returns config for widgets initializer component.
+     *
      * @return string
      * @api
      */
diff --git a/app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php b/app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php
@@ -67,7 +67,8 @@ public function getConfig(): array
      *
      * @return array
      */
-    public function getBreakpoints(): array {
+    public function getBreakpoints(): array
+    {
         return $this->viewConfig->getViewConfig()->getVarValue(
             'Magento_PageBuilder',
             'breakpoints'
diff --git a/app/code/Magento/PageBuilder/composer.json b/app/code/Magento/PageBuilder/composer.json
@@ -17,6 +17,8 @@
         "magento/module-rule": "*",
         "magento/module-directory": "*",
         "magento/module-email": "*",
+        "magento/module-theme": "*",
+        "magento/module-wishlist": "*",
         "magento/module-require-js": "*",
         "php": "~7.1.3||~7.2.0||~7.3.0"
     },
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_carousel.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_carousel.less
@@ -65,4 +65,4 @@
             }
         }
     }
-}
+}
diff --git a/app/code/Magento/PageBuilder/view/frontend/templates/catalog/product/widget/content/carousel.phtml b/app/code/Magento/PageBuilder/view/frontend/templates/catalog/product/widget/content/carousel.phtml
@@ -5,6 +5,8 @@
  */
 use Magento\Framework\App\Action\Action;
 
+// phpcs:disable Magento2.Templates.ThisInTemplate
+
 /** @var \Magento\CatalogWidget\Block\Product\ProductsList $block */
 ?>
 <?php
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/mass-converter/carousel-widget-directive.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/mass-converter/carousel-widget-directive.test.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+/* jscs:disable requireCamelCaseOrUpperCaseIdentifiers */
+define([
+    'jquery',
+    'Magento_PageBuilder/js/content-type/products/mass-converter/carousel-widget-directive'
+], function ($, WidgetDirective) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/products/mass-converter/carousel-widget-directive', function () {
+        var model;
+
+        beforeEach(function () {
+            model = new WidgetDirective();
+        });
+
+        describe('toDom', function () {
+            it('Should return an empty string when conditions_encoded is null', function () {
+                var data = {
+                        products_count: 123,
+                        conditions_encoded: null
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config);
+
+                expect(result.myhtml).toBe(undefined);
+            });
+            it('Should return an empty string when conditions_encoded is false', function () {
+                var data = {
+                        products_count: 123,
+                        conditions_encoded: false
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config);
+
+                expect(result.myhtml).toBe(undefined);
+            });
+            it('Should return an empty string when conditions_encoded is empty string', function () {
+                var data = {
+                        products_count: 123,
+                        conditions_encoded: ''
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config);
+
+                expect(result.myhtml).toBe(undefined);
+            });
+            it('Should return an empty string when conditions_encoded is empty undefined', function () {
+                var data = {
+                        products_count: 123
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config);
+
+                expect(result.myhtml).toBe(undefined);
+            });
+            it('Should transform regular properties', function () {
+                var data = {
+                        carousel_products_count: 123,
+                        conditions_encoded: '[]'
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config);
+
+                expect(result.myhtml).toMatch(/^\{\{widget\s.*\}\}$/);
+                expect(result.myhtml).toContain(' products_count="123"');
+                expect(result.myhtml).toContain(' conditions_encoded="[]"');
+                expect(result.myhtml).toContain(' type="Magento\\CatalogWidget\\Block\\Product\\ProductsList"');
+                expect(result.myhtml)
+                    .toContain(' template="Magento_PageBuilder::catalog/product/widget/content/carousel.phtml"');
+                expect(result.myhtml).toContain(' anchor_text=""');
+                expect(result.myhtml).toContain(' id_path=""');
+                expect(result.myhtml).toContain(' show_pager="0"');
+                expect(result.myhtml).toContain(' type_name="Catalog Products Carousel"');
+            });
+            it('Should encode conditions_encoded', function () {
+                var data = {
+                        carousel_products_count: 123,
+                        conditions_encoded: '{"1":{"type":"My\\\\Type","aggregator":"all"}}'
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    result = model.toDom(data, config),
+                    matchText = '^[`1`:^[`type`:`My||Type`,`aggregator`:`all`^]^]';
+
+                expect(result.myhtml).toContain(' conditions_encoded="' + matchText + '"');
+                expect(result.myhtml).toContain(' type="Magento\\CatalogWidget\\Block\\Product\\ProductsList"');
+                expect(result.myhtml)
+                    .toContain(' template="Magento_PageBuilder::catalog/product/widget/content/carousel.phtml"');
+                expect(result.myhtml).toContain(' anchor_text=""');
+                expect(result.myhtml).toContain(' id_path=""');
+                expect(result.myhtml).toContain(' show_pager="0"');
+                expect(result.myhtml).toContain(' type_name="Catalog Products Carousel"');
+            });
+        });
+        describe('fromDom', function () {
+            it('Should parse regular properties without conditions_encoded', function () {
+                var expected = {
+                        carousel_products_count: '123',
+                        conditions_encoded: ''
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    attributes = {
+                        myhtml: '{{widget products_count="123"}}'
+                    },
+                    result = model.fromDom(attributes, config);
+
+                expect(result.carousel_products_count).toBe(expected.carousel_products_count);
+                expect(result.conditions_encoded).toBe(expected.conditions_encoded);
+                // assert the automatically added properties do not get returned.
+                expect(result.type).toBe(undefined);
+                expect(result.id_path).toBe(undefined);
+            });
+            it('Should parse conditions_encoded', function () {
+                var expected = {
+                        carousel_products_count: '123',
+                        conditions_encoded: '{"1":{"type":"My\\\\Type","aggregator":"all"}}'
+                    },
+                    config = {
+                        html_variable: 'myhtml'
+                    },
+                    attributes = {
+                        myhtml: '{{widget ' +
+                            'products_count="123" ' +
+                            'conditions_encoded="^[`1`:^[`type`:`My||Type`,`aggregator`:`all`^]^]"}}'
+                    },
+                    result = model.fromDom(attributes, config);
+
+                expect(result.carousel_products_count).toBe(expected.carousel_products_count);
+                expect(result.conditions_encoded).toBe(expected.conditions_encoded);
+                // assert the automatically added properties do not get returned.
+                expect(result.type).toBe(undefined);
+                expect(result.id_path).toBe(undefined);
+            });
+        });
+    });
+});
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/content-type/products/appearance/carousel/widget.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/content-type/products/appearance/carousel/widget.test.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'Magento_PageBuilder/js/content-type/products/appearance/carousel/widget',
+    'jquery'
+], function (sliderWidgetInitializer, $) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/products/appearance/carousel/widget', function () {
+        var config = {
+                breakpoints: {
+                    desktop: {
+                        conditions: {
+                            'min-width': '1px'
+                        },
+                        options: {
+                            products: {
+                                slidesToShow: 5
+                            }
+                        }
+                    }
+                }
+            },
+            el;
+
+        beforeEach(function () {
+            var childEl = document.createElement('div');
+
+            el = document.createElement('div');
+            el.setAttribute('data-display', true);
+            el.appendChild(childEl);
+        });
+
+        it('Should call unslick if element has class slick-initialized', function () {
+            spyOn($.fn, 'slick');
+            el.children[0].classList.add('slick-initialized');
+
+            sliderWidgetInitializer(config, el);
+
+            expect($.fn.slick).toHaveBeenCalledWith('unslick');
+        });
+
+        it('Should call slick on element based on its data', function () {
+            spyOn($.fn, 'slick');
+
+            el.setAttribute('data-slide-all', 'true');
+            el.setAttribute('data-autoplay', 'false');
+            el.setAttribute('data-autoplay-speed', 4000);
+            el.setAttribute('data-infinite-loop', 'false');
+            el.setAttribute('data-show-arrows', 'false');
+            el.setAttribute('data-show-dots', 'true');
+            el.setAttribute('data-center-mode', 'false');
+
+            sliderWidgetInitializer(config, el);
+
+            expect($.fn.slick).toHaveBeenCalledWith({
+                slideAll: true,
+                autoplay: false,
+                autoplaySpeed: 4000,
+                infinite: false,
+                arrows: false,
+                dots: true,
+                centerMode: false,
+                slidesToShow: 5,
+                slidesToScroll: 5
+            });
+        });
+    });
+});
diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/widget-initializer.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/widget-initializer.test.js
@@ -56,17 +56,22 @@ define([
             data = {
                 config: {
                     '.unique-element-class-attr': {
-                        awesome: true,
-                        cool: true
+                        awesome: false,
+                        cool: {}
                     }
-                }
+                },
+                breakpoints: {}
             };
 
             widgetInitializer(data);
 
             applyForMock = mocks['mage/apply/main'].applyFor;
-            expect(applyForMock).toHaveBeenCalledWith(jasmine.any(Object), true, 'awesome');
-            expect(applyForMock).toHaveBeenCalledWith(jasmine.any(Object), true, 'cool');
+            expect(applyForMock).toHaveBeenCalledWith(jasmine.any(Object), {
+                breakpoints: {}
+            }, 'awesome');
+            expect(applyForMock).toHaveBeenCalledWith(jasmine.any(Object), {
+                breakpoints: {}
+            }, 'cool');
             // Due to jQuery objects not being === we must use jQuery's is to validate if the elements are the same
             expect(el.is(applyForMock.calls.mostRecent().args[0])).toBeTruthy();
         });
diff --git a/dev/tests/static/testsuite/Magento/Test/Integrity/Xml/ExtendsBaseFormTest.php b/dev/tests/static/testsuite/Magento/Test/Integrity/Xml/ExtendsBaseFormTest.php
@@ -65,6 +65,7 @@ private function getXmlFiles(): array
             'pagebuilder_slide_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_tab_item_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_row_form.xml' => 'pagebuilder_base_form_with_background_attributes',
+            'pagebuilder_products_carousel_form.xml' => 'pagebuilder_products_form',
         ];
         $componentRegistrar = new ComponentRegistrar();
         $modulePath = $componentRegistrar->getPath(ComponentRegistrar::MODULE, 'Magento_PageBuilder');

Original file line number	Diff line number	Diff line change
`@@ -65,4 +65,4 @@`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`	`}`
`68`		`-}`
	`68`	`+}`