djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix warnings and better test tag (#582)

Browse source 
* Resolve test warnings

* Tename data-tc to data-test

* Update src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
This commit is contained in:
Krzysztof Wolski 2020-07-02 12:59:09 +02:00 committed by GitHub
parent 4174cbe0fa
commit f4d570c7e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 1068 additions and 1052 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.testcafe/Models/homePageModel.js
View file

@ -2,10 +2,10 @@ import { Selector, t } from "testcafe";
export default class HomePage {
constructor() {
this.header = Selector('[data-tc="home-header"]');
this.catalogMenu = Selector('[data-tc="Catalog"]');
this.header = Selector('[data-test="home-header"]');
this.catalogMenu = Selector('[data-test="Catalog"]');
this.productsSubMenu = Selector(
'[data-tc="catalogue"]>[aria-label="products"]'
'[data-test="catalogue"]>[aria-label="products"]'
);
}
}

6
.testcafe/Models/loginPageModel.js
View file

@ -2,9 +2,9 @@ import { Selector, t } from "testcafe";
export default class LoginPage {
constructor() {
this.email = Selector('[data-tc="email"]');
this.password = Selector('[data-tc="password"]');
this.submitButton = Selector('[data-tc="submit"]');
this.email = Selector('[data-test="email"]');
this.password = Selector('[data-test="password"]');
this.submitButton = Selector('[data-test="submit"]');
}
async performLogin(putEmail, putPassword) {

22
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -193,9 +193,9 @@ const AttributeList: React.FC<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(
data-test="id"
data-test-id={maybe(() => attribute.id)}
data-test-values={JSON.stringify(
maybe(() => attribute.values, [])
)}
>
@ -207,16 +207,16 @@ const AttributeList: React.FC<AttributeListProps> = ({
onChange={() => toggle(attribute.id)}
/>
</TableCell>
<TableCell className={classes.colSlug} data-tc="slug">
<TableCell className={classes.colSlug} data-test="slug">
{attribute ? attribute.slug : <Skeleton />}
</TableCell>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{attribute ? attribute.name : <Skeleton />}
</TableCell>
<TableCell
className={classes.colVisible}
data-tc="visible"
data-tc-visible={maybe(() => attribute.visibleInStorefront)}
data-test="visible"
data-test-visible={maybe(() => attribute.visibleInStorefront)}
>
{attribute ? (
translateBoolean(attribute.visibleInStorefront, intl)
@ -226,8 +226,8 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCell>
<TableCell
className={classes.colSearchable}
data-tc="searchable"
data-tc-searchable={maybe(
data-test="searchable"
data-test-searchable={maybe(
() => attribute.filterableInDashboard
)}
>
@ -239,8 +239,8 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCell>
<TableCell
className={classes.colFaceted}
data-tc="use-in-faceted-search"
data-tc-use-in-faceted-search={maybe(
data-test="use-in-faceted-search"
data-test-use-in-faceted-search={maybe(
() => attribute.filterableInStorefront
)}
>

6
src/auth/components/LoginPage/LoginPage.tsx
View file

@ -82,7 +82,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
onChange={handleChange}
value={data.email}
inputProps={{
"data-tc": "email"
"data-test": "email"
}}
/>
<FormSpacer />
@ -97,7 +97,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
type="password"
value={data.password}
inputProps={{
"data-tc": "password"
"data-test": "password"
}}
/>
<FormSpacer />
@ -109,7 +109,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
variant="contained"
onClick={handleSubmit}
type="submit"
data-tc="submit"
data-test="submit"
>
<FormattedMessage defaultMessage="Login" description="button" />
</Button>

4
src/auth/components/NewPasswordPage/NewPasswordPage.tsx
View file

@ -86,7 +86,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
type="password"
value={data.password}
inputProps={{
"data-tc": "password"
"data-test": "password"
}}
/>
<FormSpacer />
@ -109,7 +109,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
})
}
inputProps={{
"data-tc": "confirm-password"
"data-test": "confirm-password"
}}
/>
<FormSpacer />

2
src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
View file

@ -68,7 +68,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
onChange={handleChange}
value={data.email}
inputProps={{
"data-tc": "email"
"data-test": "email"
}}
/>
<FormSpacer />

6
src/categories/components/CategoryList/CategoryList.tsx
View file

@ -165,8 +165,8 @@ const CategoryList: React.FC<CategoryListProps> = props => {
onClick={category ? onRowClick(category.id) : undefined}
key={category ? category.id : "skeleton"}
selected={isSelected}
data-tc="id"
data-tc-id={maybe(() => category.id)}
data-test="id"
data-test-id={maybe(() => category.id)}
>
<TableCell padding="checkbox">
<Checkbox
@ -176,7 +176,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
onChange={() => toggle(category.id)}
/>
</TableCell>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{category && category.name ? category.name : <Skeleton />}
</TableCell>
<TableCell className={classes.colSubcategories}>

10
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -150,8 +150,8 @@ const CollectionList: React.FC<CollectionListProps> = props => {
onClick={collection ? onRowClick(collection.id) : undefined}
key={collection ? collection.id : "skeleton"}
selected={isSelected}
data-tc="id"
data-tc-id={maybe(() => collection.id)}
data-test="id"
data-test-id={maybe(() => collection.id)}
>
<TableCell padding="checkbox">
<Checkbox
@ -161,7 +161,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
onChange={() => toggle(collection.id)}
/>
</TableCell>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colProducts}>
@ -172,8 +172,8 @@ const CollectionList: React.FC<CollectionListProps> = props => {
</TableCell>
<TableCell
className={classes.colAvailability}
data-tc="published"
data-tc-published={maybe(() => collection.isPublished)}
data-test="published"
data-test-published={maybe(() => collection.isPublished)}
>
{maybe(
() => (

2
src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
View file

@ -59,7 +59,7 @@ const AccountPermissionGroups: React.FC<AccountPermissionGroupsProps> = props =>
value={formData?.permissionGroups}
onChange={onChange}
fetchChoices={onSearchChange}
data-tc="permissionGroups"
data-test="permissionGroups"
onFetchMore={onFetchMore}
hasMore={hasMore}
loading={loading}

2
src/components/AppLayout/MenuList.tsx
View file

@ -264,7 +264,7 @@ const MenuList: React.FC<MenuListProps> = props => {
menuItem.ariaLabel === activeSubMenu.label &&
activeSubMenu.isActive
})}
data-tc={menuItem.label}
data-test={menuItem.label}
onClick={() => handleSubMenu(menuItem.ariaLabel)}
>
<SVG

4
src/components/AppLayout/MenuNested.tsx
View file

@ -162,7 +162,7 @@ const MenuNested: React.FC<MenuNestedProps> = props => {
className={classNames(classes.menuListNestedClose, {
[classes.menuListNestedCloseDark]: isDark
})}
data-tc={ariaLabel}
data-test={ariaLabel}
onClick={() =>
closeSubMenu({
isActive: false,
@ -178,7 +178,7 @@ const MenuNested: React.FC<MenuNestedProps> = props => {
<a
className={classNames(classes.menuListNestedItem)}
href={createHref(item.url)}
data-tc={ariaLabel}
data-test={ariaLabel}
onClick={event => closeMenu(item.url, event)}
key={item.label}
>

2
src/components/CompanyAddressInput/CompanyAddressForm.tsx
View file

@ -160,7 +160,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
choices={countries}
InputProps={{
inputProps: {
autocomplete: "plsdontautocomplete" // Somehow it shuts it down
autoComplete: "none"
}
}}
/>

2
src/components/ImageTile/ImageTile.tsx
View file

@ -70,7 +70,7 @@ const ImageTile: React.FC<ImageTileProps> = props => {
const classes = useStyles(props);
return (
<div className={classes.imageContainer} data-tc="product-image">
<div className={classes.imageContainer} data-test="product-image">
<div
className={classNames(classes.imageOverlay, {
[classes.imageOverlayShow]: loading

2
src/components/LinkChoice/LinkChoice.tsx
View file

@ -145,7 +145,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
selected={choice.value === value}
key={choice.value}
onClick={() => handleChange(choice.value)}
data-tc="select-option"
data-test="select-option"
>
{choice.label}
</MenuItem>

10
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
View file

@ -210,7 +210,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
{...getItemProps({
item: inputValue
})}
data-tc="multiautocomplete-select-option-add"
data-test="multiautocomplete-select-option-add"
onClick={add.onClick}
>
<AddIcon color="primary" className={classes.addIcon} />
@ -225,7 +225,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
{...getItemProps({
item: inputValue
})}
data-tc="multiautocomplete-select-option"
data-test="multiautocomplete-select-option"
>
<AddIcon className={classes.addIcon} color="primary" />
<FormattedMessage
@ -249,7 +249,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
{...getItemProps({
item: value.value
})}
data-tc="multiautocomplete-select-option"
data-test="multiautocomplete-select-option"
>
<Checkbox
className={classes.checkbox}
@ -282,7 +282,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
index: choiceIndex,
item: suggestion.value
})}
data-tc="multiautocomplete-select-option"
data-test="multiautocomplete-select-option"
>
<Checkbox
checked={false}
@ -309,7 +309,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
<MenuItem
disabled={true}
component="div"
data-tc="multiautocomplete-select-no-options"
data-test="multiautocomplete-select-no-options"
>
<FormattedMessage defaultMessage="No results found" />
</MenuItem>

6
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -104,7 +104,7 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
variant="contained"
onClick={onDelete}
className={classes.deleteButton}
data-tc="button-bar-delete"
data-test="button-bar-delete"
>
{labels && labels.delete
? labels.delete
@ -116,7 +116,7 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
className={classes.cancelButton}
variant="text"
onClick={onCancel}
data-tc="button-bar-cancel"
data-test="button-bar-cancel"
>
{maybe(
() => labels.cancel,
@ -127,7 +127,7 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
disabled={disabled}
onClick={onSave}
transitionState={state}
data-tc="button-bar-confirm"
data-test="button-bar-confirm"
>
{maybe(
() => labels.save,

10
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
View file

@ -175,7 +175,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{...getItemProps({
item: ""
})}
data-tc="singleautocomplete-select-option"
data-test="singleautocomplete-select-option"
>
<Typography color="textSecondary">
<FormattedMessage defaultMessage="None" />
@ -189,7 +189,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{...getItemProps({
item: inputValue
})}
data-tc="singleautocomplete-select-option-add"
data-test="singleautocomplete-select-option-add"
onClick={add.onClick}
>
<Add color="primary" className={classes.add} />
@ -205,7 +205,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
{...getItemProps({
item: inputValue
})}
data-tc="singleautocomplete-select-option"
data-test="singleautocomplete-select-option"
>
<FormattedMessage
defaultMessage="Add new value: {value}"
@ -237,7 +237,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
index: choiceIndex,
item: suggestion.value
})}
data-tc="singleautocomplete-select-option"
data-test="singleautocomplete-select-option"
>
{suggestion.label}
</MenuItem>
@ -256,7 +256,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
<MenuItem
disabled={true}
component="div"
data-tc="singleautocomplete-select-no-options"
data-test="singleautocomplete-select-no-options"
>
<FormattedMessage defaultMessage="No results found" />
</MenuItem>

4
src/components/TablePagination/TablePaginationActions.tsx
View file

@ -87,7 +87,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
})}
onClick={onPreviousPage}
disabled={!hasPreviousPage}
data-tc="button-pagination-back"
data-test="button-pagination-back"
{...backIconButtonProps}
>
{direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
@ -99,7 +99,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
})}
onClick={onNextPage}
disabled={!hasNextPage}
data-tc="button-pagination-next"
data-test="button-pagination-next"
{...nextIconButtonProps}
>
{direction === "rtl" ? <ArrowLeft /> : <ArrowRight />}

4
src/components/messages/MessageManager.tsx
View file

@ -73,7 +73,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
"aria-describedby": "message-id"
}}
message={
<span id="message-id" data-tc="notification">
<span id="message-id" data-test="notification">
{title && (
<Typography variant="h5" style={{ marginBottom: "1rem" }}>
{title}
@ -90,7 +90,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
color="secondary"
size="small"
onClick={this.handleClose as any}
data-tc="button-undo"
data-test="button-undo"
>
UNDO
</Button>

2
src/home/components/HomeHeader/HomeHeader.tsx
View file

@ -29,7 +29,7 @@ const HomeOrdersCard: React.FC<HomeOrdersCardProps> = props => {
const classes = useStyles(props);
return (
<div className={classes.headerContainer} data-tc="home-header">
<div className={classes.headerContainer} data-test="home-header">
<Typography className={classes.pageHeader} variant="h4">
{userName ? (
<FormattedMessage

6
src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
View file

@ -47,7 +47,7 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<DialogContentText key="cancel">
<FormattedMessage
defaultMessage="Cancelling this order will release unfulfilled stocks, so they can be bought by other customers. <b>Order will not be refunded when cancelling order - You need to do it manually.</b> Are you sure you want to cancel this order?"
values={{
@ -59,8 +59,8 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

6
src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx
View file

@ -40,7 +40,7 @@ const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
})}
variant="delete"
>
<DialogContentText>
<DialogContentText key="cancel">
<FormattedMessage
defaultMessage="Are you sure you want to delete draft #{orderNumber}?"
values={{
@ -51,8 +51,8 @@ const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.tsx
View file

@ -109,8 +109,8 @@ const OrderDraftFinalizeDialog: React.FC<OrderDraftFinalizeDialogProps> = ({
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

13
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
View file

@ -260,7 +260,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
(line, lineIndex) => {
if (!line) {
return (
<TableRow>
<TableRow key={lineIndex}>
<TableCellAvatar className={classes.colName}>
<Skeleton />
</TableCellAvatar>
@ -326,6 +326,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
if (!warehouseStock) {
return (
<TableCell
key="skeleton"
className={classNames(
classes.colQuantity,
classes.error
@ -358,9 +359,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
.variant.trackInventory
}
),
max:
max: (
line.variant.trackInventory &&
warehouseStock.quantity,
warehouseStock.quantity
).toString(),
min: 0,
style: { textAlign: "right" }
}}
@ -409,7 +411,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
</TableCell>
);
})}
<TableCell className={classes.colQuantityTotal}>
<TableCell
className={classes.colQuantityTotal}
key="total"
>
<span
className={classNames({
[classes.error]: overfulfill,

4
src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
View file

@ -111,8 +111,8 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

6
src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
View file

@ -164,7 +164,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
<TextField
type="number"
inputProps={{
max: remainingQuantity,
max: remainingQuantity.toString(),
style: { textAlign: "right" }
}}
className={classes.quantityInput}
@ -213,8 +213,8 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
View file

@ -76,8 +76,8 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx
View file

@ -43,8 +43,8 @@ const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
View file

@ -88,8 +88,8 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
View file

@ -46,8 +46,8 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -340,8 +340,8 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{errors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

4
src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
View file

@ -120,8 +120,8 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
{nonFieldErrors.length > 0 && (
<>
<FormSpacer />
{nonFieldErrors.map(err => (
<DialogContentText color="error">
{nonFieldErrors.map((err, index) => (
<DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}

10
src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
View file

@ -125,19 +125,21 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
onClick={
permissionGroup ? onRowClick(permissionGroup.id) : undefined
}
data-tc="id"
data-tc-id={maybe(() => permissionGroup.id)}
data-test="id"
data-test-id={maybe(() => permissionGroup.id)}
>
<TableCell className={classes.colName}>
{permissionGroup ? (
<span data-tc="name">{permissionGroup.name}</span>
<span data-test="name">{permissionGroup.name}</span>
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colMembers}>
{permissionGroup ? (
<span data-tc="members">{permissionGroup.users.length}</span>
<span data-test="members">
{permissionGroup.users.length}
</span>
) : (
<Skeleton />
)}

10
src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
View file

@ -83,7 +83,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
return (
<Card
data-tc={
data-test={
type === AttributeTypeEnum.PRODUCT
? "product-attributes"
: "variant-attributes"
@ -153,8 +153,8 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
}
key={maybe(() => attribute.id)}
index={attributeIndex || 0}
data-tc="id"
data-tc-id={maybe(() => attribute.id)}
data-test="id"
data-test-id={maybe(() => attribute.id)}
>
<TableCell padding="checkbox">
<Checkbox
@ -164,14 +164,14 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
onChange={() => toggle(attribute.id)}
/>
</TableCell>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{maybe(() => attribute.name) ? (
attribute.name
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colSlug} data-tc="slug">
<TableCell className={classes.colSlug} data-test="slug">
{maybe(() => attribute.slug) ? (
attribute.slug
) : (

6
src/productTypes/components/ProductTypeList/ProductTypeList.tsx
View file

@ -142,8 +142,8 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
key={productType ? productType.id : "skeleton"}
onClick={productType ? onRowClick(productType.id) : undefined}
selected={isSelected}
data-tc="id"
data-tc-id={maybe(() => productType.id)}
data-test="id"
data-test-id={maybe(() => productType.id)}
>
<TableCell padding="checkbox">
<Checkbox
@ -156,7 +156,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
<TableCell className={classes.colName}>
{productType ? (
<>
<span data-tc="name">{productType.name}</span>
<span data-test="name">{productType.name}</span>
<Typography variant="caption">
{maybe(() => productType.hasVariants)
? intl.formatMessage({

6
src/products/components/ProductAttributes/ProductAttributes.tsx
View file

@ -157,7 +157,7 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
<IconButton
className={classes.expansionBarButton}
onClick={toggleExpansion}
data-tc="product-attributes-expand"
data-test="product-attributes-expand"
>
<ArrowDropDownIcon
className={classNames(classes.expansionBarButtonIcon, {
@ -175,11 +175,11 @@ const ProductAttributes: React.FC<ProductAttributesProps> = ({
<Grid className={classes.attributeSection} variant="uniform">
<div
className={classes.attributeSectionLabel}
data-tc="product-attribute-label"
data-test="product-attribute-label"
>
<Typography>{attribute.label}</Typography>
</div>
<div data-tc="product-attribute-value">
<div data-test="product-attribute-value">
{attribute.data.inputType ===
AttributeInputTypeEnum.DROPDOWN ? (
<SingleAutocompleteSelectField

2
src/products/components/ProductImages/ProductImages.tsx
View file

@ -222,7 +222,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
disabled={loading}
variant="text"
color="primary"
data-tc="button-upload-image"
data-test="button-upload-image"
>
{intl.formatMessage(commonMessages.uploadImage)}
</Button>

16
src/products/components/ProductList/ProductList.tsx
View file

@ -332,8 +332,8 @@ export const ProductList: React.FC<ProductListProps> = props => {
key={product ? product.id : "skeleton"}
onClick={product && onRowClick(product.id)}
className={classes.link}
data-tc="id"
data-tc-id={maybe(() => product.id)}
data-test="id"
data-test-id={maybe(() => product.id)}
>
<TableCell padding="checkbox">
<Checkbox
@ -346,7 +346,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
<TableCellAvatar
className={classes.colName}
thumbnail={maybe(() => product.thumbnail.url)}
data-tc="name"
data-test="name"
>
{product?.productType ? (
<div className={classes.colNameWrapper}>
@ -377,7 +377,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
>
<TableCell
className={classes.colType}
data-tc="product-type"
data-test="product-type"
>
{product && product.productType ? (
product.productType.name
@ -392,8 +392,8 @@ export const ProductList: React.FC<ProductListProps> = props => {
>
<TableCell
className={classes.colPublished}
data-tc="isPublished"
data-tc-is-published={maybe(() => product.isPublished)}
data-test="isPublished"
data-test-is-published={maybe(() => product.isPublished)}
>
{product &&
maybe(() => product.isPublished !== undefined) ? (
@ -420,8 +420,8 @@ export const ProductList: React.FC<ProductListProps> = props => {
<TableCell
className={classes.colAttribute}
key={gridAttribute}
data-tc="attribute"
data-tc-attribute={getAttributeIdFromColumnValue(
data-test="attribute"
data-test-attribute={getAttributeIdFromColumnValue(
gridAttribute
)}
>

2
src/products/components/ProductListPage/ProductListPage.tsx
View file

@ -138,7 +138,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
onClick={onAdd}
color="primary"
variant="contained"
data-tc="add-product"
data-test="add-product"
>
<FormattedMessage
defaultMessage="Create Product"

6
src/products/components/ProductOrganization/ProductOrganization.tsx
View file

@ -124,7 +124,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
value={data.productType}
onChange={onProductTypeChange}
fetchChoices={fetchProductTypes}
data-tc="product-type"
data-test="product-type"
{...fetchMoreProductTypes}
/>
) : (
@ -170,7 +170,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
value={data.category}
onChange={onCategoryChange}
fetchChoices={fetchCategories}
data-tc="category"
data-test="category"
{...fetchMoreCategories}
/>
<FormSpacer />
@ -195,7 +195,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
}
onChange={onCollectionChange}
fetchChoices={fetchCollections}
data-tc="collections"
data-test="collections"
{...fetchMoreCollections}
/>
</CardContent>

2
src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
View file

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

12
src/products/components/ProductVariants/ProductVariants.tsx
View file

@ -211,7 +211,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
onClick={onVariantAdd}
variant="text"
color="primary"
data-tc="button-add-variant"
data-test="button-add-variant"
>
<FormattedMessage
defaultMessage="Create variant"
@ -223,7 +223,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
onClick={onVariantsAdd}
variant="text"
color="primary"
data-tc="button-add-variants"
data-test="button-add-variants"
>
<FormattedMessage
defaultMessage="Create variants"
@ -318,14 +318,14 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
onChange={() => toggle(variant.id)}
/>
</TableCell>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{variant ? variant.name || variant.sku : <Skeleton />}
</TableCell>
<TableCell className={classes.colSku} data-tc="sku">
<TableCell className={classes.colSku} data-test="sku">
{variant ? variant.sku : <Skeleton />}
</TableCell>
<Hidden smDown>
<TableCell className={classes.colPrice} data-tc="price">
<TableCell className={classes.colPrice} data-test="price">
{variant ? (
variant.price ? (
<Money money={variant.price} />
@ -341,7 +341,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
</Hidden>
<TableCell
className={classes.colInventory}
data-tc="inventory"
data-test="inventory"
>
{numAvailable === null ? (
<Skeleton />

4
src/services/components/ServiceList/ServiceList.tsx
View file

@ -125,10 +125,10 @@ const ServiceList: React.FC<ServiceListProps> = props => {
onClick={service ? onRowClick(service.id) : undefined}
>
<TableCell className={classes.colName}>
<span data-tc="name">
<span data-test="name">
{maybe<React.ReactNode>(() => service.name, <Skeleton />)}
</span>
<Typography data-tc="isActive" variant="caption">
<Typography data-test="isActive" variant="caption">
{maybe(() =>
service.isActive ? (
<FormattedMessage

1861
src/storybook/__snapshots__/Stories.test.ts.snap
View file

File diff suppressed because it is too large Load diff

8
src/warehouses/components/WarehouseList/WarehouseList.tsx
View file

@ -130,13 +130,13 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
hover={!!warehouse}
onClick={warehouse ? onRowClick(warehouse.id) : undefined}
key={warehouse ? warehouse.id : "skeleton"}
data-tc="id"
data-tc-id={maybe(() => warehouse.id)}
data-test="id"
data-test-id={maybe(() => warehouse.id)}
>
<TableCell className={classes.colName} data-tc="name">
<TableCell className={classes.colName} data-test="name">
{maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colZones} data-tc="zones">
<TableCell className={classes.colZones} data-test="zones">
{maybe<React.ReactNode>(
() =>
warehouse.shippingZones.edges