diff --git a/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontAddGroupedProductToShoppingCartTest.xml b/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontAddGroupedProductToShoppingCartTest.xml index ca62e7c58dfb7..b62134520e7e4 100644 --- a/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontAddGroupedProductToShoppingCartTest.xml +++ b/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontAddGroupedProductToShoppingCartTest.xml @@ -94,7 +94,7 @@ - + diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js index 83d43d2691b3f..a266e282eac66 100644 --- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js +++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/bootstrap.js @@ -37,7 +37,6 @@ define(function (require) { bindHtml: require('./bind-html'), tooltip: require('./tooltip'), repeat: require('knockoutjs/knockout-repeat'), - fastForEach: require('knockoutjs/knockout-fast-foreach'), - colorPicker: require('./color-picker') + fastForEach: require('knockoutjs/knockout-fast-foreach') }; }); diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js index 1e8e89894d22f..a4566481b3d70 100644 --- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js +++ b/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); + }); } }; diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js index afbd7e8e94c2d..1243cd1f8bd5f 100644 --- a/dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js +++ b/dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js @@ -6,25 +6,21 @@ define([ 'ko', 'jquery', + 'tinycolor', 'Magento_Ui/js/lib/knockout/bindings/color-picker' ], function (ko, $) { 'use strict'; - var $input, - originaljQuery, - originaljQueryInit, - originaljQuerySpectrum; + var $input; beforeEach(function () { - originaljQuery = $; - originaljQueryInit = $.fn.init; - originaljQuerySpectrum = $.fn.spectrum; + define('spectrum', function () { + return jasmine.createSpy(); + }); }); afterEach(function () { - $ = originaljQuery; - $.fn.init = originaljQueryInit; - $.fn.spectrum = originaljQuerySpectrum; + require.undef('spectrum'); }); describe('Colorpicker binding', function () { @@ -37,11 +33,15 @@ define([ disabled: jasmine.createSpy().and.returnValue(true) }; + jasmine.clock().install(); + $.fn.spectrum = jasmine.createSpy(); $input = jasmine.createSpy(); 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)); @@ -50,11 +50,7 @@ define([ 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); + jasmine.clock().uninstall(); }); it('Should call spectrum on $input with extra configuration if view model enabled', function () { @@ -66,11 +62,15 @@ define([ disabled: jasmine.createSpy().and.returnValue(false) }; + jasmine.clock().install(); + $.fn.spectrum = jasmine.createSpy(); $input = jasmine.createSpy(); 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)); @@ -79,11 +79,7 @@ define([ 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); + jasmine.clock().uninstall(); }); it('Verify config value is empty when reset colorpicker intput', function () { @@ -96,17 +92,27 @@ define([ disabled: jasmine.createSpy().and.returnValue(false) }; + jasmine.clock().install(); + $.fn.spectrum = jasmine.createSpy(); $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); + + jasmine.clock().uninstall(); }); }); });