Fix test selectors

cypress/elements/account/left-menu/left-menu-selectors.js

@@ -1,4 +1,4 @@
 /* eslint-disable sort-keys */
 export const LEFT_MENU_SELECTORS = {
-  catalog: "[data-testid='catalogue']"
+  catalog: "[data-test-id='catalogue']"
 };

cypress/integration/warehouse.js

@@ -7,7 +7,7 @@ describe("Warehouse settings", () => {
   xit("Warehouse section visible in the configuration", () => {
     cy.visit("/configuration/")
       .loginUser()
-      .get("[data-testid=warehouses][data-test=settingsSubsection]")
+      .get("[data-test-id=warehouses][data-test=settingsSubsection]")
       .click();
     cy.location("pathname").should("eq", "/warehouses/");
   });

src/components/SideBar/MenuItem.tsx

@@ -146,7 +146,11 @@ const MenuItem: React.FC<MenuItemProps> = ({
       ref={anchor}
       onClick={event => handleClick(event, menuItem)}
     >
-      <button className={classes.menuItemBtn}>
+      <button
+        className={classes.menuItemBtn}
+        data-test="menu-item-label"
+        data-test-id={menuItem.testingContextId}
+      >
         {menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />}
         <Typography
           aria-label={menuItem.ariaLabel}
@@ -154,8 +158,6 @@ const MenuItem: React.FC<MenuItemProps> = ({
             [classes.hideLabel]: isMenuShrunk
           })}
           variant="body2"
-          data-test="menu-item-label"
-          data-test-id={menuItem.testingContextId}
         >
           {menuItem.label}
         </Typography>

src/configuration/ConfigurationPage.tsx

@@ -127,7 +127,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
                     onClick={() => onSectionClick(item.url)}
                     key={itemIndex}
                     data-test="settingsSubsection"
-                    data-testid={item.title.toLowerCase()}
+                    data-test-id={item.title.toLowerCase()}
                   >
                     <CardContent className={classes.cardContent}>
                       <div className={classes.icon}>{item.icon}</div>

src/warehouses/components/WarehouseList/WarehouseList.tsx

@@ -131,7 +131,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
               onClick={warehouse ? onRowClick(warehouse.id) : undefined}
               key={warehouse ? warehouse.id : "skeleton"}
               data-test="warehouseEntry"
-              data-testid={warehouse?.name.toLowerCase().replace(" ", "")}
+              data-test-id={warehouse?.name.toLowerCase().replace(" ", "")}
             >
               <TableCell className={classes.colName} data-test="name">
                 {maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}