ACP2E-3275: [Cloud] - CMS Slider not reflecting the latest changes

Author: pradeep1819

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/provider.js

@@ -5,8 +5,9 @@
 
 define([
     'Magento_Ui/js/form/provider',
-    'Magento_PageBuilder/js/events'
-], function (Provider, events) {
+    'Magento_PageBuilder/js/events',
+    'jquery'
+], function (Provider, events, $) {
     'use strict';
 
     return Provider.extend({
@@ -18,8 +19,42 @@ define([
         /** @inheritdoc **/
         save: function () {
             events.trigger('form:' + this.id + ':saveAfter', this.get('data'));
+            this._refreshSlickOnSave();
 
             return this;
+        },
+
+        /**
+         * Refresh slick slide of parent window
+         *
+         * @private
+         */
+        _refreshSlickOnSave: function () {
+            let slickObj = $('.slick-list.draggable'),
+                parentSlick,
+                currentSettings;
+
+            if (slickObj.length === 0) {
+                return;
+            }
+
+            parentSlick = slickObj.parent();
+
+            if (typeof parentSlick.slick !== 'function') {
+                return;
+            }
+
+            currentSettings = parentSlick.slick('getSlick').options;
+
+            if (!currentSettings.infinite) {
+                return;
+            }
+
+            if (currentSettings.rows > 0) {
+                parentSlick.slick('slickSetOption', 'rows', 0);
+            }
+
+            parentSlick.slick('refresh');
         }
     });
 });

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/adminhtml/web/js/form/provider.test.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+
+define([
+    'Magento_PageBuilder/js/form/provider',
+    'Magento_PageBuilder/js/events',
+    'jquery'
+], function (Provider, events, $) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/form/provider', function () {
+        let instance;
+
+        beforeEach(function () {
+            instance = new Provider();
+            spyOn(instance, 'get').and.returnValue({key: 'value'});
+            spyOn(events, 'trigger');
+        });
+
+        it('should initialize the client properly', function () {
+            let result = instance.initClient();
+            expect(result).toBe(instance);
+        });
+
+        it('should trigger the saveAfter event with correct data', function () {
+            instance.id = 'testId';
+            instance.save();
+
+            expect(events.trigger).toHaveBeenCalledWith('form:testId:saveAfter', {key: 'value'});
+        });
+
+        it('should trigger form saveAfter event and refresh slick if infinite is true', function () {
+            const data = { key: 'value' };
+            instance.set('data', data);
+
+            let slickMock = {
+                options: { infinite: true, rows: 1},
+                getSlick: function () {
+                    return { options: this.options };
+                }
+            };
+
+            let slickListMock = {
+                length: 1,
+                parent: jasmine.createSpy('parent').and.returnValue({
+                    slick: jasmine.createSpy('slick').and.returnValue(slickMock)
+                })
+            };
+
+            spyOn($.fn, 'find').and.returnValue(slickListMock);
+
+            const result = instance.save();
+
+            expect(events.trigger).toHaveBeenCalledWith('form:' + instance.id + ':saveAfter', data);
+            expect($.fn.find).toHaveBeenCalledWith('.slick-list.draggable');
+            expect($.fn.find().parent).toHaveBeenCalled();
+            expect($.fn.find().parent().slick).toHaveBeenCalledWith('refresh');
+            expect(result).toBe(instance);
+        });
+
+        it('should not refresh slick if infinite is false', function () {
+            const data = { key: 'value' };
+            instance.set('data', data);
+
+            let slickMockFalse = {
+                options: { infinite: false },
+                getSlick: function () {
+                    return { options: this.options };
+                }
+            };
+
+            spyOn($.fn, 'find').and.returnValue(slickMockFalse);
+            $.fn.find.and.returnValue({
+                length: 1,
+                parent: jasmine.createSpy('parent').and.returnValue({
+                    slick: jasmine.createSpy('slick').and.returnValue(slickMockFalse)
+                })
+            });
+
+            const result = instance.save();
+
+            expect(events.trigger).toHaveBeenCalledWith('form:' + instance.id + ':saveAfter', data);
+            expect($('.slick-list.draggable').parent().slick.calls.count()).toBe(1);
+            expect($.fn.find).toHaveBeenCalledWith('.slick-list.draggable');
+            expect($.fn.find().parent).toHaveBeenCalled();
+            expect($.fn.find().parent().slick).toHaveBeenCalled();
+            expect($.fn.find().parent().slick).not.toHaveBeenCalledWith('refresh');
+            expect(result).toBe(instance);
+        });
+    });
+});