From 44b3b66ff388b3a710a7bbe20b029492826b1e8c Mon Sep 17 00:00:00 2001
From: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
Date: Tue, 25 Aug 2020 09:27:02 +0200
Subject: [PATCH 1/2] Add static test id to the menu items

---
 src/components/AppLayout/MenuList.tsx     |  4 ++--
 src/components/AppLayout/menuStructure.ts | 21 ++++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
index 1ab5589a0..fe01803eb 100644
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@@ -258,7 +258,8 @@ const MenuList: React.FC<MenuListProps> = props => {
                 [classes.menuListItemActive]: isAnyChildActive
               })}
               key={menuItem.label}
-              data-testid={menuItem.label.toLowerCase()}
+              data-testid={menuItem.testingContextId}
+              data-test="menuItemEntry"
             >
               <div
                 className={classNames(classes.menuItemHover, {
@@ -266,7 +267,6 @@ const MenuList: React.FC<MenuListProps> = props => {
                     menuItem.ariaLabel === activeSubMenu.label &&
                     activeSubMenu.isActive
                 })}
-                data-test={menuItem.label}
                 onClick={() => handleSubMenu(menuItem.ariaLabel)}
               >
                 <SVG
diff --git a/src/components/AppLayout/menuStructure.ts b/src/components/AppLayout/menuStructure.ts
index 177c3b433..b39d99161 100644
--- a/src/components/AppLayout/menuStructure.ts
+++ b/src/components/AppLayout/menuStructure.ts
@@ -24,6 +24,7 @@ export interface IMenuItem {
   icon?: any;
   label: string;
   permission?: PermissionEnum;
+  testingContextId: string;
   url?: string;
 }
 
@@ -33,6 +34,7 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
       ariaLabel: "home",
       icon: homeIcon,
       label: intl.formatMessage(sectionNames.home),
+      testingContextId: "home",
       url: "/"
     },
     {
@@ -41,22 +43,26 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
         {
           ariaLabel: "products",
           label: intl.formatMessage(sectionNames.products),
+          testingContextId: "products",
           url: productListUrl()
         },
         {
           ariaLabel: "categories",
           label: intl.formatMessage(sectionNames.categories),
+          testingContextId: "categories",
           url: categoryListUrl()
         },
         {
           ariaLabel: "collections",
           label: intl.formatMessage(sectionNames.collections),
+          testingContextId: "collections",
           url: collectionListUrl()
         }
       ],
       icon: catalogIcon,
       label: intl.formatMessage(commonMessages.catalog),
-      permission: PermissionEnum.MANAGE_PRODUCTS
+      permission: PermissionEnum.MANAGE_PRODUCTS,
+      testingContextId: "catalogue"
     },
     {
       ariaLabel: "orders",
@@ -65,24 +71,28 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
           ariaLabel: "orders",
           label: intl.formatMessage(sectionNames.orders),
           permission: PermissionEnum.MANAGE_ORDERS,
+          testingContextId: "orders",
           url: orderListUrl()
         },
         {
           ariaLabel: "order drafts",
           label: intl.formatMessage(commonMessages.drafts),
           permission: PermissionEnum.MANAGE_ORDERS,
+          testingContextId: "order drafts",
           url: orderDraftListUrl()
         }
       ],
       icon: ordersIcon,
       label: intl.formatMessage(sectionNames.orders),
-      permission: PermissionEnum.MANAGE_ORDERS
+      permission: PermissionEnum.MANAGE_ORDERS,
+      testingContextId: "orders"
     },
     {
       ariaLabel: "customers",
       icon: customerIcon,
       label: intl.formatMessage(sectionNames.customers),
       permission: PermissionEnum.MANAGE_USERS,
+      testingContextId: "customers",
       url: customerListUrl()
     },
 
@@ -92,23 +102,27 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
         {
           ariaLabel: "sales",
           label: intl.formatMessage(sectionNames.sales),
+          testingContextId: "sales",
           url: saleListUrl()
         },
         {
           ariaLabel: "vouchers",
           label: intl.formatMessage(sectionNames.vouchers),
+          testingContextId: "vouchers",
           url: voucherListUrl()
         }
       ],
       icon: discountsIcon,
       label: intl.formatMessage(commonMessages.discounts),
-      permission: PermissionEnum.MANAGE_DISCOUNTS
+      permission: PermissionEnum.MANAGE_DISCOUNTS,
+      testingContextId: "discounts"
     },
     {
       ariaLabel: "apps",
       icon: appsIcon,
       label: intl.formatMessage(sectionNames.apps),
       permission: PermissionEnum.MANAGE_APPS,
+      testingContextId: "apps",
       url: appsListPath
     },
     {
@@ -116,6 +130,7 @@ function createMenuStructure(intl: IntlShape): IMenuItem[] {
       icon: translationIcon,
       label: intl.formatMessage(sectionNames.translations),
       permission: PermissionEnum.MANAGE_TRANSLATIONS,
+      testingContextId: "translations",
       url: languageListUrl
     }
   ];

From 4166bff0a948e85d982f2e063cc0177aa8ca2ed9 Mon Sep 17 00:00:00 2001
From: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>
Date: Tue, 25 Aug 2020 09:54:24 +0200
Subject: [PATCH 2/2] All items in menu will have test context

---
 src/components/AppLayout/MenuList.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
index fe01803eb..05f6fa971 100644
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@@ -313,6 +313,8 @@ const MenuList: React.FC<MenuListProps> = props => {
             href={createHref(menuItem.url)}
             onClick={event => closeSubMenu(menuItem.url, event)}
             key={menuItem.label}
+            data-testid={menuItem.testingContextId}
+            data-test="menuItemEntry"
           >
             <div className={classes.menuItemHover}>
               <SVG