ENGCOM-7834: Initialize toolbar.js once #28838

 - Merge Pull Request #28838 from ptylek/magento2:fix-toolbar_initialize_once-25934
 - Merged commits:
   1. def4e04
   2. 630bebd
   3. f5f8556
   4. 6cb1924
   5. 7efd88d
   6. aae14cc
   7. 86a72f4
   8. b25aafc

Author: magento-engcom-team

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

@@ -35,10 +35,26 @@ define([
 
         /** @inheritdoc */
         _create: function () {
-            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);
+            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

@@ -0,0 +1,47 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'Magento_Catalog/js/product/list/toolbar'
+], function ($) {
+    'use strict';
+
+    describe('Magento_Catalog/js/product/list/toolbar', function () {
+        var widget,
+            toolbar;
+
+        beforeEach(function () {
+            toolbar = $('<div class="toolbar"></div>');
+        });
+
+        afterEach(function () {
+            toolbar.remove();
+        });
+
+        it('Widget extends jQuery object', function () {
+            expect($.mage.productListToolbarForm).toBeDefined();
+        });
+
+        it('Toolbar is initialized', function () {
+            spyOn($.mage.productListToolbarForm.prototype, '_create');
+
+            toolbar.productListToolbarForm();
+
+            expect($.mage.productListToolbarForm.prototype._create).toEqual(jasmine.any(Function));
+            expect($.mage.productListToolbarForm.prototype._create).toHaveBeenCalledTimes(1);
+        });
+
+        it('Toolbar receives options properly', function () {
+            toolbar.productListToolbarForm();
+            expect(toolbar.productListToolbarForm('option', 'page')).toBe('p');
+        });
+
+        it('Toolbar receives element properly', function () {
+            widget = toolbar.productListToolbarForm();
+            expect(widget).toBe(toolbar);
+        });
+    });
+});