Fix toolbar initialization in order to use specified element

Author: ptylek

app/code/Magento/Catalog/view/frontend/web/js/product/list/toolbar.js

@@ -9,8 +9,6 @@ define([
 ], function ($) {
     'use strict';
 
-    var isToolbarInitialized = false;
-
     /**
      * ProductListToolbarForm Widget - this widget is setting cookie and submitting form according to toolbar controls
      */
@@ -37,14 +35,10 @@ define([
 
         /** @inheritdoc */
         _create: function () {
-            if (isToolbarInitialized) {
-                return;
-            }
-            this._bind($(this.options.modeControl), this.options.mode, this.options.modeDefault);
-            this._bind($(this.options.directionControl), this.options.direction, this.options.directionDefault);
-            this._bind($(this.options.orderControl), this.options.order, this.options.orderDefault);
-            this._bind($(this.options.limitControl), this.options.limit, this.options.limitDefault);
-            isToolbarInitialized = true;
+            this._bind($(this.options.modeControl, this.element), this.options.mode, this.options.modeDefault);
+            this._bind($(this.options.directionControl, this.element), this.options.direction, this.options.directionDefault);
+            this._bind($(this.options.orderControl, this.element), this.options.order, this.options.orderDefault);
+            this._bind($(this.options.limitControl, this.element), this.options.limit, this.options.limitDefault);
         },
 
         /** @inheritdoc */

dev/tests/js/jasmine/tests/app/code/Magento/Catalog/frontend/js/product/list/toolbar.test.js

@@ -6,11 +6,12 @@
 define([
     'jquery',
     'Magento_Catalog/js/product/list/toolbar'
-], function ($, productListToolbarForm) {
+], function ($) {
     'use strict';
 
     describe('Magento_Catalog/js/product/list/toolbar', function () {
-        var toolbar;
+        var widget,
+            toolbar;
 
         beforeEach(function () {
             toolbar = $('<div class="toolbar"></div>');
@@ -33,15 +34,14 @@ define([
             expect($.mage.productListToolbarForm.prototype._create).toHaveBeenCalledTimes(1);
         });
 
-        it('Toolbar is initialized once', function () {
-            spyOn($.mage.productListToolbarForm.prototype, '_bind');
-            var secondToolbar = $('<div class="toolbar"></div>');
-
+        it('Toolbar receives options properly', function () {
             toolbar.productListToolbarForm();
-            secondToolbar.productListToolbarForm();
+            expect(toolbar.productListToolbarForm('option', 'page')).toBe('p');
+        });
 
-            expect($.mage.productListToolbarForm.prototype._bind).toHaveBeenCalledTimes(4);
-            secondToolbar.remove();
+        it('Toolbar receives element properly', function () {
+            widget = toolbar.productListToolbarForm();
+            expect(widget).toBe(toolbar);
         });
     });
 });