ENGCOM-1539: Removed mageMenu widget dependency from breadcrumbs component #15178

Author: VladimirZaets

app/code/Magento/Catalog/view/frontend/web/js/product/breadcrumbs.js

@@ -19,22 +19,6 @@ define([
                 menuContainer: '[data-action="navigation"] > ul'
             },
 
-            /** @inheritdoc */
-            _init: function () {
-                var menu;
-
-                // render breadcrumbs after navigation menu is loaded.
-                menu = $(this.options.menuContainer).data('mageMenu');
-
-                if (typeof menu === 'undefined') {
-                    this._on($(this.options.menuContainer), {
-                        'menucreate': this._super
-                    });
-                } else {
-                    this._super();
-                }
-            },
-
             /** @inheritdoc */
             _render: function () {
                 this._appendCatalogCrumbs();
@@ -87,18 +71,10 @@ define([
              * @private
              */
             _getCategoryCrumb: function (menuItem) {
-                var categoryId,
-                    categoryName,
-                    categoryUrl;
-
-                categoryId = /(\d+)/i.exec(menuItem.attr('id'))[0];
-                categoryName = menuItem.text();
-                categoryUrl = menuItem.attr('href');
-
                 return {
-                    'name': 'category' + categoryId,
-                    'label': categoryName,
-                    'link': categoryUrl,
+                    'name': 'category',
+                    'label': menuItem.text(),
+                    'link': menuItem.attr('href'),
                     'title': ''
                 };
             },

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

@@ -13,14 +13,13 @@ define([
 
     var injector = new Squire(),
         widget,
-        parentWidget,
         menuContainer,
         mocks = {
             'Magento_Theme/js/model/breadcrumb-list': jasmine.createSpyObj(['push'])
         },
         defaultContext = require.s.contexts._,
         menuSelector = '[data-action="navigation"] > ul',
-        menuItem = $('<li class="level0"><a href="http://localhost.com/cat1.html" id="ui-id-3">Cat1</a></li>')[0],
+        menuItem = $('<li class="level0"><a href="http://localhost.com/cat1.html">Cat1</a></li>')[0],
 
         /**
          * Create context object.
@@ -44,7 +43,6 @@ define([
                 'Magento_Theme/js/view/breadcrumbs'
             ], function (mixin, breadcrumb) {
                 widget = mixin(breadcrumb);
-                parentWidget = breadcrumb;
                 done();
             }
         );
@@ -107,14 +105,14 @@ define([
             });
 
             it('Check _getCategoryCrumb call', function () {
-                var item = $('<a href="http://localhost.com/cat1.html" id="ui-id-3">Cat1</a>');
+                var item = $('<a href="http://localhost.com/cat1.html">Cat1</a>');
 
                 expect(widget).toBeDefined();
                 expect(widget).toEqual(jasmine.any(Function));
                 expect(widget.prototype._getCategoryCrumb).toBeDefined();
                 expect(widget.prototype._getCategoryCrumb(item)).toEqual(jasmine.objectContaining(
                     {
-                        'name': 'category3',
+                        'name': 'category',
                         'label': 'Cat1',
                         'link': 'http://localhost.com/cat1.html'
                     }
@@ -223,7 +221,7 @@ define([
                 expect(result.length).toBe(1);
                 expect(result[0]).toEqual(jasmine.objectContaining(
                     {
-                        'name': 'category3',
+                        'name': 'category',
                         'label': 'Cat1',
                         'link': 'http://localhost.com/cat1.html'
                     }
@@ -234,10 +232,10 @@ define([
                 var result,
                     menuItems = $(
                         '<li class="level0 nav-1">' +
-                            '<a href="http://localhost.com/cat1.html" id="ui-id-3">cat1</a>' +
+                            '<a href="http://localhost.com/cat1.html">cat1</a>' +
                             '<ul>' +
                                 '<li class="level1 nav-1-1">' +
-                                    '<a href="http://localhost.com/cat1/cat21.html" id="ui-id-9">cat21</a>' +
+                                    '<a href="http://localhost.com/cat1/cat21.html">cat21</a>' +
                                 '</li>' +
                             '</ul>' +
                         '</li>'
@@ -253,59 +251,17 @@ define([
 
                 context = createContext(widget.prototype);
                 getParentMenuHandler = widget.prototype._getParentMenuItem.bind(context);
-                result = getParentMenuHandler($('#ui-id-9'));
+                result = getParentMenuHandler($('[href="http://localhost.com/cat1/cat21.html"]'));
 
                 expect(result).toBeDefined();
                 expect(result.length).toBe(1);
                 expect(result[0].tagName.toLowerCase()).toEqual('a');
-                expect(result.attr('id')).toEqual('ui-id-3');
+                expect(result.attr('href')).toEqual('http://localhost.com/cat1.html');
 
-                result = getParentMenuHandler($('#ui-id-3'));
+                result = getParentMenuHandler($('[href="http://localhost.com/cat1.html"]'));
 
                 expect(result).toBeNull();
             });
-
-            it('Check _init event binding', function () {
-                var context,
-                    initMethod;
-
-                expect(parentWidget).toBeDefined();
-                expect(parentWidget).toEqual(jasmine.any(Function));
-
-                context = createContext(widget.prototype);
-                initMethod = widget.prototype._init.bind(context);
-
-                spyOn(parentWidget.prototype, '_init');
-                spyOn(widget.prototype, '_on').and.returnValue(widget);
-
-                initMethod();
-
-                expect(parentWidget.prototype._init).not.toHaveBeenCalled();
-                expect(widget.prototype._on).toHaveBeenCalledWith(
-                    jasmine.objectContaining({
-                        selector: menuSelector
-                    }),
-                    {
-                        'menucreate': jasmine.any(Function)
-                    }
-                );
-            });
-
-            it('Check parent _init call', function () {
-                var context,
-                    initMethod;
-
-                expect(parentWidget).toBeDefined();
-                expect(parentWidget).toEqual(jasmine.any(Function));
-
-                context = createContext(widget.prototype);
-                initMethod = widget.prototype._init.bind(context);
-                spyOn(parentWidget.prototype, '_init');
-
-                jQuery(menuSelector).attr('data-mage-menu', '<li></li>');
-                initMethod();
-                expect(parentWidget.prototype._init).toHaveBeenCalled();
-            });
         });
     });
 });