Merge pull request #2502 from magento-trigger/team3-delivery

[Team 3] Sprint 7 Delivery

Author: irenelagno

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

@@ -11,6 +11,16 @@ define([
 ], function (ko, $, renderer, spectrum, tinycolor) {
     'use strict';
 
+    /**
+     * Change color picker status to be enabled or disabled
+     *
+     * @param {HTMLElement} element - Element to apply colorpicker enable/disable status to.
+     * @param {Object} viewModel - Object, which represents view model binded to el.
+     */
+    function changeColorPickerStateBasedOnViewModel(element, viewModel) {
+        $(element).spectrum(viewModel.disabled() ? 'disable' : 'enable');
+    }
+
     ko.bindingHandlers.colorPicker = {
         /**
          * Binding init callback.
@@ -31,35 +41,34 @@ define([
                     config.value(value.toString());
                 };
 
-            if (!viewModel.disabled()) {
-                config.change = changeValue;
+            config.change = changeValue;
 
-                config.hide = changeValue;
+            config.hide = changeValue;
 
-                /** show value */
-                config.show = function () {
-                    if (!viewModel.focused()) {
-                        viewModel.focused(true);
-                    }
+            /** show value */
+            config.show = function () {
+                if (!viewModel.focused()) {
+                    viewModel.focused(true);
+                }
 
-                    return true;
-                };
-                $(element).spectrum(config);
-            } else {
-                $(element).spectrum({
-                    disabled: true
-                });
-            }
+                return true;
+            };
+
+            $(element).spectrum(config);
+
+            changeColorPickerStateBasedOnViewModel(element, viewModel);
         },
 
         /**
          * Reads params passed to binding, parses component declarations.
          * Fetches for those found and attaches them to the new context.
          *
-         * @param {HTMLElement} element
-         * @param {Function} valueAccessor
+         * @param {HTMLElement} element - Element to apply bindings to.
+         * @param {Function} valueAccessor - Function that returns value, passed to binding.
+         * @param {Object} allBindings - Object, which represents all bindings applied to element.
+         * @param {Object} viewModel - Object, which represents view model binded to element.
          */
-        update: function (element, valueAccessor) {
+        update: function (element, valueAccessor, allBindings, viewModel) {
             var config = valueAccessor();
 
             if (tinycolor(config.value()).isValid() || config.value() === '') {
@@ -69,6 +78,8 @@ define([
                     config.value($(element).spectrum('get').toString());
                 }
             }
+
+            changeColorPickerStateBasedOnViewModel(element, viewModel);
         }
     };
 

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

@@ -29,7 +29,10 @@ define([
 
     describe('Colorpicker binding', function () {
         it('Should call spectrum on $input with disabled configuration if view model disabled', function () {
-            var valueAccessor = jasmine.createSpy().and.returnValue({}),
+            var value = {
+                    configStuffInHere: true
+                },
+                valueAccessor = jasmine.createSpy().and.returnValue(value),
                 viewModel = {
                     disabled: jasmine.createSpy().and.returnValue(true)
                 };
@@ -39,9 +42,13 @@ define([
 
             ko.bindingHandlers.colorPicker.init($input, valueAccessor, null, viewModel);
 
-            expect($.fn.spectrum).toHaveBeenCalledWith({
-                disabled: true
-            });
+            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);
 
@@ -69,7 +76,8 @@ define([
             expect(value.show).toEqual(jasmine.any(Function));
             expect(value.change).toBe(value.hide);
 
-            expect($.fn.spectrum).toHaveBeenCalledWith(value);
+            expect($.fn.spectrum.calls.allArgs()).toEqual([[value], ['enable']]);
+            expect(viewModel.disabled).toHaveBeenCalled();
 
             $.fn.init = jasmine.createSpy().and.returnValue($.fn);