From d923d2d4831b622d542546742e370726316315d5 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 27 Sep 2019 15:27:04 +0200 Subject: [PATCH 1/3] Fix testcafe tags --- .../components/ProductList/ProductList.tsx | 23 +- .../__snapshots__/Stories.test.ts.snap | 203 ++++++++++++++++++ 2 files changed, 221 insertions(+), 5 deletions(-) diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index a69c7b877..35998e681 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -284,6 +284,8 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( key={product ? product.id : "skeleton"} onClick={product && onRowClick(product.id)} className={classes.link} + data-tc="id" + data-tc-id={maybe(() => product.id)} > product.thumbnail.url)} + data-tc="name" > {maybe(() => product.name, )} @@ -303,7 +306,10 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( column="productType" displayColumns={settings.columns} > - + {product && product.productType ? ( product.productType.name ) : ( @@ -315,7 +321,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( column="isPublished" displayColumns={settings.columns} > - + product.isAvailable)} + > {product && maybe(() => product.isAvailable !== undefined) ? ( {maybe(() => { const attribute = product.attributes.find( diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index e6afd2f19..1406b47f9 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -94324,6 +94324,8 @@ exports[`Storyshots Views / Products / Product list default 1`] = ` > Paint
Paint
Paint
Juice
Juice
Juice
Juice
Juice
Juice
Juice
Juice
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Cushion
Paint
Paint
Paint
Juice
Juice
Juice
Juice
Juice
Juice
Juice
Juice
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Top (clothing)
Cushion
Date: Fri, 27 Sep 2019 15:27:11 +0200 Subject: [PATCH 2/3] Remove copied component --- src/components/ProductList/ProductList.tsx | 344 --------------------- src/components/ProductList/index.ts | 1 - 2 files changed, 345 deletions(-) delete mode 100644 src/components/ProductList/ProductList.tsx delete mode 100644 src/components/ProductList/index.ts diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx deleted file mode 100644 index b2fedbd03..000000000 --- a/src/components/ProductList/ProductList.tsx +++ /dev/null @@ -1,344 +0,0 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; -import Table from "@material-ui/core/Table"; -import TableBody from "@material-ui/core/TableBody"; -import TableCell from "@material-ui/core/TableCell"; -import TableFooter from "@material-ui/core/TableFooter"; -import TableRow from "@material-ui/core/TableRow"; -import classNames from "classnames"; -import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; - -import TableCellAvatar, { - AVATAR_MARGIN -} from "@saleor/components/TableCellAvatar"; -import { ProductListColumns } from "@saleor/config"; -import { maybe, renderCollection } from "@saleor/misc"; -import { - getAttributeIdFromColumnValue, - isAttributeColumnValue -} from "@saleor/products/components/ProductListPage/utils"; -import { AvailableInGridAttributes_grid_edges_node } from "@saleor/products/types/AvailableInGridAttributes"; -import { ProductList_products_edges_node } from "@saleor/products/types/ProductList"; -import { ListActions, ListProps } from "@saleor/types"; -import TDisplayColumn from "@saleor/utils/columns/DisplayColumn"; -import Checkbox from "../Checkbox"; -import Money from "../Money"; -import Skeleton from "../Skeleton"; -import StatusLabel from "../StatusLabel"; -import TableHead from "../TableHead"; -import TablePagination from "../TablePagination"; - -const styles = (theme: Theme) => - createStyles({ - [theme.breakpoints.up("lg")]: { - colName: { - width: "auto" - }, - colPrice: { - width: 200 - }, - colPublished: { - width: 200 - }, - colType: { - width: 200 - } - }, - colAttribute: { - width: 150 - }, - colFill: { - padding: 0, - width: "100%" - }, - colName: { - "&$colNameFixed": { - width: 250 - }, - paddingLeft: 0 - }, - colNameFixed: {}, - colNameHeader: { - marginLeft: AVATAR_MARGIN - }, - colPrice: { - textAlign: "right" - }, - colPublished: {}, - colType: {}, - link: { - cursor: "pointer" - }, - table: { - tableLayout: "fixed" - }, - tableContainer: { - overflowX: "scroll" - }, - textLeft: { - textAlign: "left" - }, - textRight: { - textAlign: "right" - } - }); - -interface ProductListProps - extends ListProps, - ListActions, - WithStyles { - gridAttributes: AvailableInGridAttributes_grid_edges_node[]; - products: ProductList_products_edges_node[]; -} - -export const ProductList = withStyles(styles, { name: "ProductList" })( - ({ - classes, - settings, - disabled, - isChecked, - gridAttributes, - pageInfo, - products, - selected, - toggle, - toggleAll, - toolbar, - onNextPage, - onPreviousPage, - onUpdateListSettings, - onRowClick - }: ProductListProps) => { - const intl = useIntl(); - - const DisplayColumn: React.FC<{ column: ProductListColumns }> = props => ( - - ); - - const gridAttributesFromSettings = settings.columns.filter( - isAttributeColumnValue - ); - const numberOfColumns = 2 + settings.columns.length; - - return ( -
- - - - - - - - - - - {gridAttributesFromSettings.map(gridAttribute => ( - - ))} - - - - - - 4 - })} - > - - - - - - - - - - - - - - - {gridAttributesFromSettings.map(gridAttributeFromSettings => ( - - {maybe( - () => - gridAttributes.find( - gridAttribute => - getAttributeIdFromColumnValue( - gridAttributeFromSettings - ) === gridAttribute.id - ).name, - - )} - - ))} - - - - - - - - - - - - - {renderCollection( - products, - product => { - const isSelected = product ? isChecked(product.id) : false; - - return ( - - - toggle(product.id)} - /> - - product.thumbnail.url)} - data-tc="name" - > - {maybe(() => product.name, )} - - - - {product && product.productType ? ( - product.productType.name - ) : ( - - )} - - - - product.isAvailable)} - > - {product && - maybe(() => product.isAvailable !== undefined) ? ( - - ) : ( - - )} - - - {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 ( - attribute.attribute.id - )} - > - {attribute ? attributeValues : } - - ); - })} - - - {maybe(() => product.basePrice) && - maybe(() => product.basePrice.amount) !== undefined && - maybe(() => product.basePrice.currency) !== - undefined ? ( - - ) : ( - - )} - - - - ); - }, - () => ( - - - - - - ) - )} - -
-
- ); - } -); -ProductList.displayName = "ProductList"; -export default ProductList; diff --git a/src/components/ProductList/index.ts b/src/components/ProductList/index.ts deleted file mode 100644 index 17fd4319e..000000000 --- a/src/components/ProductList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./ProductList"; From eb68e2c0fc918a0c0d715ddf11a959f1a93f1335 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 27 Sep 2019 15:42:16 +0200 Subject: [PATCH 3/3] Pass props to TableCell --- .../TableCellAvatar/TableCellAvatar.tsx | 5 ++- .../__snapshots__/Stories.test.ts.snap | 41 +++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx index 893ebcc8a..e35d9c8d0 100644 --- a/src/components/TableCellAvatar/TableCellAvatar.tsx +++ b/src/components/TableCellAvatar/TableCellAvatar.tsx @@ -52,9 +52,10 @@ const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })( children, className, thumbnail, - avatarProps + avatarProps, + ...props }: TableCellAvatarProps) => ( - +
{thumbnail === undefined ? ( diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 1406b47f9..21cfb6bbc 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -94344,6 +94344,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `