Add tc tags for e2e tests

src/auth/components/LoginPage/LoginPage.tsx

@@ -154,6 +154,9 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
                   name="email"
                   onChange={handleChange}
                   value={data.email}
+                  inputProps={{
+                    "data-tc": "email"
+                  }}
                 />
                 <FormSpacer />
                 <TextField
@@ -164,6 +167,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
                   onChange={handleChange}
                   type="password"
                   value={data.password}
+                  data-tc="password"
                 />
                 <FormSpacer />
                 <div className={classes.buttonContainer}>
@@ -181,6 +185,7 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
                     variant="contained"
                     onClick={handleSubmit}
                     type="submit"
+                    data-tc="submit"
                   >
                     {i18n.t("Login")}
                   </Button>

src/components/AppLayout/MenuList.tsx

@@ -233,6 +233,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
                       menuItem.ariaLabel === activeSubMenu.label &&
                       activeSubMenu.isActive
                   })}
+                  data-tc={menuItem.label}
                   onClick={() => handleSubMenu(menuItem.ariaLabel)}
                 >
                   <SVG

src/components/AppLayout/MenuNested.tsx

@@ -162,6 +162,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
                 className={classNames(classes.menuListNestedClose, {
                   [classes.menuListNestedCloseDark]: isDark
                 })}
+                data-tc={ariaLabel}
                 onClick={() =>
                   closeSubMenu({
                     isActive: false,
@@ -178,6 +179,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
               <a
                 className={classNames(classes.menuListNestedItem)}
                 href={createHref(item.url)}
+                data-tc={ariaLabel}
                 onClick={event => closeMenu(item.url, event)}
                 key={item.label}
               >

src/components/ImageTile/ImageTile.tsx

@@ -60,7 +60,7 @@ interface ImageTileProps extends WithStyles<typeof styles> {
 
 const ImageTile = withStyles(styles, { name: "ImageTile" })(
   ({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => (
-    <div className={classes.imageContainer}>
+    <div className={classes.imageContainer} data-tc="product-image">
       <div className={classes.imageOverlay}>
         <div className={classes.imageOverlayToolbar}>
           {onImageEdit && (

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -123,7 +123,8 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
     placeholder,
     value,
     fetchChoices,
-    onChange
+    onChange,
+    ...props
   }: MultiAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
     const handleSelect = (
       item: string,
@@ -153,7 +154,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
             highlightedIndex,
             inputValue
           }) => (
-            <div className={classes.container}>
+            <div className={classes.container} {...props}>
               <TextField
                 InputProps={{
                   ...getInputProps({
@@ -190,6 +191,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                           {...getItemProps({
                             item: value.value
                           })}
+                          data-tc="multiautocomplete-select-option"
                         >
                           <Checkbox
                             className={classes.checkbox}
@@ -213,6 +215,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                           {...getItemProps({
                             item: suggestion.value
                           })}
+                          data-tc="multiautocomplete-select-option"
                         >
                           <Checkbox
                             checked={value.includes(suggestion.value)}
@@ -238,6 +241,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                             {...getItemProps({
                               item: inputValue
                             })}
+                            data-tc="multiautocomplete-select-option"
                           >
                             <span className={classes.menuItemLabel}>
                               {i18n.t("Add new value: {{ value }}", {
@@ -250,7 +254,11 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
                     </>
                   ) : (
                     !loading && (
-                      <MenuItem disabled={true} component="div">
+                      <MenuItem
+                        disabled={true}
+                        component="div"
+                        data-tc="multiautocomplete-select-no-options"
+                      >
                         {i18n.t("No results found")}
                       </MenuItem>
                     )

src/components/ProductList/ProductList.tsx

@@ -173,6 +173,7 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                     key={product ? product.id : "skeleton"}
                     onClick={product && onRowClick(product.id)}
                     className={classes.link}
+                    data-tc={product ? `product-${product.id}` : undefined}
                   >
                     <TableCell padding="checkbox">
                       <Checkbox

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -103,6 +103,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                       variant="contained"
                       onClick={onDelete}
                       className={classes.deleteButton}
+                      data-tc="button-bar-delete"
                     >
                       {labels && labels.delete
                         ? labels.delete
@@ -114,6 +115,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                     className={classes.cancelButton}
                     variant="text"
                     onClick={onCancel}
+                    data-tc="button-bar-cancel"
                   >
                     {maybe(
                       () => labels.cancel,
@@ -126,6 +128,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
                     disabled={disabled}
                     onClick={onSave}
                     transitionState={state}
+                    data-tc="button-bar-confirm"
                   >
                     {maybe(
                       () => labels.save,

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -93,7 +93,8 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
     value,
     InputProps,
     fetchChoices,
-    onChange
+    onChange,
+    ...props
   }: SingleAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
     const [prevDisplayValue] = useStateFromProps(displayValue);
     const handleChange = item =>
@@ -136,7 +137,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
               }
 
               return (
-                <div className={classes.container}>
+                <div className={classes.container} {...props}>
                   <TextField
                     InputProps={{
                       ...InputProps,
@@ -173,6 +174,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                               {...getItemProps({
                                 item: ""
                               })}
+                              data-tc="singleautocomplete-select-option"
                             >
                               <Typography color="textSecondary">
                                 {i18n.t("None")}
@@ -195,6 +197,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                                   index: choiceIndex,
                                   item: suggestion.value
                                 })}
+                                data-tc="singleautocomplete-select-option"
                               >
                                 {suggestion.label}
                               </MenuItem>
@@ -215,6 +218,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                                 {...getItemProps({
                                   item: inputValue
                                 })}
+                                data-tc="singleautocomplete-select-option"
                               >
                                 {i18n.t("Add new value: {{ value }}", {
                                   context: "add custom option",
@@ -224,7 +228,11 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                             )}
                         </>
                       ) : (
-                        <MenuItem disabled={true} component="div">
+                        <MenuItem
+                          disabled={true}
+                          component="div"
+                          data-tc="singleautocomplete-select-no-options"
+                        >
                           {i18n.t("No results found")}
                         </MenuItem>
                       )}

src/components/TablePagination/TablePaginationActions.tsx

@@ -88,6 +88,7 @@ export const TablePaginationActions = withStyles(styles, {
           })}
           onClick={onPreviousPage}
           disabled={!hasPreviousPage}
+          data-tc="button-pagination-back"
           {...backIconButtonProps}
         >
           {theme.direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
@@ -99,6 +100,7 @@ export const TablePaginationActions = withStyles(styles, {
           })}
           onClick={onNextPage}
           disabled={!hasNextPage}
+          data-tc="button-pagination-next"
           {...nextIconButtonProps}
         >
           {theme.direction === "rtl" ? <ArrowLeft /> : <ArrowRight />}

src/components/messages/MessageManager.tsx

@@ -71,7 +71,11 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
           ContentProps={{
             "aria-describedby": "message-id"
           }}
-          message={<span id="message-id">{text}</span>}
+          message={
+            <span id="message-id" data-tc="notification">
+              {text}
+            </span>
+          }
           action={[
             !!onUndo ? (
               <Button
@@ -79,6 +83,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
                 color="secondary"
                 size="small"
                 onClick={this.handleClose as any}
+                data-tc="button-undo"
               >
                 UNDO
               </Button>

src/products/components/ProductAttributes/ProductAttributes.tsx

@@ -147,6 +147,7 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
           <IconButton
             className={classes.expansionBarButton}
             onClick={toggleExpansion}
+            data-tc="product-attributes-expand"
           >
             <ArrowDropDownIcon
               className={classNames(classes.expansionBarButtonIcon, {
@@ -162,10 +163,13 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
               <React.Fragment key={attribute.id}>
                 {attributeIndex > 0 && <Hr />}
                 <Grid className={classes.attributeSection} variant="uniform">
-                  <div className={classes.attributeSectionLabel}>
+                  <div
+                    className={classes.attributeSectionLabel}
+                    data-tc="product-attribute-label"
+                  >
                     <Typography>{attribute.label}</Typography>
                   </div>
-                  <div>
+                  <div data-tc="product-attribute-value">
                     {attribute.data.inputType ===
                     AttributeInputTypeEnum.DROPDOWN ? (
                       <SingleAutocompleteSelectField

src/products/components/ProductImages/ProductImages.tsx

@@ -192,6 +192,7 @@ const ProductImages = withStyles(styles, { name: "ProductImages" })(
               disabled={loading}
               variant="text"
               color="primary"
+              data-tc="button-upload-image"
             >
               {i18n.t("Upload image")}
             </Button>

src/products/components/ProductListPage/ProductListPage.tsx

@@ -99,7 +99,12 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           onReset={handleReset}
           onSave={handleSave}
         />
-        <Button onClick={onAdd} color="primary" variant="contained">
+        <Button
+          onClick={onAdd}
+          color="primary"
+          variant="contained"
+          data-tc="add-product"
+        >
           {i18n.t("Add product")} <AddIcon />
         </Button>
       </PageHeader>

src/products/components/ProductOrganization/ProductOrganization.tsx

@@ -101,6 +101,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
             choices={productTypes}
             value={data.productType}
             onChange={onProductTypeChange}
+            data-tc="product-type"
           />
         ) : (
           <>
@@ -137,6 +138,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
           value={data.category}
           onChange={onCategoryChange}
           fetchChoices={fetchCategories}
+          data-tc="category"
         />
         <FormSpacer />
         <Hr />
@@ -152,6 +154,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
           )}
           onChange={onCollectionChange}
           fetchChoices={fetchCollections}
+          data-tc="collections"
         />
       </CardContent>
     </Card>

src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx

@@ -93,6 +93,7 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
                 value={getAttributeValue(attribute.id, attributes)}
                 choices={getAttributeValueChoices(attribute.id, attributes)}
                 allowCustomValues
+                data-tc="variant-attribute-input"
               />
             );
           })

src/products/components/ProductVariants/ProductVariants.tsx

@@ -94,10 +94,20 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
         title={i18n.t("Variants")}
         toolbar={
           <>
-            <Button onClick={onAttributesEdit} variant="text" color="primary">
+            <Button
+              onClick={onAttributesEdit}
+              variant="text"
+              color="primary"
+              data-tc="button-edit-attributes"
+            >
               {i18n.t("Edit attributes")}
             </Button>
-            <Button onClick={onVariantAdd} variant="text" color="primary">
+            <Button
+              onClick={onVariantAdd}
+              variant="text"
+              color="primary"
+              data-tc="button-add-variant"
+            >
               {i18n.t("Add variant")}
             </Button>
           </>