MC-30257: Price of a Bundle Product is calculated incorrectly at the product page

Author: irenelagno

app/code/Magento/Bundle/view/base/web/js/price-bundle.js

@@ -28,7 +28,8 @@ define([
         controlContainer: 'dd', // should be eliminated
         priceFormat: {},
         isFixedPrice: false,
-        optionTierPricesBlocksSelector: '#option-tier-prices-{1} [data-role="selection-tier-prices"]'
+        optionTierPricesBlocksSelector: '#option-tier-prices-{1} [data-role="selection-tier-prices"]',
+        isOptionsInitialized: false
     };
 
     $.widget('mage.priceBundle', {
@@ -53,20 +54,37 @@ define([
                 priceBox = $(this.options.priceBoxSelector, form),
                 qty = $(this.options.qtyFieldSelector, form);
 
-            if (priceBox.data('magePriceBox') &&
-                priceBox.priceBox('option') &&
-                priceBox.priceBox('option').priceConfig
-            ) {
-                if (priceBox.priceBox('option').priceConfig.optionTemplate) {
-                    this._setOption('optionTemplate', priceBox.priceBox('option').priceConfig.optionTemplate);
+            this._updatePriceBox();
+            priceBox.on('price-box-initialized', this._updatePriceBox.bind(this));
+            options.on('change', this._onBundleOptionChanged.bind(this));
+            qty.on('change', this._onQtyFieldChanged.bind(this));
+        },
+
+        /**
+         * Update price box config with bundle option prices
+         * @private
+         */
+        _updatePriceBox: function () {
+            var form = this.element,
+                options = $(this.options.productBundleSelector, form),
+                priceBox = $(this.options.priceBoxSelector, form);
+
+            if (!this.options.isOptionsInitialized) {
+                if (priceBox.data('magePriceBox') &&
+                    priceBox.priceBox('option') &&
+                    priceBox.priceBox('option').priceConfig
+                ) {
+                    if (priceBox.priceBox('option').priceConfig.optionTemplate) { //eslint-disable-line max-depth
+                        this._setOption('optionTemplate', priceBox.priceBox('option').priceConfig.optionTemplate);
+                    }
+                    this._setOption('priceFormat', priceBox.priceBox('option').priceConfig.priceFormat);
+                    priceBox.priceBox('setDefault', this.options.optionConfig.prices);
+                    this.options.isOptionsInitialized = true;
                 }
-                this._setOption('priceFormat', priceBox.priceBox('option').priceConfig.priceFormat);
-                priceBox.priceBox('setDefault', this.options.optionConfig.prices);
+                this._applyOptionNodeFix(options);
             }
-            this._applyOptionNodeFix(options);
 
-            options.on('change', this._onBundleOptionChanged.bind(this));
-            qty.on('change', this._onQtyFieldChanged.bind(this));
+            return this;
         },
 
         /**

app/code/Magento/Catalog/view/base/web/js/price-box.js

@@ -49,6 +49,7 @@ define([
 
             box.on('reloadPrice', this.reloadPrice.bind(this));
             box.on('updatePrice', this.onUpdatePrice.bind(this));
+            box.trigger('price-box-initialized');
         },
 
         /**

dev/tests/js/jasmine/tests/app/code/Magento/Bundle/base/js/price-bundle.test.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'Magento_Bundle/js/price-bundle',
+    'Magento_Catalog/js/price-box'
+], function ($) {
+    'use strict';
+
+    describe('Magento_Bundle/js/price-bundle', function () {
+
+        var htmlContainer;
+
+        beforeEach(function () {
+            htmlContainer = $('<div class="price-final_price" data-role="priceBox"><ul class="price-box"></ul></div>');
+        });
+
+        afterEach(function () {
+            htmlContainer.remove();
+        });
+
+        it('Widget extends jQuery object.', function () {
+            expect($.fn.priceBundle).toBeDefined();
+        });
+
+        it('Check _updatePriceBox method call.', function () {
+
+            spyOn($.mage.priceBundle.prototype, '_updatePriceBox');
+
+            htmlContainer.priceBundle();
+
+            expect($.mage.priceBundle.prototype._updatePriceBox).toEqual(jasmine.any(Function));
+            expect($.mage.priceBundle.prototype._updatePriceBox).toHaveBeenCalledTimes(1);
+        });
+
+        it('Check _updatePriceBox method call after priceBox was initialized.', function () {
+            spyOn($.mage.priceBundle.prototype, '_updatePriceBox').and.callThrough();
+            htmlContainer.priceBundle();
+            $('.price-box', htmlContainer).priceBox();
+            expect($.mage.priceBundle.prototype._updatePriceBox).toEqual(jasmine.any(Function));
+            expect($.mage.priceBundle.prototype._updatePriceBox).toHaveBeenCalledTimes(2);
+        });
+
+        it('Check _applyOptionNodeFix method doesn\'t call after priceBox initialization.', function () {
+            var optionConfig = {
+                    optionConfig: {
+                        prices: {}
+                    }
+                },
+                priceConfig = {
+                    priceConfig: 10
+                };
+
+            spyOn($.mage.priceBundle.prototype, '_applyOptionNodeFix').and.callThrough();
+            htmlContainer.priceBundle(optionConfig);
+            $('.price-box', htmlContainer).priceBox(priceConfig);
+            $('.price-box', htmlContainer).trigger('price-box-initialized');
+            expect($.mage.priceBundle.prototype._applyOptionNodeFix).toEqual(jasmine.any(Function));
+            expect($.mage.priceBundle.prototype._applyOptionNodeFix).toHaveBeenCalledTimes(2);
+        });
+
+        it('Check _updatePriceBox method call before priceBox was initialized.', function () {
+            spyOn($.mage.priceBundle.prototype, '_updatePriceBox').and.callThrough();
+            $('.price-box', htmlContainer).priceBox();
+            htmlContainer.priceBundle();
+            expect($.mage.priceBundle.prototype._updatePriceBox).toEqual(jasmine.any(Function));
+            expect($.mage.priceBundle.prototype._updatePriceBox).toHaveBeenCalledTimes(1);
+        });
+    });
+});