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 { export default class HomePage {
constructor() { constructor() {
this.header = Selector('[data-tc="home-header"]'); this.header = Selector('[data-test="home-header"]');
this.catalogMenu = Selector('[data-tc="Catalog"]'); this.catalogMenu = Selector('[data-test="Catalog"]');
this.productsSubMenu = Selector( 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 { export default class LoginPage {
constructor() { constructor() {
this.email = Selector('[data-tc="email"]'); this.email = Selector('[data-test="email"]');
this.password = Selector('[data-tc="password"]'); this.password = Selector('[data-test="password"]');
this.submitButton = Selector('[data-tc="submit"]'); this.submitButton = Selector('[data-test="submit"]');
} }
async performLogin(putEmail, putPassword) { 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"} key={attribute ? attribute.id : "skeleton"}
onClick={attribute && onRowClick(attribute.id)} onClick={attribute && onRowClick(attribute.id)}
className={classes.link} className={classes.link}
data-tc="id" data-test="id"
data-tc-id={maybe(() => attribute.id)} data-test-id={maybe(() => attribute.id)}
data-tc-values={JSON.stringify( data-test-values={JSON.stringify(
maybe(() => attribute.values, []) maybe(() => attribute.values, [])
)} )}
> >
@ -207,16 +207,16 @@ const AttributeList: React.FC<AttributeListProps> = ({
onChange={() => toggle(attribute.id)} onChange={() => toggle(attribute.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colSlug} data-tc="slug"> <TableCell className={classes.colSlug} data-test="slug">
{attribute ? attribute.slug : <Skeleton />} {attribute ? attribute.slug : <Skeleton />}
</TableCell> </TableCell>
<TableCell className={classes.colName} data-tc="name"> <TableCell className={classes.colName} data-test="name">
{attribute ? attribute.name : <Skeleton />} {attribute ? attribute.name : <Skeleton />}
</TableCell> </TableCell>
<TableCell <TableCell
className={classes.colVisible} className={classes.colVisible}
data-tc="visible" data-test="visible"
data-tc-visible={maybe(() => attribute.visibleInStorefront)} data-test-visible={maybe(() => attribute.visibleInStorefront)}
> >
{attribute ? ( {attribute ? (
translateBoolean(attribute.visibleInStorefront, intl) translateBoolean(attribute.visibleInStorefront, intl)
@ -226,8 +226,8 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCell> </TableCell>
<TableCell <TableCell
className={classes.colSearchable} className={classes.colSearchable}
data-tc="searchable" data-test="searchable"
data-tc-searchable={maybe( data-test-searchable={maybe(
() => attribute.filterableInDashboard () => attribute.filterableInDashboard
)} )}
> >
@ -239,8 +239,8 @@ const AttributeList: React.FC<AttributeListProps> = ({
</TableCell> </TableCell>
<TableCell <TableCell
className={classes.colFaceted} className={classes.colFaceted}
data-tc="use-in-faceted-search" data-test="use-in-faceted-search"
data-tc-use-in-faceted-search={maybe( data-test-use-in-faceted-search={maybe(
() => attribute.filterableInStorefront () => attribute.filterableInStorefront
)} )}
> >

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

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

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

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

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

@ -68,7 +68,7 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
onChange={handleChange} onChange={handleChange}
value={data.email} value={data.email}
inputProps={{ inputProps={{
"data-tc": "email" "data-test": "email"
}} }}
/> />
<FormSpacer /> <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} onClick={category ? onRowClick(category.id) : undefined}
key={category ? category.id : "skeleton"} key={category ? category.id : "skeleton"}
selected={isSelected} selected={isSelected}
data-tc="id" data-test="id"
data-tc-id={maybe(() => category.id)} data-test-id={maybe(() => category.id)}
> >
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
@ -176,7 +176,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
onChange={() => toggle(category.id)} onChange={() => toggle(category.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName} data-tc="name"> <TableCell className={classes.colName} data-test="name">
{category && category.name ? category.name : <Skeleton />} {category && category.name ? category.name : <Skeleton />}
</TableCell> </TableCell>
<TableCell className={classes.colSubcategories}> <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} onClick={collection ? onRowClick(collection.id) : undefined}
key={collection ? collection.id : "skeleton"} key={collection ? collection.id : "skeleton"}
selected={isSelected} selected={isSelected}
data-tc="id" data-test="id"
data-tc-id={maybe(() => collection.id)} data-test-id={maybe(() => collection.id)}
> >
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
@ -161,7 +161,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
onChange={() => toggle(collection.id)} onChange={() => toggle(collection.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName} data-tc="name"> <TableCell className={classes.colName} data-test="name">
{maybe<React.ReactNode>(() => collection.name, <Skeleton />)} {maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
</TableCell> </TableCell>
<TableCell className={classes.colProducts}> <TableCell className={classes.colProducts}>
@ -172,8 +172,8 @@ const CollectionList: React.FC<CollectionListProps> = props => {
</TableCell> </TableCell>
<TableCell <TableCell
className={classes.colAvailability} className={classes.colAvailability}
data-tc="published" data-test="published"
data-tc-published={maybe(() => collection.isPublished)} data-test-published={maybe(() => collection.isPublished)}
> >
{maybe( {maybe(
() => ( () => (

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

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

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

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

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

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

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

@ -160,7 +160,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
choices={countries} choices={countries}
InputProps={{ InputProps={{
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); const classes = useStyles(props);
return ( return (
<div className={classes.imageContainer} data-tc="product-image"> <div className={classes.imageContainer} data-test="product-image">
<div <div
className={classNames(classes.imageOverlay, { className={classNames(classes.imageOverlay, {
[classes.imageOverlayShow]: loading [classes.imageOverlayShow]: loading

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

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

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

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

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

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

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

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

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

@ -87,7 +87,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
})} })}
onClick={onPreviousPage} onClick={onPreviousPage}
disabled={!hasPreviousPage} disabled={!hasPreviousPage}
data-tc="button-pagination-back" data-test="button-pagination-back"
{...backIconButtonProps} {...backIconButtonProps}
> >
{direction === "rtl" ? <ArrowRight /> : <ArrowLeft />} {direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
@ -99,7 +99,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
})} })}
onClick={onNextPage} onClick={onNextPage}
disabled={!hasNextPage} disabled={!hasNextPage}
data-tc="button-pagination-next" data-test="button-pagination-next"
{...nextIconButtonProps} {...nextIconButtonProps}
> >
{direction === "rtl" ? <ArrowLeft /> : <ArrowRight />} {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" "aria-describedby": "message-id"
}} }}
message={ message={
<span id="message-id" data-tc="notification"> <span id="message-id" data-test="notification">
{title && ( {title && (
<Typography variant="h5" style={{ marginBottom: "1rem" }}> <Typography variant="h5" style={{ marginBottom: "1rem" }}>
{title} {title}
@ -90,7 +90,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
color="secondary" color="secondary"
size="small" size="small"
onClick={this.handleClose as any} onClick={this.handleClose as any}
data-tc="button-undo" data-test="button-undo"
> >
UNDO UNDO
</Button> </Button>

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

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

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

@ -47,7 +47,7 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
/> />
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText key="cancel">
<FormattedMessage <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?" 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={{ values={{
@ -59,8 +59,8 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
{errors.length > 0 && ( {errors.length > 0 && (
<> <>
<FormSpacer /> <FormSpacer />
{errors.map(err => ( {errors.map((err, index) => (
<DialogContentText color="error"> <DialogContentText color="error" key={index}>
{getOrderErrorMessage(err, intl)} {getOrderErrorMessage(err, intl)}
</DialogContentText> </DialogContentText>
))} ))}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -83,7 +83,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
return ( return (
<Card <Card
data-tc={ data-test={
type === AttributeTypeEnum.PRODUCT type === AttributeTypeEnum.PRODUCT
? "product-attributes" ? "product-attributes"
: "variant-attributes" : "variant-attributes"
@ -153,8 +153,8 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
} }
key={maybe(() => attribute.id)} key={maybe(() => attribute.id)}
index={attributeIndex || 0} index={attributeIndex || 0}
data-tc="id" data-test="id"
data-tc-id={maybe(() => attribute.id)} data-test-id={maybe(() => attribute.id)}
> >
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
@ -164,14 +164,14 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
onChange={() => toggle(attribute.id)} onChange={() => toggle(attribute.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName} data-tc="name"> <TableCell className={classes.colName} data-test="name">
{maybe(() => attribute.name) ? ( {maybe(() => attribute.name) ? (
attribute.name attribute.name
) : ( ) : (
<Skeleton /> <Skeleton />
)} )}
</TableCell> </TableCell>
<TableCell className={classes.colSlug} data-tc="slug"> <TableCell className={classes.colSlug} data-test="slug">
{maybe(() => attribute.slug) ? ( {maybe(() => attribute.slug) ? (
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"} key={productType ? productType.id : "skeleton"}
onClick={productType ? onRowClick(productType.id) : undefined} onClick={productType ? onRowClick(productType.id) : undefined}
selected={isSelected} selected={isSelected}
data-tc="id" data-test="id"
data-tc-id={maybe(() => productType.id)} data-test-id={maybe(() => productType.id)}
> >
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
@ -156,7 +156,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
{productType ? ( {productType ? (
<> <>
<span data-tc="name">{productType.name}</span> <span data-test="name">{productType.name}</span>
<Typography variant="caption"> <Typography variant="caption">
{maybe(() => productType.hasVariants) {maybe(() => productType.hasVariants)
? intl.formatMessage({ ? intl.formatMessage({

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

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

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

@ -222,7 +222,7 @@ const ProductImages: React.FC<ProductImagesProps> = props => {
disabled={loading} disabled={loading}
variant="text" variant="text"
color="primary" color="primary"
data-tc="button-upload-image" data-test="button-upload-image"
> >
{intl.formatMessage(commonMessages.uploadImage)} {intl.formatMessage(commonMessages.uploadImage)}
</Button> </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"} key={product ? product.id : "skeleton"}
onClick={product && onRowClick(product.id)} onClick={product && onRowClick(product.id)}
className={classes.link} className={classes.link}
data-tc="id" data-test="id"
data-tc-id={maybe(() => product.id)} data-test-id={maybe(() => product.id)}
> >
<TableCell padding="checkbox"> <TableCell padding="checkbox">
<Checkbox <Checkbox
@ -346,7 +346,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
<TableCellAvatar <TableCellAvatar
className={classes.colName} className={classes.colName}
thumbnail={maybe(() => product.thumbnail.url)} thumbnail={maybe(() => product.thumbnail.url)}
data-tc="name" data-test="name"
> >
{product?.productType ? ( {product?.productType ? (
<div className={classes.colNameWrapper}> <div className={classes.colNameWrapper}>
@ -377,7 +377,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
> >
<TableCell <TableCell
className={classes.colType} className={classes.colType}
data-tc="product-type" data-test="product-type"
> >
{product && product.productType ? ( {product && product.productType ? (
product.productType.name product.productType.name
@ -392,8 +392,8 @@ export const ProductList: React.FC<ProductListProps> = props => {
> >
<TableCell <TableCell
className={classes.colPublished} className={classes.colPublished}
data-tc="isPublished" data-test="isPublished"
data-tc-is-published={maybe(() => product.isPublished)} data-test-is-published={maybe(() => product.isPublished)}
> >
{product && {product &&
maybe(() => product.isPublished !== undefined) ? ( maybe(() => product.isPublished !== undefined) ? (
@ -420,8 +420,8 @@ export const ProductList: React.FC<ProductListProps> = props => {
<TableCell <TableCell
className={classes.colAttribute} className={classes.colAttribute}
key={gridAttribute} key={gridAttribute}
data-tc="attribute" data-test="attribute"
data-tc-attribute={getAttributeIdFromColumnValue( data-test-attribute={getAttributeIdFromColumnValue(
gridAttribute gridAttribute
)} )}
> >

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

@ -138,7 +138,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
onClick={onAdd} onClick={onAdd}
color="primary" color="primary"
variant="contained" variant="contained"
data-tc="add-product" data-test="add-product"
> >
<FormattedMessage <FormattedMessage
defaultMessage="Create Product" 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} value={data.productType}
onChange={onProductTypeChange} onChange={onProductTypeChange}
fetchChoices={fetchProductTypes} fetchChoices={fetchProductTypes}
data-tc="product-type" data-test="product-type"
{...fetchMoreProductTypes} {...fetchMoreProductTypes}
/> />
) : ( ) : (
@ -170,7 +170,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
value={data.category} value={data.category}
onChange={onCategoryChange} onChange={onCategoryChange}
fetchChoices={fetchCategories} fetchChoices={fetchCategories}
data-tc="category" data-test="category"
{...fetchMoreCategories} {...fetchMoreCategories}
/> />
<FormSpacer /> <FormSpacer />
@ -195,7 +195,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
} }
onChange={onCollectionChange} onChange={onCollectionChange}
fetchChoices={fetchCollections} fetchChoices={fetchCollections}
data-tc="collections" data-test="collections"
{...fetchMoreCollections} {...fetchMoreCollections}
/> />
</CardContent> </CardContent>

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

@ -115,7 +115,7 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
value={getAttributeValue(attribute.id, attributes)} value={getAttributeValue(attribute.id, attributes)}
choices={getAttributeValueChoices(attribute.id, attributes)} choices={getAttributeValueChoices(attribute.id, attributes)}
allowCustomValues 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} onClick={onVariantAdd}
variant="text" variant="text"
color="primary" color="primary"
data-tc="button-add-variant" data-test="button-add-variant"
> >
<FormattedMessage <FormattedMessage
defaultMessage="Create variant" defaultMessage="Create variant"
@ -223,7 +223,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
onClick={onVariantsAdd} onClick={onVariantsAdd}
variant="text" variant="text"
color="primary" color="primary"
data-tc="button-add-variants" data-test="button-add-variants"
> >
<FormattedMessage <FormattedMessage
defaultMessage="Create variants" defaultMessage="Create variants"
@ -318,14 +318,14 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
onChange={() => toggle(variant.id)} onChange={() => toggle(variant.id)}
/> />
</TableCell> </TableCell>
<TableCell className={classes.colName} data-tc="name"> <TableCell className={classes.colName} data-test="name">
{variant ? variant.name || variant.sku : <Skeleton />} {variant ? variant.name || variant.sku : <Skeleton />}
</TableCell> </TableCell>
<TableCell className={classes.colSku} data-tc="sku"> <TableCell className={classes.colSku} data-test="sku">
{variant ? variant.sku : <Skeleton />} {variant ? variant.sku : <Skeleton />}
</TableCell> </TableCell>
<Hidden smDown> <Hidden smDown>
<TableCell className={classes.colPrice} data-tc="price"> <TableCell className={classes.colPrice} data-test="price">
{variant ? ( {variant ? (
variant.price ? ( variant.price ? (
<Money money={variant.price} /> <Money money={variant.price} />
@ -341,7 +341,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
</Hidden> </Hidden>
<TableCell <TableCell
className={classes.colInventory} className={classes.colInventory}
data-tc="inventory" data-test="inventory"
> >
{numAvailable === null ? ( {numAvailable === null ? (
<Skeleton /> <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} onClick={service ? onRowClick(service.id) : undefined}
> >
<TableCell className={classes.colName}> <TableCell className={classes.colName}>
<span data-tc="name"> <span data-test="name">
{maybe<React.ReactNode>(() => service.name, <Skeleton />)} {maybe<React.ReactNode>(() => service.name, <Skeleton />)}
</span> </span>
<Typography data-tc="isActive" variant="caption"> <Typography data-test="isActive" variant="caption">
{maybe(() => {maybe(() =>
service.isActive ? ( service.isActive ? (
<FormattedMessage <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} hover={!!warehouse}
onClick={warehouse ? onRowClick(warehouse.id) : undefined} onClick={warehouse ? onRowClick(warehouse.id) : undefined}
key={warehouse ? warehouse.id : "skeleton"} key={warehouse ? warehouse.id : "skeleton"}
data-tc="id" data-test="id"
data-tc-id={maybe(() => warehouse.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 />)} {maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}
</TableCell> </TableCell>
<TableCell className={classes.colZones} data-tc="zones"> <TableCell className={classes.colZones} data-test="zones">
{maybe<React.ReactNode>( {maybe<React.ReactNode>(
() => () =>
warehouse.shippingZones.edges warehouse.shippingZones.edges