Load color picker dependencies only when it is actually used

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js

@@ -5,10 +5,8 @@
 define([
     'ko',
     'jquery',
-    '../template/renderer',
-    'spectrum',
-    'tinycolor'
-], function (ko, $, renderer, spectrum, tinycolor) {
+    '../template/renderer'
+], function (ko, $, renderer) {
     'use strict';
 
     /**
@@ -54,9 +52,11 @@ define([
                 return true;
             };
 
-            $(element).spectrum(config);
+            require(['tinycolor', 'spectrum'], function () {
+                $(element).spectrum(config);
 
-            changeColorPickerStateBasedOnViewModel(element, viewModel);
+                changeColorPickerStateBasedOnViewModel(element, viewModel);
+            });
         },
 
         /**
@@ -76,15 +76,17 @@ define([
                 config.value('');
             }
 
-            if (tinycolor(config.value()).isValid() || config.value() === '') {
-                $(element).spectrum('set', config.value());
+            require(['tinycolor', 'spectrum'], function (tinycolor) {
+                if (tinycolor(config.value()).isValid() || config.value() === '') {
+                    $(element).spectrum('set', config.value());
 
-                if (config.value() !== '') {
-                    config.value($(element).spectrum('get').toString());
+                    if (config.value() !== '') {
+                        config.value($(element).spectrum('get').toString());
+                    }
                 }
-            }
 
-            changeColorPickerStateBasedOnViewModel(element, viewModel);
+                changeColorPickerStateBasedOnViewModel(element, viewModel);
+            });
         }
     };
 

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js

@@ -6,25 +6,29 @@
 define([
     'ko',
     'jquery',
+    'tinycolor',
     'Magento_Ui/js/lib/knockout/bindings/color-picker'
 ], function (ko, $) {
     'use strict';
 
-    var $input,
-        originaljQuery,
-        originaljQueryInit,
-        originaljQuerySpectrum;
+    var $input;
+
+    beforeAll(function () {
+        define('spectrum', function () {
+            return jasmine.createSpy();
+        });
+    });
+
+    afterAll(function () {
+        require.undef('spectrum');
+    });
 
     beforeEach(function () {
-        originaljQuery = $;
-        originaljQueryInit = $.fn.init;
-        originaljQuerySpectrum = $.fn.spectrum;
+        jasmine.clock().install();
     });
 
     afterEach(function () {
-        $ = originaljQuery;
-        $.fn.init = originaljQueryInit;
-        $.fn.spectrum = originaljQuerySpectrum;
+        jasmine.clock().uninstall();
     });
 
     describe('Colorpicker binding', function () {
@@ -42,19 +46,15 @@ define([
 
             ko.bindingHandlers.colorPicker.init($input, valueAccessor, null, viewModel);
 
+            jasmine.clock().tick(1000);
+
             expect(value.change).toEqual(jasmine.any(Function));
             expect(value.hide).toEqual(jasmine.any(Function));
             expect(value.show).toEqual(jasmine.any(Function));
             expect(value.change).toBe(value.hide);
 
             expect($.fn.spectrum.calls.allArgs()).toEqual([[value], ['disable']]);
             expect(viewModel.disabled).toHaveBeenCalled();
-
-            $.fn.init = jasmine.createSpy().and.returnValue($.fn);
-
-            ko.bindingHandlers.colorPicker.init($input, valueAccessor, null, viewModel);
-
-            expect($.fn.init).toHaveBeenCalledWith($input, undefined);
         });
 
         it('Should call spectrum on $input with extra configuration if view model enabled', function () {
@@ -71,19 +71,15 @@ define([
 
             ko.bindingHandlers.colorPicker.init($input, valueAccessor, null, viewModel);
 
+            jasmine.clock().tick(1000);
+
             expect(value.change).toEqual(jasmine.any(Function));
             expect(value.hide).toEqual(jasmine.any(Function));
             expect(value.show).toEqual(jasmine.any(Function));
             expect(value.change).toBe(value.hide);
 
             expect($.fn.spectrum.calls.allArgs()).toEqual([[value], ['enable']]);
             expect(viewModel.disabled).toHaveBeenCalled();
-
-            $.fn.init = jasmine.createSpy().and.returnValue($.fn);
-
-            ko.bindingHandlers.colorPicker.init($input, valueAccessor, null, viewModel);
-
-            expect($.fn.init).toHaveBeenCalledWith($input, undefined);
         });
 
         it('Verify config value is empty when reset colorpicker intput', function () {
@@ -100,11 +96,17 @@ define([
             $input = jasmine.createSpy();
 
             ko.bindingHandlers.colorPicker.update($input, valueAccessor, null, viewModel);
+
+            jasmine.clock().tick(1000);
+
             expect($.fn.spectrum).toHaveBeenCalledTimes(1);
             expect(valueAccessor().value).toHaveBeenCalledTimes(4);
 
             value.value = jasmine.createSpy().and.returnValue('');
             ko.bindingHandlers.colorPicker.update($input, valueAccessor, null, viewModel);
+
+            jasmine.clock().tick(1000);
+
             expect($.fn.spectrum).toHaveBeenCalledTimes(3);
             expect(valueAccessor().value).toHaveBeenCalledTimes(5);
         });