Add tc tags

src/components/ProductList/ProductList.tsx

@@ -243,11 +243,15 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                     <TableCellAvatar
                       className={classes.colName}
                       thumbnail={maybe(() => product.thumbnail.url)}
+                      data-tc="name"
                     >
                       {maybe<React.ReactNode>(() => product.name, <Skeleton />)}
                     </TableCellAvatar>
                     <DisplayColumn column="productType">
-                      <TableCell className={classes.colType}>
+                      <TableCell
+                        className={classes.colType}
+                        data-tc="product-type"
+                      >
                         {product && product.productType ? (
                           product.productType.name
                         ) : (
@@ -256,7 +260,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                       </TableCell>
                     </DisplayColumn>
                     <DisplayColumn column="isPublished">
-                      <TableCell className={classes.colPublished}>
+                      <TableCell
+                        className={classes.colPublished}
+                        data-tc="isPublished"
+                        data-tc-is-published={maybe(() => product.isAvailable)}
+                      >
                         {product &&
                         maybe(() => product.isAvailable !== undefined) ? (
                           <StatusLabel
@@ -278,26 +286,31 @@ export const ProductList = withStyles(styles, { name: "ProductList" })(
                         )}
                       </TableCell>
                     </DisplayColumn>
-                    {gridAttributesFromSettings.map(gridAttribute => (
+                    {gridAttributesFromSettings.map(gridAttribute => {
-                      <TableCell
+                      const attribute = maybe(() =>
-                        className={classes.colAttribute}
+                        product.attributes.find(
-                        key={gridAttribute}
-                      >
-                        {maybe<React.ReactNode>(() => {
-                          const attribute = product.attributes.find(
                           attribute =>
                             attribute.attribute.id ===
                             getAttributeIdFromColumnValue(gridAttribute)
+                        )
                       );
-                          if (attribute) {
+                      const attributeValues = attribute
-                            return attribute.values
+                        ? attribute.values.map(value => value.name).join(", ")
-                              .map(value => value.name)
+                        : "-";
-                              .join(", ");
+
-                          }
+                      return (
-                          return "-";
+                        <TableCell
-                        }, <Skeleton />)}
+                          className={classes.colAttribute}
+                          key={gridAttribute}
+                          data-tc="attribute"
+                          data-tc-attribute={maybe(
+                            () => attribute.attribute.id
+                          )}
+                        >
+                          {attribute ? attributeValues : <Skeleton />}
                         </TableCell>
-                    ))}
+                      );
+                    })}
                     <DisplayColumn column="price">
                       <TableCell className={classes.colPrice}>
                         {maybe(() => product.basePrice) &&

src/products/components/ProductVariants/ProductVariants.tsx

@@ -22,7 +22,7 @@ import Money from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
-import { renderCollection } from "../../../misc";
+import { renderCollection, maybe } from "../../../misc";
 import { ListActions } from "../../../types";
 import { ProductDetails_product_variants } from "../../types/ProductDetails";
 import { ProductVariant_costPrice } from "../../types/ProductVariant";
@@ -186,10 +186,16 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                         onChange={() => toggle(variant.id)}
                       />
                     </TableCell>
-                    <TableCell className={classes.colName}>
+                    <TableCell className={classes.colName} data-tc="name">
                       {variant ? variant.name || variant.sku : <Skeleton />}
                     </TableCell>
-                    <TableCell className={classes.colStatus}>
+                    <TableCell
+                      className={classes.colStatus}
+                      data-tc="isAvailable"
+                      data-tc-is-available={maybe(
+                        () => variant.stockQuantity > 0
+                      )}
+                    >
                       {variant ? (
                         <StatusLabel
                           status={
@@ -211,11 +217,11 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })(
                         <Skeleton />
                       )}
                     </TableCell>
-                    <TableCell className={classes.colSku}>
+                    <TableCell className={classes.colSku} data-tc="sku">
                       {variant ? variant.sku : <Skeleton />}
                     </TableCell>
                     <Hidden smDown>
-                      <TableCell className={classes.colPrice}>
+                      <TableCell className={classes.colPrice} data-tc="price">
                         {variant ? (
                           variant.priceOverride ? (
                             <Money money={variant.priceOverride} />

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -88475,11 +88475,14 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                    data-tc="name"
                   >
                     Cordoba Oro
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                    data-tc="isAvailable"
+                    data-tc-is-available="true"
                   >
                     <div
                       class="StatusLabel-root-id undefined StatusLabel-successDot-id"
@@ -88489,6 +88492,7 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                    data-tc="sku"
                   >
                     87192-94370
                   </td>
@@ -88513,11 +88517,14 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                    data-tc="name"
                   >
                     silver
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                    data-tc="isAvailable"
+                    data-tc-is-available="true"
                   >
                     <div
                       class="StatusLabel-root-id undefined StatusLabel-successDot-id"
@@ -88527,6 +88534,7 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                    data-tc="sku"
                   >
                     69055-15190
                   </td>
@@ -91266,11 +91274,14 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                    data-tc="name"
                   >
                     Cordoba Oro
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                    data-tc="isAvailable"
+                    data-tc-is-available="true"
                   >
                     <div
                       class="StatusLabel-root-id undefined StatusLabel-successDot-id"
@@ -91280,6 +91291,7 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                    data-tc="sku"
                   >
                     87192-94370
                   </td>
@@ -91304,11 +91316,14 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
+                    data-tc="name"
                   >
                     silver
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
+                    data-tc="isAvailable"
+                    data-tc-is-available="true"
                   >
                     <div
                       class="StatusLabel-root-id undefined StatusLabel-successDot-id"
@@ -91318,6 +91333,7 @@ Ctrl + K"
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
+                    data-tc="sku"
                   >
                     69055-15190
                   </td>