Repository: mirumee/saleor-dashboard
Pull request #184 (2019-09-27 09:57:02)

Add testcafe tags
### Pull Request Checklist

<!-- Please keep this section. It will make maintainer's life easier. -->

1. [x] All visible strings are translated with proper context.
1. [x] All data-formatting is locale-aware (dates, numbers, and so on).
1. [x] Translated strings are extracted to `.pot` file.
1. [x] Number of API calls is optimized.
1. [x] The changes are tested.
1. [x] Type definitions are up to date.
1. [x] Changes are mentioned in the changelog.



Patch:
diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx
index a0d91d610..b2fedbd03 100644
--- a/src/components/ProductList/ProductList.tsx
+++ b/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 => (
-                      <TableCell
-                        className={classes.colAttribute}
-                        key={gridAttribute}
-                      >
-                        {maybe<React.ReactNode>(() => {
-                          const attribute = product.attributes.find(
-                            attribute =>
-                              attribute.attribute.id ===
-                              getAttributeIdFromColumnValue(gridAttribute)
-                          );
-                          if (attribute) {
-                            return attribute.values
-                              .map(value => value.name)
-                              .join(", ");
-                          }
-                          return "-";
-                        }, <Skeleton />)}
-                      </TableCell>
-                    ))}
+                    {gridAttributesFromSettings.map(gridAttribute => {
+                      const attribute = maybe(() =>
+                        product.attributes.find(
+                          attribute =>
+                            attribute.attribute.id ===
+                            getAttributeIdFromColumnValue(gridAttribute)
+                        )
+                      );
+                      const attributeValues = attribute
+                        ? attribute.values.map(value => value.name).join(", ")
+                        : "-";
+
+                      return (
+                        <TableCell
+                          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) &&
diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx
index 445673717..803b46e7f 100644
--- a/src/products/components/ProductVariants/ProductVariants.tsx
+++ b/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 { maybe, renderCollection } 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} />


Test patch:
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index cedf09a8c..e6afd2f19 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/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>