Merge pull request #178 from mirumee/add/tc-product-types

Add testcafe tags to attributes, categories, collections and product types

CHANGELOG.md

@@ -24,3 +24,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add search bars - #172 by @dominik-zeglen
 - Add sorting to product list - #173 by @dominik-zeglen
 - Add Heroku integration - #175 by @bogdal
+- Add testcafe tags to attributes, categories, collections and product types - #178 by @dominik-zeglen

src/attributes/components/AttributeList/AttributeList.tsx

@@ -13,7 +13,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
 import { translateBoolean } from "@saleor/intl";
-import { renderCollection } from "@saleor/misc";
+import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 import { AttributeList_attributes_edges_node } from "../../types/AttributeList";
 
@@ -139,6 +139,11 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
                 key={attribute ? attribute.id : "skeleton"}
                 onClick={attribute && onRowClick(attribute.id)}
                 className={classes.link}
+                data-tc="id"
+                data-tc-id={maybe(() => attribute.id)}
+                data-tc-values={JSON.stringify(
+                  maybe(() => attribute.values, [])
+                )}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -148,27 +153,43 @@ const AttributeList: React.StatelessComponent<AttributeListProps> = ({
                     onChange={() => toggle(attribute.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colSlug}>
+                <TableCell className={classes.colSlug} data-tc="slug">
                   {attribute ? attribute.slug : <Skeleton />}
                 </TableCell>
-                <TableCell className={classes.colName}>
+                <TableCell className={classes.colName} data-tc="name">
                   {attribute ? attribute.name : <Skeleton />}
                 </TableCell>
-                <TableCell className={classes.colVisible}>
+                <TableCell
+                  className={classes.colVisible}
+                  data-tc="visible"
+                  data-tc-visible={maybe(() => attribute.visibleInStorefront)}
+                >
                   {attribute ? (
                     translateBoolean(attribute.visibleInStorefront, intl)
                   ) : (
                     <Skeleton />
                   )}
                 </TableCell>
-                <TableCell className={classes.colSearchable}>
+                <TableCell
+                  className={classes.colSearchable}
+                  data-tc="searchable"
+                  data-tc-searchable={maybe(
+                    () => attribute.filterableInDashboard
+                  )}
+                >
                   {attribute ? (
                     translateBoolean(attribute.filterableInDashboard, intl)
                   ) : (
                     <Skeleton />
                   )}
                 </TableCell>
-                <TableCell className={classes.colFaceted}>
+                <TableCell
+                  className={classes.colFaceted}
+                  data-tc="use-in-faceted-search"
+                  data-tc-use-in-faceted-search={maybe(
+                    () => attribute.filterableInStorefront
+                  )}
+                >
                   {attribute ? (
                     translateBoolean(attribute.filterableInStorefront, intl)
                   ) : (

src/attributes/queries.ts

@@ -72,6 +72,11 @@ const attributeList = gql`
       edges {
         node {
           ...AttributeFragment
+          values {
+            id
+            name
+            slug
+          }
         }
       }
       pageInfo {

src/attributes/types/AttributeList.ts

@@ -8,6 +8,13 @@ import { AttributeFilterInput } from "./../../types/globalTypes";
 // GraphQL query operation: AttributeList
 // ====================================================
 
+export interface AttributeList_attributes_edges_node_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+}
+
 export interface AttributeList_attributes_edges_node {
   __typename: "Attribute";
   id: string;
@@ -16,6 +23,7 @@ export interface AttributeList_attributes_edges_node {
   visibleInStorefront: boolean;
   filterableInDashboard: boolean;
   filterableInStorefront: boolean;
+  values: (AttributeList_attributes_edges_node_values | null)[] | null;
 }
 
 export interface AttributeList_attributes_edges {

src/categories/components/CategoryList/CategoryList.tsx

@@ -17,7 +17,7 @@ import Checkbox from "@saleor/components/Checkbox";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
-import { renderCollection } from "@saleor/misc";
+import { maybe, renderCollection } from "@saleor/misc";
 import { ListActions, ListProps } from "@saleor/types";
 
 const styles = (theme: Theme) =>
@@ -126,6 +126,8 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
                 onClick={category ? onRowClick(category.id) : undefined}
                 key={category ? category.id : "skeleton"}
                 selected={isSelected}
+                data-tc="id"
+                data-tc-id={maybe(() => category.id)}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -135,7 +137,7 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
                     onChange={() => toggle(category.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colName}>
+                <TableCell className={classes.colName} data-tc="name">
                   {category && category.name ? category.name : <Skeleton />}
                 </TableCell>
                 <TableCell className={classes.colSubcategories}>

src/collections/components/CollectionList/CollectionList.tsx

@@ -122,6 +122,8 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                   onClick={collection ? onRowClick(collection.id) : undefined}
                   key={collection ? collection.id : "skeleton"}
                   selected={isSelected}
+                  data-tc="id"
+                  data-tc-id={maybe(() => collection.id)}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -131,7 +133,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                       onChange={() => toggle(collection.id)}
                     />
                   </TableCell>
-                  <TableCell className={classes.colName}>
+                  <TableCell className={classes.colName} data-tc="name">
                     {maybe<React.ReactNode>(
                       () => collection.name,
                       <Skeleton />
@@ -143,7 +145,11 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.colAvailability}>
+                  <TableCell
+                    className={classes.colAvailability}
+                    data-tc="published"
+                    data-tc-published={maybe(() => collection.isPublished)}
+                  >
                     {maybe(
                       () => (
                         <StatusLabel

src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx

@@ -85,7 +85,13 @@ const ProductTypeAttributes = withStyles(styles, {
     const intl = useIntl();
 
     return (
-      <Card>
+      <Card
+        data-tc={
+          type === AttributeTypeEnum.PRODUCT
+            ? "product-attributes"
+            : "variant-attributes"
+        }
+      >
         <CardTitle
           title={
             type === AttributeTypeEnum.PRODUCT
@@ -150,6 +156,8 @@ const ProductTypeAttributes = withStyles(styles, {
                     }
                     key={maybe(() => attribute.id)}
                     index={attributeIndex || 0}
+                    data-tc="id"
+                    data-tc-id={maybe(() => attribute.id)}
                   >
                     <TableCell padding="checkbox">
                       <Checkbox
@@ -159,14 +167,14 @@ const ProductTypeAttributes = withStyles(styles, {
                         onChange={() => toggle(attribute.id)}
                       />
                     </TableCell>
-                    <TableCell className={classes.colName}>
+                    <TableCell className={classes.colName} data-tc="name">
                       {maybe(() => attribute.name) ? (
                         attribute.name
                       ) : (
                         <Skeleton />
                       )}
                     </TableCell>
-                    <TableCell className={classes.colSlug}>
+                    <TableCell className={classes.colSlug} data-tc="slug">
                       {maybe(() => attribute.slug) ? (
                         attribute.slug
                       ) : (

src/productTypes/components/ProductTypeList/ProductTypeList.tsx

@@ -124,6 +124,8 @@ const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })(
                   key={productType ? productType.id : "skeleton"}
                   onClick={productType ? onRowClick(productType.id) : undefined}
                   selected={isSelected}
+                  data-tc="id"
+                  data-tc-id={maybe(() => productType.id)}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -136,7 +138,7 @@ const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })(
                   <TableCell className={classes.colName}>
                     {productType ? (
                       <>
-                        {productType.name}
+                        <span data-tc="name">{productType.name}</span>
                         <Typography variant="caption">
                           {maybe(() => productType.hasVariants)
                             ? intl.formatMessage({