MC-40653: Duplicate ID issue on the account page

- fixed
- added test

Author: Oleksandr Dubovyk

app/design/frontend/Magento/blank/Magento_Theme/web/js/theme.js

@@ -17,6 +17,13 @@ define([
     });
 
     $('.panel.header > .header.links').clone().appendTo('#store\\.links');
+    $('#store\\.links .customer-menu li a').each(function () {
+        var id = $(this).attr('id');
+
+        if (id !== undefined) {
+            $(this).attr('id', id + '_mobile');
+        }
+    });
 
     keyboardHandler.apply();
 });

dev/tests/js/jasmine/assets/lib/web/mage/account_menu.html

@@ -0,0 +1,49 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="panel header">
+    <!-- This markup portion is the source for Mobile View Navigation Menu -->
+    <ul class="header links">
+        <li class="greet welcome" data-bind="scope: 'customer'">
+            <span class="logged-in">Welcome, John Doe!</span>
+        </li>
+
+        <li class="customer-welcome active">
+            <span class="customer-name active" role="button">
+                <button type="button" class="action switch" data-action="customer-menu-toggle">
+                    <span>Change</span>
+                </button>
+            </span>
+
+            <div class="customer-menu" data-target="dropdown" aria-hidden="false">
+                <ul class="header links">
+                    <li>
+                        <a href="http://magento.store/account/" id="my-account">My Account</a>
+                    </li>
+                    <li class="link wishlist" data-bind="scope: 'wishlist'">
+                        <a href="http://magento.store/wishlist/" id="my-wishlist">My WishList</a>
+                    </li>
+                    <li>
+                        <a href="http://magento.store/orders/" id="my-orders">My Orders</a>
+                    </li>
+                    <li>
+                        <a href="http://magento.store/addresses/" id="my-addresses">My Addresses</a>
+                    </li>
+                    <li class="link authorization-link" data-label="or">
+                        <a href="http://magento.store/customer/account/logout/">Sign Out</a>
+                    </li>
+                </ul>
+            </div>
+        </li>
+        <li class="link authorization-link" data-label="or">
+            <a href="http://magento.store/customer/account/logout/">Sign Out</a>
+        </li>
+    </ul>
+</div>
+
+<div id="store.links">
+    <!-- Navigation Menu for Mobile View will be cloned here from the source -->
+</div>

dev/tests/js/jasmine/tests/app/code/Magento/Theme/view/frontend/web/js/theme.test.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'jquery',
+    'squire',
+    'text!tests/assets/lib/web/mage/account_menu.html'
+], function ($, Squire, header) {
+    'use strict';
+
+    describe('Magento_Theme/js/theme', function () {
+        var injector = new Squire(),
+            mocks = {};
+
+        beforeEach(function (done) {
+            var $menu = $(header);
+
+            $('body').append($menu);
+
+            injector.mock(mocks);
+            injector.require(['Magento_Theme/js/theme'], function () {
+                done();
+            });
+        });
+
+        afterEach(function () {
+            try {
+                injector.clean();
+                injector.remove();
+                header = null;
+            } catch (e) {}
+        });
+
+        it('should add suffix "_mobile" to the html ID attribute (if exists) ' +
+            'for every menu link to make IDs unique after cloning', function () {
+            var suffix = '_mobile',
+                menuItems = [
+                    {
+                        id: '#my-account' + suffix,
+                        link: 'http://magento.store/account/'
+                    },
+                    {
+                        id: '#my-wishlist' + suffix,
+                        link: 'http://magento.store/wishlist/'
+                    },
+                    {
+                        id: '#my-orders' + suffix,
+                        link: 'http://magento.store/orders/'
+                    },
+                    {
+                        id: '#my-addresses' + suffix,
+                        link: 'http://magento.store/addresses/'
+                    }
+                ];
+
+            menuItems.forEach(function (item) {
+                expect($(item.id).attr('href')).toBe(item.link)
+            });
+        });
+    });
+});